A styled inheritance method and system based on chain access

Abstract

The application discloses a styled inheritance method and system based on chain access, and the method comprises the following steps: obtaining a style object, encapsulating the style object by using a styled-component to build a corresponding style component; establishing a corresponding agent for each style component, accessing the style object in the style component through the agent; returning a first style object agent of the corresponding style component, further accessing the object attribute in the returned first style object agent, and generating a second style object agent to build chain access; and replacing the object in the first style object agent or the second style object agent with a target style object, which is used for inheriting the target style object. The method and system encapsulate the style attribute by using the styled-component, and connect different style attributes by using an access operator, so that the inheritance of the style attribute is facilitated.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer, in particular to a styled inheritance method and system based on chain access. BACKGROUND

[0002] In previous front-end development, there is a principle called "separation of concerns", various technologies are only responsible for their own fields, that is, HTML, CSS, JavaScript are responsible for their own different fields. For CSS, simply speaking, it is to avoid writing "inline style" and "inline script". After the emergence of React, this principle is no longer applicable, because React is a component structure, which requires HTML, CSS and JavaScript to be written together. Although this violates the "separation of concerns", it is beneficial to the isolation of components. With the popularity of React, this "mixing of concerns" method has gradually become mainstream. The above prior art cannot inherit styles, especially in chain access, which requires nested writing to mix concerns, so that the readability of the code is poor and is not conducive to code encapsulation and inheritance. SUMMARY

[0003] One of the purposes of the present application is to provide a styled inheritance method and system based on chain access, which encapsulates style properties by styled-components and connects different style properties by access operators, thereby facilitating the inheritance of style properties.

[0004] Another purpose of the present application is to provide a styled inheritance method and system based on chain access, which builds chain access by proxy and changes the return value of the proxy object. After the change, the inheritance of object properties in multiple levels of styled can be realized.

[0005] Another purpose of the present application is to provide a styled inheritance method and system based on chain access, which can encapsulate multiple style objects in a styled file and realize the inheritance of multiple style objects by using a proxy mechanism.

[0006] In order to achieve at least one of the above purposes, the present application further provides a styled inheritance method based on chain access, which comprises:

[0007] Obtaining a style object, encapsulating the style object by using styled-components to build a corresponding style component;

[0008] Establishing a corresponding proxy for each style component, and accessing the style object in the style component through the proxy;

[0009] Returning to the first style object of the corresponding style component, and constructing the first style object proxy, further accessing the object attribute in the returned first style object proxy, and generating a second style object proxy, constructing a chain access;

[0010] Replacing the object in the first style object proxy or the second style object proxy with a style component of a target style object, for inheriting the target style object.

[0011] According to one of the preferred embodiments of the present application, the style attribute for the style component construction method includes: establishing a connection with the attribute access symbol and each style object, and encapsulating the corresponding style object in the styled file.

[0012] According to another preferred embodiment of the present application, the style component is composed of an editable div component of styled, wherein the style component constructed by the editable div component contains a style object.

[0013] According to another preferred embodiment of the present application, the style object includes at least one of Ellipsis, FlexCenter, and 100px width.

[0014] According to another preferred embodiment of the present application, the style component constructed by the editable div component includes a plurality of style objects.

[0015] According to another preferred embodiment of the present application, after obtaining the style object in the style component, a class of the style object is established, and a registration interface is provided for registering the style object.

[0016] According to another preferred embodiment of the present application, after the encapsulation of the style attribute is completed to obtain the style component, a proxy of the encapsulated style component is further created, a style object is returned, and a div component of styled is called as a proxy target at the same time.

[0017] According to another preferred embodiment of the present application, after a style object is returned, the style object is further replaced by a target style object styled(target) to realize the inheritance of the target style.

[0018] In order to achieve at least one of the above-mentioned purposes, the present application further provides a styled inheritance system based on chain access, which executes the above-mentioned styled inheritance method based on chain access.

