RN CSS atomization framework and use method thereof

Abstract

The invention belongs to the technical field of mobile application development, and discloses an RN CSS atomization framework and a using method thereof.The RN CSS atomization framework comprises a blacklist configuration module, a style storage module and an attribute analysis module, and the using method of the framework comprises the steps that firstly, a style list list is initialized; step 2, analyzing parameters; step 4, cache object matching; 5, judging an enumerable object; and step 6, generating a style. According to the method, management is carried out in a mode of atomization of the style attributes, so that a worker only needs to pay attention to and use the atomization style provided by the framework during development, complex styles do not need to be repeatedly defined, a large number of redundant style codes are reduced, and compared with a traditional mode, the framework not only enables style writing to be more concise and efficient, but also improves the development efficiency. And the reuse of styles can be realized in the whole project, so that duplicated codes are greatly reduced, and the development efficiency is improved.

Description

Technical Field

[0001] The present invention belongs to the technical field of mobile application development, and specifically relates to an RN CSS atomization framework and a use method thereof. Background Art

[0002] With the continuous evolution of technology, company projects have increasingly stringent technical standards. When using React Native (RN) for development, there is usually a common problem, that is, the incompatibility of style codes may cause application crashes, and such crashes are often difficult to locate quickly, and can only rely on cumbersome code annotation methods for troubleshooting. In addition, for large projects with complex business logic and the participation of multiple engineers at the same time, it becomes particularly difficult to ensure the standardization and unification of style codes, which not only increases the difficulty of code logic modification and maintenance, but may also lead to a decrease in the overall maintainability and stability of the project.

[0003] In the field of computer technology, Tailwind is often used to solve this problem. Tailwind is a CSS framework with a practical tool set for rapid UI development. It provides highly composable application classes to help developers easily build complex user interfaces. It also provides a tool for extracting components from practical patterns, and the responsive style can meet the development needs of different devices.

[0004] However, since Tailwind CSS only supports the writing and development of style attributes on the Web side, but not on the RN side, Tailwind CSS cannot be used directly when developing mobile applications, otherwise it will lead to incompatibility issues. In addition, the style writing methods on the Web side are different from those on the RN side. The styles on the RN side are all written in camel case, while the Web side relies on "-" links, which requires staff to spend a lot of time learning the code. Therefore, a set of CSS atomic frameworks for the RN side is needed to standardize the project style and ensure that the RN side will not crash due to style compatibility. Summary of the invention

[0005] The object of the present invention is to provide an RN CSS atomization framework and a method of using the same to solve the problems raised in the above background technology.

[0006] In order to achieve the above object, the present invention provides the following technical solutions: an RN CSS atomization framework and a method for using the same, wherein the RN CSS atomization framework includes a blacklist configuration module, a style storage module, and an attribute parsing module, and the method for using the framework is:

[0007] Step 1: Initialize the style list list. The user calls the useTailwind method and passes in the style parameters.

[0008] Step 2: Parameter parsing. After receiving the style parameters, the framework parses these parameters through the ClassParser constructor.

[0009] Step 3: Whitelist filtering and illegal filtering. During the parsing process, the style attributes will be filtered;

[0010] Step 4: cache object matching, matching is performed through the style storage module;

[0011] Step 5: Enumerable object judgment: the framework will determine whether the style attribute is an enumerable attribute or a non-enumerable attribute;

[0012] Step 6: Style generation. After the above parsing process, the framework will generate a list containing all style attributes.

[0013] Preferably, the blacklist configuration module is responsible for preventing the RN application from crashing or malfunctioning due to style incompatibility, and its configuration steps are:

[0014] A1, first conduct real device testing on RN applications on different devices, and find that some style attributes are not supported in RN, and some style attributes are different on different platforms;

[0015] A2, configure these unsupported and different style attributes into a blacklist;

[0016] A3, the framework will differentiate the styles according to the platform to avoid the application of these attributes.

[0017] Preferably, the style storage module will store the parsed attribute key value into the style memory when parsing the style attribute for the first time, and when the same attribute is used next time, the framework will directly extract it from the cache without recalculating or parsing.

