CN110377371B - Style sheet system management method based on Web tag - Google Patents
Style sheet system management method based on Web tag Download PDFInfo
- Publication number
- CN110377371B CN110377371B CN201910665252.9A CN201910665252A CN110377371B CN 110377371 B CN110377371 B CN 110377371B CN 201910665252 A CN201910665252 A CN 201910665252A CN 110377371 B CN110377371 B CN 110377371B
- Authority
- CN
- China
- Prior art keywords
- style
- css
- file
- variable
- user
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/448—Execution paradigms, e.g. implementations of programming paradigms
- G06F9/4482—Procedural
Abstract
The invention discloses a style sheet system management method based on a web tag, which comprises the following steps: providing a first script for analyzing a dom structure in a user-defined label and generating a corresponding css file, wherein a css grammar style is written by a user; providing a second script for parsing the css style file written by the user, and executing the following steps: extracting a public variable aiming at the structure style of a self-defined label shadow window; after the public variable is extracted, exposing the variable content serving as an attribute on the self-defined label aiming at the structural style of the self-defined label; and defining a general configuration file, and modifying the variable attribute style exposed by the custom label by changing the general configuration file. The method enables the user to realize the function of dynamically modifying the ShadowDom style under the condition of only changing the configuration file.
Description
Technical Field
The invention relates to the technical field of computer information processing, in particular to a style sheet system management method based on a web tag.
Background
With the development of web development technology and browser technology, developers have more choices. The birth of the Web component technology makes developers no longer limited to the traditional js technology, but can develop the Web component by using a mode closer to a browser, namely a self-defined label. However, while enjoying the convenience brought by the new technology, there are some unsolved problems, among which is the problem of how to modify the style in the custom tab in js project.
The self-defining tag is a free and convenient development mode realized based on the ShadowDom (Chinese translation: shadow dom) of a browser. ShadowDom aims to expose the simplest structure-i.e., custom tags for human use, while encapsulating internal implementation details so that styles and events in the shadowDom can be avoided from affecting the entire dom structure. This plausible implementation actually brings some inconvenience to the developer, especially today when the web development technology is more and more complex, more people are developing the traditional js framework in combination with the custom tag technology. For example, a user main project is a vs framework based on vue, and a secondary project maintains a plurality of custom tags, and the two projects jointly form a complete web project. When a user wants to add a spring festival style in the spring festival, the user has to modify the styles corresponding to the two projects at the same time and re-lay the online.
Disclosure of Invention
The invention aims to provide a style sheet system management method based on a web tag, so that a user can realize the function of dynamically modifying the ShadowDom style under the condition of only changing a configuration file.
In order to achieve the purpose, the invention provides a style sheet system management method based on a web tag, which comprises the following steps: providing a first script for analyzing a dom structure in a user-defined label and generating a corresponding css file, wherein a css grammar style is written in the css file; providing a second script for parsing the css style file written by the user, and executing the following steps: extracting a public variable aiming at the structure style of a self-defined label shadow window; after the public variable is extracted, exposing the variable content serving as an attribute on the self-defined label aiming at the structural style of the self-defined label shadowdom; and defining a general configuration file, and modifying the variable property styles exposed by the custom labels by changing the general configuration file.
Optionally or preferably, in the first script, the dom structure is analyzed by defining an abstract syntax tree css-ast, a corresponding virtual css-tree is generated according to the structure, and the corresponding virtual css-tree is written into a css file corresponding to the dom component.
Optionally or preferably, when the dom structure is analyzed, a style name generation rule is defined to generate a style name corresponding to each dom node, and the style names correspond to the style names in the css file one by one.
Optionally or preferably, before extracting the common variable, the redundant pattern is removed, and the volume of the css file is reduced.
Optionally or preferably, when the redundant pattern is removed, the method includes the following steps: traversing the css file, searching for a class name which is not used in the corresponding dom structure, and deleting the corresponding style; and actively analyzing the hierarchical relation of the dom structure, and extracting the public part of the nested hierarchy.
Alternatively or preferably, the variable content is exposed as an attribute on the custom label in a css custom variable manner.
Alternatively or preferably, the common configuration file definition is under the js project root directory.
Alternatively or preferably, the common configuration file is a plmOverride/plmSyleOverride. Css file.
The technical scheme provided by the invention has the following beneficial effects: providing a first script to analyze a dom structure in a user-defined label and generate a corresponding css file, wherein a css grammar style is written by a user; providing a second script for parsing the css style file written by the user, and executing the following steps: extracting a public variable according to the structure style of a user-defined label shadowdom; after the public variable is extracted, exposing variable content serving as an attribute on a self-defined label aiming at the structural style of the self-defined label shadowdom; and finally, defining a general configuration file, and modifying the variable attribute style exposed by the custom label by changing the general configuration file. Can realize that traditional js frame uses the function of dynamic change label style when self-defining label, can arrange in order css style structure in addition automatically, get rid of the redundancy, promote the page performance of rendering greatly, make things convenient for non-front-end personnel to use, need not to study more style syntaxes (e.g. less, sass), need not to worry redundant content.
Drawings
FIG. 1 is a flow chart of a method for managing a style sheet system based on web tags according to an embodiment of the present invention;
fig. 2 is a diagram of a dom tree structure generated in the method for managing a style sheet system based on a web tag according to an embodiment of the present invention;
fig. 3 is a structural diagram of a parsed syntax tree in the method for managing a style sheet system based on web tags according to an embodiment of the present invention.
Detailed Description
To make the objects, technical solutions and advantages of the present invention more apparent, embodiments of the present invention will be described in detail with reference to the accompanying drawings. It is to be understood that the described embodiments are merely illustrative or exemplary in nature and are in no way intended to limit the invention, its application, or uses. In the following detailed description, numerous specific details are set forth in order to provide a thorough understanding of the invention. It will be apparent, however, to one skilled in the art that the present invention may be practiced without some or all of these specific details. The following description of the embodiments is merely intended to provide a better understanding of the invention by presenting examples of the invention. The present invention is in no way limited to any specific configuration and algorithm set forth below, but rather covers any modifications, substitutions and alterations of the elements, components and algorithms without departing from the spirit of the invention.
The present invention will be described in further detail with reference to specific examples, but the embodiments of the present invention are not limited thereto.
As shown in fig. 1, this embodiment provides a method for managing a style sheet system based on a web tag, and defines a set of style sheet system management schemes based on a web tag through practice, so that a style sheet written by a developer can be automatically parsed and a set of new style sheets can be generated. For the ShadowDom style, public self-defining variables are exposed outwards, and a general configuration file is defined, so that a user can realize the function of dynamically modifying the ShadowDom style under the condition of only changing the configuration file. Therefore, in actual use, a user only needs to change a little in the configuration file, and complete replacement of a certain pattern can be realized. Specifically, the method comprises the following steps:
providing a first script for analyzing a dom structure in a user-defined label and generating a corresponding css file, wherein a css grammar style is written in the css file;
providing a second script for parsing the cs style file written by the user, and performing the following steps:
extracting a public variable according to the structure style of a user-defined label shadowdom;
after the public variable is extracted, exposing variable content serving as an attribute on a self-defined label aiming at the structural style of the self-defined label shadowdom;
defining a common configuration file, and modifying the variable property style exposed by the custom label by changing the common configuration file.
In the first script, the dom structure is analyzed by defining an abstract syntax tree cs-ast, a corresponding virtual cs-tree is generated according to the structure, and the virtual cs-tree is written into a cs file corresponding to the dom component. When the dom structure is analyzed, the style name corresponding to each dom node is generated by defining a style name generation rule and is in one-to-one correspondence with the style names in the css file.
As a preferred implementation, before extracting the common variables, the redundant patterns are removed, and the cs file volume is reduced. Specifically, when removing the redundancy pattern, the method includes the following steps:
firstly, traversing css files, searching for a class name which is not used in a corresponding dom structure, and deleting a corresponding style; then, the level relation of the dom structure is actively analyzed, and the public part of the nested level is extracted.
It should be noted that the Shadowdom is a dom structure of a custom tag rendered in a browser, and when the user uses the dom structure, the user first defines an internal dom style of the custom tag, and then uses window. When a custom tag is generated and loaded into the html document structure, the corresponding drawdown is generated. The structure of Shadowdom is closed and invisible for a browser user, for example, a common H5 tag < video > is a custom tag, and when the user adds the custom tag to an html document, a default video window is automatically generated, and the structure of the window is the Shadowdom of the video tag.
In the scheme, when the corresponding css file is automatically generated according to the dom structure, a developer can freely write the content and the format of the dom component which the developer wants, and then the scheme is used for analyzing the dom structure defined by a user and generating the corresponding css file by providing the first script. This function is mainly accomplished in two steps:
a. and defining an abstract syntax tree (css-ast) to analyze the dom structure, generating a corresponding virtual css-tree according to the structure, and writing the virtual css-tree into a css file corresponding to the dom component. For example:
<div id＝1>
< title id =2> first Page </title >
<div id＝3>
< label > Picture Address: </label >
<a href＝”xxx.png”/>
</div>
< div id =4> test </div >
</div>
The parsed syntax tree is shown in fig. 2.
b. And when the dom structure is analyzed, defining a set of style name generation rules, generating a style name corresponding to each dom node according to the rules, and corresponding to the style names in the css file one by one.
According to the parsed dom syntax tree, a set of style generation rules is defined, and class style names can be automatically and synchronously injected into dom and css files. The format of the class style name generated by the rule is as follows: $ name _ $ parent layer _ $ type _ $ layer _ $ index, wherein:
9633 $ name: project name
\9633, $ parentLayer: parent hierarchy
9633 $ type: type of label
\9633 $ layer: this hierarchy
9633 $ index: in the hierarchy of
The generated dom tree is shown in fig. 3 (the grey part is the class style generated according to the rule).
When the css style file written by the user is analyzed, redundancy is removed, the modifiable ShadowDom style is exposed, and a corresponding optimized structure is generated. Specifically, the method comprises the following steps:
after the ccs file corresponding to the dom structure is generated in the last step, a developer can freely write styles in the css file, and in the packaging and building stage of engineering, the developer needs to execute a second script, wherein the second script comprises the following functions:
firstly, removing redundant patterns and reducing the volume of the cs file
By customizing a set of cs style redundancy removing methods, also called as "plm-style-optimizer" (plm style optimization method), the method is mainly executed in two steps:
1. based on the tree-shaking idea, the cs style contents which are not used are deleted. The content is roughly divided into two layers:
1) Traversing the css file, searching for a class name which is not used in the corresponding dom structure, and deleting the corresponding style.
2) And actively analyzing the hierarchical relation of the dom structure, and extracting the public part of the nested hierarchy. For example:
the structure of the Dom is as follows:
after redundancy removal:
second, extracting common variables, common patterns
After the redundancy processing is finished, aiming at the form of the custom label, public variables and some variable attributes needing to be exposed are extracted in a css custom variable mode, for example:
after the change:
third, expose the variable custom style to the outside
After the redundancy processing and the public variable extraction are completed, aiming at the form of a user-defined label shadow dom, variable contents are exposed on the label as attributes in a cs user-defined variable mode:
when a user wishes to use a custom label (e.g., a project built by vue, using the plm label system) through a traditional js project, the scheme makes a convention to define a plmOverride/plmTtyleOverride. Css file under the project root directory where the user can modify the variable attribute style exposed by the custom label.
In summary, the style sheet system management method based on the web tag provided in this embodiment is to provide the first script to analyze the dom structure in the user-defined tag and generate the corresponding css file, in which the css file is written by a user; providing a second script for parsing the cs style file written by the user, and performing the following steps: extracting a public variable according to the structure style of a user-defined label shadowdom; after the public variable is extracted, exposing variable content serving as an attribute on a self-defined label aiming at the structural style of the self-defined label shadowdom; and finally, defining a general configuration file, and modifying the variable attribute style exposed by the custom label by changing the general configuration file. The function of dynamically changing the tag style when the traditional js frame uses the custom tag can be realized, the cs style structure can be automatically sorted, the redundancy is removed, the page rendering performance is greatly improved, the use by non-front-end personnel is facilitated, more style grammars (such as less and sass) do not need to be researched, and the redundant content does not need to be worried.
Unless defined otherwise, technical or scientific terms used herein shall have the ordinary meaning as understood by one of ordinary skill in the art to which this invention belongs. The use of "first," "second," and similar terms in the description and claims of this patent does not denote any order, quantity, or importance, but rather the terms are used to distinguish one element from another. Also, the use of the terms a, an, etc. do not denote a limitation of quantity, but rather denote the presence of at least one.
The above description is only exemplary embodiments of the present invention and should not be taken as limiting the invention, and any modifications, equivalents, improvements and the like that are within the spirit and principle of the present invention should be included in the scope of the present invention.
Claims (6)
1. A style sheet system management method based on web tags is characterized by comprising the following steps: providing a first script for analyzing a dom structure in a user-defined label and generating a corresponding css file, wherein a css grammar style is written in the css file; providing a second script for parsing the css style file written by the user, and executing the following steps: extracting a public variable aiming at the structure style of a self-defined label shadow window; after the public variable is extracted, exposing variable content serving as an attribute on a self-defined label in a css (science system) self-defined variable mode aiming at the structural style of the self-defined label shadowdom;
defining a general configuration file, defining a plmOverride/plmTtylOverride css file under a project root directory, and modifying the variable attribute style exposed by the custom label by changing the general configuration file.
2. The method as claimed in claim 1, wherein in the first script, parsing the dom structure by defining an abstract syntax tree css-ast, and generating a corresponding virtual css-tree according to the structure, and writing the virtual css-tree into the css file corresponding to the dom component.
3. The method of claim 2, wherein the style name corresponding to each dom node is generated by defining a style name generation rule when parsing the dom structure, and is in one-to-one correspondence with the style names in the css file.
4. The method of claim 1, wherein redundant styles are removed and the cs file volume is reduced before extracting common variables.
5. The method for managing a style sheet system based on a web tag according to claim 4, wherein when removing the redundant style, comprising the steps of: traversing the css file, searching for a class name which is not used in a corresponding dom structure, and deleting a style corresponding to the class name; and actively analyzing the hierarchical relation of the dom structure, and extracting the public part of the nested hierarchy.
6. The web tag-based style sheet system management method of claim 1 wherein the generic configuration file definition is under a js project root directory.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910665252.9A CN110377371B (en) | 2019-07-23 | 2019-07-23 | Style sheet system management method based on Web tag |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910665252.9A CN110377371B (en) | 2019-07-23 | 2019-07-23 | Style sheet system management method based on Web tag |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110377371A CN110377371A (en) | 2019-10-25 |
| CN110377371B true CN110377371B (en) | 2023-03-28 |
Family
ID=68255020
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910665252.9A Active CN110377371B (en) | 2019-07-23 | 2019-07-23 | Style sheet system management method based on Web tag |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110377371B (en) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112115399A (en) * | 2020-09-02 | 2020-12-22 | 北京一亩田新农网络科技有限公司 | Method and device for changing page theme based on cs, electronic equipment and computer readable medium |
| CN112463256A (en) * | 2020-12-11 | 2021-03-09 | 微医云(杭州)控股有限公司 | Method, system, electronic device and storage medium for determining configuration file |
| CN113515505B (en) * | 2021-09-13 | 2021-12-17 | 广州市玄武无线科技股份有限公司 | Data model generation method and device of data warehouse and electronic equipment |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109145235A (en) * | 2017-06-16 | 2019-01-04 | 艺龙网信息技术（北京）有限公司 | Method, apparatus and electronic equipment for analyzing web page |
Family Cites Families (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9170987B2 (en) * | 2006-01-18 | 2015-10-27 | Microsoft Technology Licensing, Llc | Style extensibility applied to a group of shapes by editing text files |
| CN101561748A (en) * | 2009-05-21 | 2009-10-21 | 阿里巴巴集团控股有限公司 | Display method and Display device of the tag detail in IM software |
| TW201248429A (en) * | 2011-05-27 | 2012-12-01 | Asic Pacific Gamer Co | Method for applying custom tags to XML document and the system thereof |
| US9477645B2 (en) * | 2013-03-13 | 2016-10-25 | Sap Se | Systems and methods of active text markup |
| CN103473086A (en) * | 2013-08-29 | 2013-12-25 | 上海斐讯数据通信技术有限公司 | ADSL modem web interface switching method |
| CN106469063A (en) * | 2016-09-02 | 2017-03-01 | 深圳中兴网信科技有限公司 | The management method of template label and management system |
-
2019
- 2019-07-23 CN CN201910665252.9A patent/CN110377371B/en active Active
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109145235A (en) * | 2017-06-16 | 2019-01-04 | 艺龙网信息技术（北京）有限公司 | Method, apparatus and electronic equipment for analyzing web page |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110377371A (en) | 2019-10-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10534830B2 (en) | Dynamically updating a running page | |
| Plessers et al. | Accessibility: a web engineering approach | |
| RU2371758C2 (en) | Programming interface for computer platform | |
| US7797630B2 (en) | Method for storing and retrieving digital ink call logs | |
| CN110377371B (en) | Style sheet system management method based on Web tag | |
| US20120110437A1 (en) | Style and layout caching of web content | |
| US20050091672A1 (en) | Facilitating presentation functionality through a programming interface media namespace | |
| US20120254730A1 (en) | Techniques to create structured document templates using enhanced content controls | |
| US8397157B2 (en) | Context-free grammar | |
| US8645344B2 (en) | Document processing system and method therefor | |
| CN106202066B (en) | The interpretation method and device of website | |
| US20120072831A1 (en) | Method for creating a multi-lingual web page | |
| US9817811B2 (en) | Web server system, dictionary system, dictionary call method, screen control display method, and demonstration application generation method | |
| US9141403B2 (en) | Data-driven schema for describing and executing management tasks in a graphical user interface | |
| KR20080033403A (en) | Web page rendering priority mechanism | |
| US20140013211A1 (en) | Content providing apparatus compatible with various terminal devices | |
| CN110825382A (en) | Front-end big data tree structure display method | |
| CN113126990A (en) | Page development method, device, equipment and storage medium | |
| CN115202626A (en) | Low-code front-end development method supporting multi-technology stack components | |
| JPWO2006051954A1 (en) | Document processing apparatus and document processing method | |
| US20080263333A1 (en) | Document processing method | |
| CN102193789B (en) | Method and equipment for realizing configurable skip link | |
| US20110078552A1 (en) | Transclusion Process | |
| CN106991144B (en) | Method and system for customizing data crawling workflow | |
| JPWO2006051956A1 (en) | Server apparatus and search method |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |