一种基于链式访问的styled继承方法和系统

摘要

本发明公开了一种基于链式访问的styled继承方法和系统，所述方法包括：获取样式对象，利用styled‑components封装所述样式对象构建对应的样式组件；对每一个样式组件建立对应的代理，通过所述代理访问样式组件中的样式对象；返回对应样式组件的第一样式对象代理，进一步访问返回的第一样式对象代理中的对象属性，并生成第二样式对象代理，构建链式访问；替换所述第一样式对象代理或第二样式对象代理中的对象为目标样式对象，用于继承所述目标样式对象。所述方法和系统通过styled‑components对样式属性进行封装，并通过访问操作符对不同的样式属性进行连接，从而便于样式属性的继承。

说明书

技术领域

本发明涉及计算机技术领域，特别涉及一种基于链式访问的styled继承方法和系统。

背景技术

在以前的前端开发中，有一个原则叫作“关注点分离”，各种技术只负责自己的领域，即HTML、CSS、JavaScript各自负责自己的不同的领域，对于CSS 而言，简单来说就是避免写“行内样式”和“行内脚本”。在React出现以后，这个原则就不在适用了，因外React是组件结构，要求把HTML、CSS、JavaScript 写在一起，这样虽然违背了“关注点分离”，但有利于组件的隔离。随着React 的普及，这种“关注点混合”的方式逐渐成为主流。上述现有技术存在无法对样式进行继承，尤其是在链式访问中需要嵌套写法进行关注点混合，从而使得代码的可读性很差，不利于代码封装继承。

发明内容

本发明其中一个发明目的在于提供一种基于链式访问的styled继承方法和系统，所述方法和系统通过styled-components对样式属性进行封装，并通过访问操作符对不同的样式属性进行连接，从而便于样式属性的继承。

本发明另一个发明目的在于提供一种基于链式访问的styled继承方法和系统，所述方法和系统通过代理的方式构建链式访问，并更改代理对象的返回值，更改后可以实现多层级的styled中对象属性的继承。

本发明另一个发明目的在于提供一种基于链式访问的styled继承方法和系统，所述方法和系统可以在styled文件中封装多个样式对象，并利用代理机制实现多个样式对象的继承。

为了实现至少一个上述发明目的，本发明进一步提供一种基于链式访问的styled继承方法，所述方法包括：

获取样式对象，利用styled-components封装所述样式对象构建对应的样式组件；

对每一个样式组件建立对应的代理，通过所述代理访问样式组件中的样式对象；

返回对应样式组件的第一样式对象，并构建所述第一样式对象代理，进一步访问返回的第一样式对象代理中的对象属性，并生成第二样式对象代理，构建链式访问；

替换所述第一样式对象代理或第二样式对象代理中的对象为目标样式对象的样式组件，用于继承所述目标样式对象。

根据本发明其中一个较佳实施例，所述样式属性对于的样式组件构建方法包括：利用属性访问符和每个样式对象建立连接，并将对应的样式对象封装在 styled文件中。

根据本发明另一个较佳实施例，所述样式组件由styled的可编辑div组件构成，其中所述可编辑div组件构建的样式组件包含样式对象。

根据本发明另一个较佳实施例，所述样式对象包括超出自动省略 (Ellipsis)、水平垂直居中(FlexCenter)和宽度100px中的至少一种。

根据本发明另一个较佳实施例，利用所述可编辑div组件构建的所述样式组件包括多个样式对象。

根据本发明另一个较佳实施例，在获取所述样式组件中的样式对象后，建立一个样式对象的类，并提供一个注册接口，用于注册所述样式对象。

根据本发明另一个较佳实施例，在完成所述样式属性封装后得到样式组件后，进一步将封装完毕的样式组件创建一个代理，返回一个样式对象，并同时调用styled的div组件作为代理目标。

根据本发明另一个较佳实施例，在返回一个样式对象后，进一步将所述样式对象替换为目标样式对象styled(target)，以实现目标样式的继承。

为了实现至少一个上述发明目的，本发明进一步提供一种基于链式访问的styled继承系统，所述系统执行上述一种基于链式访问的styled继承方法。