[0018] Preferably, the attribute parsing module includes a factory constructor and an enumeration style set;

[0019] The factory constructor is used to process non-enumerable properties, and parse, assemble, generate, and return the properties; when faced with enumerable style properties, the enumeration style collection will match, generate, and return them.

[0020] Preferably, during the whitelist filtering and illegal filtering phase, the framework checks whether the style attribute exists in the whitelist;

[0021] When the style attribute is in the whitelist, go to step 4; when the style attribute satisfies one of the two conditions: not in the whitelist or in the blacklist, the style attribute will be filtered, and the framework will generate a log to remind the user.

[0022] Preferably, in the cache object matching stage, the framework checks whether the style attribute has been parsed in the style storage. If the style attribute already exists in the cache, the framework directly extracts the matching style from the cache. If the style attribute fails to match, the process proceeds to step five.

[0023] Preferably, the specific process of the enumerable object judgment phase is:

[0024] B1, the attribute parsing module determines whether the style attribute is an enumerable attribute or a non-enumerable attribute;

[0025] B2, when the style attribute is an enumerable attribute, the framework will directly match the parameters in the enumerated style set, identify and obtain the style attribute, and then proceed to step 6;

[0026] B3, when the style attribute is not enumerable, the framework will extract the identification field and the corresponding value to be calculated through the factory constructor, and obtain the corresponding style attribute key value according to the identification field;

[0027] B4, based on the value corresponding to the attribute key obtained by the calculated numerical value, concatenates it into a new style attribute, adds it to the returned style attribute list list, and proceeds to step 6.

[0028] Preferably, in the style generation phase, the framework adds the identified style attributes and the calculated style attributes to a return list, thereby generating a list list containing all style attributes.

[0029] The beneficial effects of the present invention are as follows:

[0030] 1. The present invention manages style attributes in an atomic way, so that when developing, the staff only needs to focus on and use the atomic styles provided by the framework, without having to repeatedly define complex styles, reducing a large amount of redundant style code. Compared with the traditional method, the framework can not only make style writing more concise and efficient, but also realize the reuse of styles in the entire project, greatly reducing duplicate code and improving development efficiency.

[0031] 2. The present invention performs real-machine testing on the CSS styles used on the Web side, identifies and extracts style attributes that may cause crashes or incompatibility in the RN side, and adds these style attributes to the blacklist, thereby avoiding crashes caused by the use of incompatible styles during project development. By differentiating style attributes on different platforms, it ensures that the same code performs consistently on different devices, avoids problems caused by platform differences, and reduces the workload of staff.

[0032] 3. The present invention caches the parsed styles through the style storage module, avoiding repeated parsing of the same style each time calculation, improving performance, reducing calculation time, and significantly improving development efficiency. Especially in large projects, the caching mechanism can greatly reduce unnecessary calculations, simplify the style writing process, save development time, improve code reuse, shorten the time for staff to learn the code, and reduce the workload. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] Figure 1 This is the CSS atomization framework diagram of the present invention;

[0034] Figure 2 A flow chart is used for the framework of the present invention. DETAILED DESCRIPTION

[0035] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0036] like Figure 1 to Figure 2 As shown, an embodiment of the present invention provides an RN CSS atomization framework and a method for using the same. The RN CSS atomization framework includes a blacklist configuration module, a style storage module, and an attribute parsing module, and the method for using the framework is as follows:

[0037] Step 1: Initialize the style list list. The user calls the useTailwind method and passes in the style parameters.

[0038] Use the useTailwind method to initialize the style list list. At this time, the style list is empty, and the framework will gradually parse and generate styles based on subsequent parameters;

[0039] Step 2: Parameter parsing. After receiving the style parameters, the framework parses these parameters through the ClassParser constructor.

[0040] The ClassParser constructor processes the passed-in style, performs whitelist filtering (checks whether it is a legal RN style) and illegal attribute filtering (checks whether it is in the blacklist);

[0041] Step 3: Whitelist filtering and illegal filtering. During the parsing process, the style attributes will be filtered;