[0019] The application provides a computer readable storage medium, which stores a computer program, and the computer program can execute the styled inheritance method based on chain access by a processor. BRIEF DESCRIPTION OF DRAWINGS

[0020] Figure 1 A flowchart of the styled inheritance method based on chain access is shown.

[0021] Figure 2 A function access table of different agent targets is shown. DETAILED DESCRIPTION

[0022] The following description is provided to enable those skilled in the art to carry out the application. The preferred embodiments in the following description are only examples and other obvious modifications can be made by those skilled in the art. The basic principles defined in the following description can be applied to other embodiments, modifications, improvements, equivalents and other technical solutions without departing from the spirit and scope of the application.

[0023] It can be understood that the term "one" should be understood as "at least one" or "one or more", that is, in one embodiment, the number of one element can be one, and in another embodiment, the number of the element can be multiple, and the term "one" cannot be understood as a limitation on the number.

[0024] Combination Figure 1The application discloses a styled inheritance method and system based on chain access, and mainly comprises the following steps: firstly, style objects are encapsulated, and the style objects are encapsulated into corresponding styled files. In the application, an attribute access symbol "." is used to connect each style object, so that a connection relationship with each style object is established. The style objects are encapsulated by using styled-components, a style component is generated, and the encapsulated style objects are used as style components and are re-named. For example, the encapsulation method comprises the following steps: assuming that original style object code is styled.div.Ellipsis.FlexCenter({width:100}), the original style code is re-encapsulated, and the original style object is re-encapsulated to obtain: const Div=styled’.div.Ellipsis.FlexCenter();const A=styled’.a.Red(); wherein the re-encapsulated style object comprises a div component of "Ellipsis", "FlexCenter" and "width 100px". The encapsulated style component is styled', and the unencapsulated style component is styled. It should be noted that the style object is only an example, and the application is not limited in this regard.

[0025] It is worth mentioning that please refer to Figure 2 The application further constructs chain access and realizes style inheritance based on the chain access. The application uses a proxy to realize the chain access, and the method comprises the following steps: the properties of the encapsulated styled' style component are accessed to another styled style component. The styled style component proxy is marked as styledProxy. It should be noted that the styledProxy is a proxy of styled.div, and when the properties of the styled.div are accessed, a style object proxy can be returned through the styledProxy. The object returned by the encapsulated style component proxy is marked as the first style object definitionProxy( Figure Two The name of the styledProxy in the return value), in the access process, the encapsulated styled' style component is directly called, the actual function is styled.div() function, and the styled'.div() function is also used to obtain the actual encapsulated styled' style component.

[0026] Please continue to refer to Figure 2, the first style object returned by the styledProxy is replaced by a target object proxy styled(target), and in Figure 2 styled.div.Ellipsis, that is, the replaced target object proxy is styled((styled.div.Ellipsis)), and the above-mentioned replaced target object proxy can be directly called to obtain a styled.div() function. Because the styled.div() function can directly obtain an object in a styled' object component, the function actually called by the styled.div() function is styled'.div.Ellipsis(). Further, a second style object definitionProxy Figure Two is returned (a return value of a definitionProxy proxy name in the definitionProxy). Thus, by using the proxy mechanism, chain access and inheritance of the above-mentioned style object can be realized.

[0027] The present application needs to maintain a style object, and a maintenance method of the style object includes defining a class, the class is marked as StyledChain, and a style registration interface is provided for registering a style object. The style registration interface is a javascript function, and by calling the function, a structure of the style object and an expected null value of a field can be registered.