本发明提供一种计算机可读存储介质，计算机可读存储介质存储有计算机程序，所述计算机程序可被处理器执行上述一种基于链式访问的styled继承方法。

附图说明

图1显示的是本发明一种基于链式访问的styled继承方法的流程示意图。

图2显示的是本发明中不同代理目标的函数访问表。

具体实施方式

以下描述用于揭露本发明以使本领域技术人员能够实现本发明。以下描述中的优选实施例只作为举例，本领域技术人员可以想到其他显而易见的变型。在以下描述中界定的本发明的基本原理可以应用于其他实施方案、变形方案、改进方案、等同方案以及没有背离本发明的精神和范围的其他技术方案。

可以理解的是，术语“一”应理解为“至少一”或“一个或多个”，即在一个实施例中，一个元件的数量可以为一个，而在另外的实施例中，该元件的数量可以为多个，术语“一”不能理解为对数量的限制。

结合图1，本发明公开了一种基于链式访问的styled继承方法和系统，所述方法主要包括如下步骤：首先需要将样式对象进行封装，将样式对象封装到对应的styled文件中。其中本发明利用属性访问符“.”去分别连接每个样式对象，从而建立和每个样式对象的连接关系。利用styled-components对所述样式对象进行封装，生成样式组件，并将重新封装后的样式对象作为样式组件重新标记命名。举例来说，封装方法包括：假设原样式对象代码为styled.div.Ellipsis.FlexCenter({width:100})，上述原样式代码中Ellipsis、FlexCenter分别为不同的样式对象，重新对上述原样式对象进行封装后得到： const Div＝styled’.div.Ellipsis.FlexCenter()；const A＝styled’.a.Red()；其中重新封装的样式对象中包含了“超出自动省略(Ellipsis)”、“水平垂直居中(FlexCenter)”、“宽度100px”的div组件。其中，上述封装后的样式组件为styled’，未封装的样式组件为styled。需要说明的是，上述样式对象仅仅是举例说明，本发明对此不再具体限制。

值得一提的是，请结合图2，本发明进一步构建链式访问，并基于链式访问实现样式的继承。其中本发明利用代理实现链式访问，具体包括如下步骤：将已经封装好的styled’样式组件的属性访问代理到另一个styled样式组件中。标记此时styled样式组件代理为styledProxy。需要说明的是styledProxy是对styled.div 的代理，因此在访问所述styled.div上的属性时，通过styledProxy可以返回一个样式对象代理，标记所述封装好的样式组件代理返回的对象为第一样式对象 definitionProxy(图二中的styledProx代理名称返回值)，在访问的过程中直接调用封装好的styled’样式组件，实际调用函数为styled.div()函数，同时也是 styled’.div()函数，用于获取实际封装好的styled’样式组件。

请继续参考图2，获取到所述styledProxy返回的第一样式对象替换成目标对象代理styled(target)，在图2中为代理目标styled.div.Ellipsis，也就是说替换的目标对象代理为styled((styled.div.Ellipsis))，上述替换的目标对象代理可以直接调用styled.div()函数获取。因为styled.div()函数可以直接获取封装好的 styled’对象组件中的对象，因此通过所述styled.div()函数实际上调用的函数为styled’.div.Ellipsis()。并进一步返回第二样式对象definitionProxy(图二中的definitionProxy代理名称返回值)。从而利用代理机制可以实现链式访问并继承上述样式对象。

本发明需要对样式对象进行维护，所述样式对象的维护方法包括：定义一个类，所述类标记为StyledChain，并提供一个样式注册接口用于注册样式对象。所述样式注册接口为一个javascript函数，通过调用该函数可以注册样式对象的结构，以及字段期望的空值。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分从网络上被下载和安装，和/或从可拆卸介质被安装。在该计算机程序被中央处理单元(CPU)执行时，执行本申请的方法中限定的上述功能。需要说明的是，本申请上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是但不限于电、磁、光、电磁、红外线段、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线段的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线段、电线段、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域的技术人员应理解，上述描述及附图中所示的本发明的实施例只作为举例而并不限制本发明，本发明的目的已经完整并有效地实现，本发明的功能及结构原理已在实施例中展示和说明，在没有背离所述原理下，本发明的实施方式可以有任何变形或修改。