[0042] Step 4: cache object matching, matching is performed through the style storage module;

[0043] Step 5: Enumerable object judgment: the framework will determine whether the style attribute is an enumerable attribute or a non-enumerable attribute;

[0044] Step 6: Style generation. After the above parsing process, the framework will generate a list containing all style attributes.

[0045] By managing style attributes in an atomic way, staff only need to focus on and use the atomic styles provided by the framework during development, without having to repeatedly define complex styles, reducing a large amount of redundant style code. Compared with traditional methods, this framework can not only make style writing more concise and efficient, but also realize style reuse throughout the project, greatly reducing duplicate code and improving development efficiency.

[0046] The blacklist configuration module is responsible for preventing the RN application from crashing or malfunctioning due to style incompatibility, and its configuration steps are as follows:

[0047] A1, first conduct real device testing on RN applications on different devices (iOS and Android), and find that some style attributes are not supported in RN, and some style attributes are different on different platforms;

[0048] Through this mechanism, regardless of whether the developer's understanding and writing of the style is standard, the framework will automatically filter out unsupported styles or styles that may cause problems to ensure the stability of the application.

[0049] A2, configure these unsupported and different style attributes into a blacklist;

[0050] A3, the framework will differentiate the styles according to the platform (iOS / Android) to avoid the application of these attributes.

[0051] By conducting real-machine testing on the CSS styles used on the Web side, we identify and extract style attributes that may cause crashes or incompatibilities in the RN side, and add these style attributes to the blacklist, thereby avoiding crashes caused by the use of incompatible styles during project development. By differentiating style attributes on different platforms, we ensure that the same code performs consistently on different devices, avoiding problems caused by platform differences and reducing the workload of staff.

[0052] The style storage module will store the parsed attribute key value in the style memory when parsing the style attribute for the first time, and the framework will directly extract it from the cache when using the same attribute next time without recalculating or parsing.

[0053] The style storage module can significantly reduce the time of style parsing. When styles are reused, it can greatly improve the development efficiency and application operation efficiency.

[0054] Wherein, the attribute parsing module includes a factory constructor and an enumeration style set;

[0055] The factory constructor is used to process non-enumerable properties (transparency, color, spacing, size), and parse, assemble, generate, and return the properties. When faced with enumerable style properties (Display objects, alignment objects, flex objects, and positioning objects), the enumerated style collection will match, generate, and return them.

[0056] For enumerable style attributes, the framework can directly match them by enumerating the style collection and generate the corresponding style, while non-enumerable attributes are dynamically generated using regular expressions.

[0057] In the whitelist filtering and illegal filtering stage, the framework checks whether the style attribute exists in the whitelist;

[0058] When the style attribute is in the whitelist, go to step 4; when the style attribute satisfies one of the two conditions: not in the whitelist or in the blacklist, the style attribute will be filtered, and the framework will generate a log to remind the user.

[0059] The whitelist refers to those styles that can be used normally in RN. If they are not in the whitelist or in the blacklist, it means that these style attributes are style attributes not supported by RN or platform-specific difference attributes.

[0060] In the cache object matching stage, the framework checks whether the style attribute has been parsed in the style storage. If the style attribute already exists in the cache, the framework directly extracts the matching style from the cache. If the style attribute fails to match, it proceeds to step five.

[0061] This avoids secondary calculations and significantly reduces style parsing time.

[0062] The specific process of the enumerable object judgment phase is as follows:

[0063] B1, the attribute parsing module determines whether the style attribute is an enumerable attribute or a non-enumerable attribute;

[0064] B2, when the style attribute is an enumerable attribute, the framework will directly match the parameters in the enumerated style set, identify and obtain the style attribute, and then proceed to step 6;

[0065] B3, when the style attribute is a non-enumerable attribute, the framework will extract the identification field and the corresponding value to be calculated through the factory constructor (regular expression), and obtain the corresponding style attribute key value based on the identification field;

[0066] B4, based on the value corresponding to the attribute key obtained by the calculated numerical value, concatenates it into a new style attribute, adds it to the returned style attribute list list, and proceeds to step 6.