[0028] In particular, the processes described above with reference to the flowcharts can be implemented as a computer software program according to embodiments disclosed herein. For example, embodiments of the disclosure include a computer program product comprising a computer program carried on a computer readable medium, the computer program comprising program code for performing the methods illustrated by the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication section, and / or installed from a detachable medium. When the computer program is executed by a central processing unit (CPU), the above-described functions defined in the methods of the present application are performed. It should be noted that the computer readable medium described above in the present application can be a computer readable signal medium or a computer readable storage medium or any combination of the two. The computer readable storage medium may, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or apparatus, or any combination of the above. More specific examples of the computer readable storage medium can include, but are not limited to, an electrical connection having one or more wires, a portable computer diskette, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present application, the computer readable storage medium can be any tangible medium that contains or stores a program that can be used by or in connection with an instruction execution system, apparatus or device. In the present application, the computer readable signal medium can include a data signal carried in a baseband or as a part of a carrier wave, in which a computer readable program code is carried. Such a propagated data signal can take many forms, including but not limited to, an electromagnetic signal, an optical signal or any suitable combination of the above. The computer readable signal medium can also be any computer readable medium that can send, propagate or transfer a program for use by or in connection with an instruction execution system, apparatus or device. The program code contained on the computer readable medium can be transmitted by any suitable medium, including but not limited to, wireless, wire, optical cable, RF or the like, or any suitable combination of the above.

[0029] The computer program product of the present application can be a computer program product comprising a computer-readable medium bearing computer program code embodied therein for use with a computer. The computer program code can be code defining and / or implementing the present application. The computer program code can be organized into one or more computer program components, including but not limited to, program components for implementing the features of the present application. The one or more computer program components can each include the code implementing the features of the present application. The one or more computer program components can each be embodied on the computer-readable medium. The computer-readable medium can be a tangible computer-readable medium. In operation, the computer program code is provided on the computer-readable medium to a general purpose computer, special purpose computer, or other programmable data processing apparatus to produce a machine, such that the code can be executed to implement the present application.

[0030] Those skilled in the art will understand that the application described above and illustrated in the accompanying drawings is presented by way of example only and is not limiting as to the present application. The intent is to convey the principles of the application and the practical application and to afford others skilled in the art the best insight into its construction and operation. The application herein exhibited in and by the described embodiments is intended to cover any and all modifications of the application within the scope of the claims, along with their equivalents.

Claims

1. A styled inheritance method based on chain-of-access, characterized in that, The method comprises: Obtaining a style object, and constructing a corresponding style component by encapsulating the style object with styled-components; Establishing a corresponding proxy for each style component, and accessing style attributes in the style component through the proxy; Returning a first style object of the corresponding style component, and constructing a first style object proxy, further accessing object attributes in the returned first style object proxy, and generating a second style object proxy to construct a chained access; Replacing an object in the first style object proxy or the second style object proxy with a target object for inheriting a target style object; The style component construction method corresponding to the style object comprises: establishing a connection by using an attribute access symbol and each style object, and encapsulating the corresponding style object in a styled file; After completing the encapsulation of the style attribute, further creating a proxy for the encapsulated style component, returning a style object, and simultaneously calling a styled div component as a proxy target; After returning a style object, further replacing the style object with a target style object styled to realize inheritance of a target style.

2. The styled inheritance method based on chain access according to claim 1, characterized in that, The style component is composed of an editable div component of styled, wherein the style component constructed by the editable div component comprises a style object.

3. The styled inheritance method based on chain access according to claim 1, characterized in that, The style object comprises at least one of automatic omission, horizontal and vertical centering, and a width of 100px.

4. The styled inheritance method based on chain access according to claim 2, characterized in that, The style component constructed by the editable div component comprises a plurality of style objects.

5. The method of claim 1, wherein, After obtaining the style object in the style component, a class of the style object is established, and a registration interface is provided for registering the style object.

6. A styled inheritance system based on chain-of-access, characterized in that, The system executes the styled inheritance method based on chained access according to any one of claims 1-5.

7. A computer-readable storage medium, characterized in that, The computer readable storage medium stores a computer program, and the computer program can be executed by the processor to implement the styled inheritance method based on chained access according to any one of claims 1-5. The computer readable storage medium stores a computer program, and the computer program can be executed by the processor to implement the styled inheritance method based on chained access according to any one of claims 1-5.

Images