[0067] In the style generation phase, the framework adds the identified style attributes and the calculated style attributes to the return list, thereby generating a list list containing all style attributes.

[0068] When generating the list, the framework will store the identified style attributes and calculated style attributes into the style storage module for the next search.

[0069] By caching the parsed styles through the style storage module, we can avoid re-parsing the same style every time we calculate, improve performance, reduce calculation time, and significantly improve development efficiency. Especially in large projects, the caching mechanism can greatly reduce unnecessary calculations, simplify the style writing process, save development time, increase code reuse, shorten the time for staff to learn code, and reduce the workload.

[0070] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device.

[0071] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A RN CSS atomization framework and a method for using the same, characterized in that: The RN CSS atomization framework includes a blacklist configuration module, a style storage module, and an attribute parsing module, and the method of using the framework is as follows: Step 1: Initialize the style list list. The user calls the useTailwind method and passes in the style parameters. Step 2: Parameter parsing. After receiving the style parameters, the framework parses these parameters through the ClassParser constructor. Step 3: Whitelist filtering and illegal filtering. During the parsing process, the style attributes will be filtered; Step 4: cache object matching, matching is performed through the style storage module; Step 5: Enumerable object judgment: the framework will determine whether the style attribute is an enumerable attribute or a non-enumerable attribute; Step 6: Style generation. After the above parsing process, the framework will generate a list containing all style attributes.

2. According to claim 1, a RN CSS atomization framework and a method for using the same are characterized in that: The blacklist configuration module is responsible for preventing the RN application from crashing or malfunctioning due to style incompatibility. The configuration steps are as follows: A1, first conduct real device testing on RN applications on different devices, and find that some style attributes are not supported in RN, and some style attributes are different on different platforms; A2, configure these unsupported and different style attributes into a blacklist; A3, the framework will differentiate the styles according to the platform to avoid the application of these attributes.

3. According to claim 1, a RN CSS atomization framework and a method for using the same are characterized in that: The style storage module will store the parsed attribute key value in the style memory when parsing the style attribute for the first time, and the framework will directly extract it from the cache when using the same attribute next time without recalculating or parsing.

4. According to claim 1, a RN CSS atomization framework and a method for using the same are characterized in that: The attribute parsing module includes a factory constructor and an enumeration style set; The factory constructor is used to process non-enumerable properties, and parse, assemble, generate, and return the properties; when faced with enumerable style properties, the enumeration style collection will match, generate, and return them.

5. According to claim 1, a RN CSS atomization framework and a method for using the same are characterized in that: During the whitelist filtering and illegal filtering phase, the framework checks whether the style attribute exists in the whitelist; When the style attribute is in the whitelist, go to step 4; when the style attribute satisfies one of the two conditions: not in the whitelist or in the blacklist, the style attribute will be filtered, and the framework will generate a log to remind the user.

6. According to claim 1, a RN CSS atomization framework and a method of using the same, characterized in that: In the cache object matching phase, the framework checks whether the style attribute has been parsed in the style storage. If the style attribute already exists in the cache, the framework directly extracts the matching style from the cache. If the style attribute fails to match, the framework proceeds to step five.

7. The RN CSS atomization framework and the method for using the same according to claim 6, characterized in that: The specific process of the enumerable object judgment phase is as follows: B1, the attribute parsing module determines whether the style attribute is an enumerable attribute or a non-enumerable attribute; B2, when the style attribute is an enumerable attribute, the framework will directly match the parameters in the enumerated style set, identify and obtain the style attribute, and then proceed to step 6; B3, when the style attribute is not enumerable, the framework will extract the identification field and the corresponding value to be calculated through the factory constructor, and obtain the corresponding style attribute key value according to the identification field; B4, based on the value corresponding to the attribute key obtained by the calculated numerical value, concatenates it into a new style attribute, adds it to the returned style attribute list list, and proceeds to step 6.

8. The RN CSS atomization framework and the method of using the same according to claim 1, characterized in that: In the style generation phase, the framework adds the identified style attributes and the calculated style attributes to the return list, thereby generating a list list containing all style attributes.

Images