Page style code generation method and device, medium, equipment and program product

Abstract

The embodiment of the invention provides a page style code generation method and device, a medium, equipment and a program product. The method comprises the following steps: updating a current page element code to obtain a target page element code, and determining a style name and a hierarchical relationship of a target page element according to a first abstract syntax tree corresponding to the target page element code; updating a target object based on the style name and the hierarchical relationship of the target page element, wherein the target object is used for storing the style name and the hierarchical relationship of the current page element corresponding to the current page element code; and updating a second abstract syntax tree corresponding to the current page style code according to the updated target object, and generating a target page style code according to the updated second abstract syntax tree. According to the embodiment of the invention, the second abstract syntax tree of the existing page style code is updated based on the style name and the hierarchical relationship in the target object, a complete abstract syntax tree of the page style code does not need to be regenerated, and the generation efficiency of the page style code is improved.

Description

Technical Field

[0001] This disclosure relates to computer technology, and more particularly to a method, apparatus, medium, device, and program product for generating page style code. Background Technology

[0002] As front-end page interactive functions increase, the DOM (Document Object Model) hierarchy becomes deeper and deeper, and style code becomes more and more complex.

[0003] Currently, style code relies on developers writing it by hand. As the DOM element hierarchy increases, the style code hierarchy becomes more and more complex, making hand-writing code inefficient and prone to errors. Summary of the Invention

[0004] This disclosure provides a method, apparatus, medium, device, and program product for generating page style code, which can realize the automatic generation of page style code and improve the efficiency and accuracy of code generation.

[0005] In a first aspect, embodiments of this disclosure provide a method for generating page style code, including:

[0006] Update the current page element code to obtain the target page element code. Based on the first abstract syntax tree corresponding to the target page element code, determine the style name and hierarchical relationship of the target page element. The hierarchical relationship is determined based on the lineage relationship between nodes in the first abstract syntax tree.

[0007] The target object is updated based on the style name and hierarchy of the target page element. The target object is used to store the style name and hierarchy of the current page element corresponding to the current page element code.

[0008] Update the second abstract syntax tree corresponding to the current page style code based on the updated target object, and generate the target page style code based on the updated second abstract syntax tree.

[0009] Secondly, embodiments of this disclosure also provide a page style code generation apparatus, the apparatus comprising:

[0010] The style determination module is used to update the current page element code to obtain the target page element code, and determine the style name and hierarchical relationship of the target page element based on the first abstract syntax tree corresponding to the target page element code. The hierarchical relationship is determined based on the lineage relationship between nodes in the first abstract syntax tree.

[0011] The object update module is used to update the target object based on the style name and hierarchical relationship of the target page element. The target object is used to store the style name and hierarchical relationship of the current page element corresponding to the current page element code.

[0012] The style code generation module is used to update the second abstract syntax tree corresponding to the style code of the current page based on the updated target object, and to generate the style code of the target page based on the updated second abstract syntax tree.

[0013] Thirdly, embodiments of this disclosure also provide an electronic device, the electronic device comprising:

[0014] One or more processors;

[0015] Storage device for storing one or more programs.

[0016] When the one or more programs are executed by the one or more processors, the one or more processors implement the page style code generation method as described in any embodiment of this disclosure.

[0017] Fourthly, embodiments of this disclosure also provide a storage medium containing computer-executable instructions, which, when executed by a computer processor, are used to perform a method for generating page style code as described in any embodiment of this disclosure.

[0018] Fifthly, embodiments of this disclosure also provide a computer program product, including a computer program that, when executed by a processor, implements the method for generating page style code as described in any embodiment of this disclosure.

[0019] This disclosure provides a scheme for generating page style code. During the updating of page element code, the style name and hierarchy of the target page element are determined through a first abstract syntax tree corresponding to the target page element code. Based on the style name and hierarchy of the target page element, the existing style names and hierarchy in the target object are updated, ensuring that the latest style names and hierarchy are always preserved in the target object. Then, the second abstract syntax tree of the existing page style code is updated according to the updated target object. Finally, the updated second abstract syntax tree is compiled to generate the target page style code. This disclosure improves the efficiency of page style code generation by storing the latest style names and hierarchy of page elements in the target object and updating the second abstract syntax tree of the existing page style code based on the style names and hierarchy in the target object, eliminating the need to regenerate the complete abstract syntax tree of the page style code. Since the style names and hierarchy in the target object are determined based on the target page element code, updating the second abstract syntax tree based on the target object improves the accuracy of page style code generation. Attached Figure Description

[0020] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic, and the originals and elements are not necessarily drawn to scale.

[0021] Figure 1 A flowchart illustrating a method for generating page style code according to an embodiment of this disclosure;

[0022] Figure 2 This is a schematic diagram of the style name comparison process in a method for generating page style code provided in an embodiment of this disclosure;

[0023] Figure 3 A flowchart illustrating another method for generating page style code provided in this embodiment of the present disclosure;

[0024] Figure 4 A flowchart illustrating yet another method for generating page style code provided in this disclosure embodiment;

[0025] Figure 5 A schematic diagram of a page style code generation device provided in an embodiment of this disclosure;

[0026] Figure 6 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this disclosure. Detailed Implementation

[0027] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.

[0028] It should be understood that the steps described in the method embodiments of this disclosure may be performed in different orders and / or in parallel. Furthermore, the method embodiments may include additional steps and / or omit the steps shown. The scope of this disclosure is not limited in this respect.

[0029] The term "comprising" and its variations as used herein are open-ended inclusions, meaning "including but not limited to". The term "based on" means "at least partially based on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". Definitions of other terms will be given in the description below.

[0030] It should be noted that the concepts of "first" and "second" mentioned in this disclosure are used only to distinguish different devices, modules or units, and are not used to limit the order of functions performed by these devices, modules or units or their interdependencies.

[0031] It should be noted that the terms "a" and "a plurality of" used in this disclosure are illustrative rather than restrictive, and those skilled in the art should understand that, unless otherwise expressly indicated in the context, they should be understood as "one or more".

[0032] The names of messages or information exchanged between multiple devices in the embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of such messages or information.

[0033] It is understood that the data involved in this technical solution (including but not limited to the data itself, the acquisition or use of the data) shall comply with the requirements of relevant laws, regulations and related provisions.

[0034] Figure 1 This is a flowchart illustrating a method for generating page style code according to an embodiment of the present disclosure. This embodiment is applicable to front-end page design. The method can be executed by a page style code generation device, which can be implemented in the form of software and / or hardware. Optionally, it can be implemented by an electronic device, such as a mobile terminal, a PC, or a server.

[0035] like Figure 1 As shown, the method includes:

[0036] S110. Update the current page element code to obtain the target page element code. Based on the first abstract syntax tree corresponding to the target page element code, determine the style name and hierarchical relationship of the target page element.

[0037] Page elements, which can refer to DOM elements, are the basic units that make up a page document. The relationships between DOM elements form a tree structure. Page element code is used to write page elements. For example, page element code defines the style names and hierarchical relationships of page elements. If the DOM elements include container elements and head elements, and the container element nests the head element, then the class name property of the container element can be defined as "style·container" through page element code, and... and A container element is defined to contain a header element. This disclosure does not specifically limit the content of the page element code. The container element is used to create a container that can include page elements such as headings, paragraphs, and images. The header element can be used as the header section of the page and can contain content such as headings, navigation links, search forms, and icons.

[0038] The current page element code is used to construct the elements of the existing front-end page. The front-end page design is not static; depending on the actual application requirements, at least one operation may be performed, such as adding page elements, deleting page elements, or adjusting the hierarchy of page elements. By performing at least one of these operations, the current page element code is updated to obtain the target page element code.

[0039] Abstract Syntax Trees (ASTs) represent the syntactic structure of a programming language in a tree-like format. The first abstract syntax tree (BST) is an abstract representation of the syntactic structure of the target page element code. The target page element code can be compiled into an abstract syntax tree by a compiler to obtain the first BST. Nodes in the first BST represent the style names of page elements, and the lineage relationships between nodes represent the hierarchical relationships of page elements. Target page elements refer to virtual DOM elements constructed from the target page element code. Style names refer to the class name information of the class name attribute in the target page element code. This class name attribute is equivalent to the `class` attribute of a tag in HTML (Hypertext Markup Language). The hierarchical relationships are determined based on the lineage relationships between nodes in the first BST. Specifically, the style names of page elements at parent nodes in the first BST nest the style names of page elements at child nodes.

[0040] For example, the code of the current page element is updated to obtain the code of the target page element. For any node in the first abstract syntax tree corresponding to the target page element code, if the node type of the node meets the preset filtering conditions, the style name of the target page element represented by the node is determined according to the node content; the hierarchical relationship between the target page elements is determined according to the target page elements represented by the parent node and / or child node corresponding to the node.

[0041] In this embodiment, if a first abstract syntax tree node represents a page element written in the target programming language, then the node type is determined to meet the preset filtering conditions. The target programming language allows HTML structures to be written directly within scripting language code, using HTML-like syntax. For certain special attributes, such as class name attributes, target framework-specific attribute names, such as `className`, are required. Page elements written in the target programming language can nest page elements written in other target programming languages, with the style names of nested page elements enclosed in curly braces `{}`. The target framework is a scripting language framework used to build "predictable" and "declarative" web user interfaces.

[0042] Optionally, the node content of the first abstract syntax tree includes attribute information of page elements in the current page style code. For example, the node content of the first abstract syntax tree can be class name information or other content. If the node content is class name information, then the class name information is used as the style name of the target page element; otherwise, the style name of the target page element is set to the target value. For any node in the first abstract syntax tree, if the node has a parent node, then it is determined that the target page element represented by the current node is nested within the target page element represented by the parent node. If the node has child nodes, then it is determined that the target page element represented by the current node is nested within the target page element represented by the child node. Assuming the style name of the container element is "container" and the style name of the header element is "header", and the container element nests the header element, then there exists a hierarchical relationship of style name container nesting style name header.

[0043] S120. Update the target object based on the style name and hierarchy of the target page element. The target object is used to store the style name and hierarchy of the current page element corresponding to the current page element code.

[0044] The target object stores the tree-like nodes and class name information of page elements. The target object can be a nested object. The target object's attributes include a class name attribute and child node attributes. The class name attribute stores class name information, and the child node attribute stores the nested child nodes of the page element. Optionally, a nested array can be used to store the class name information of the nested child nodes of each node. Assuming the target page element's style name is "container," its nested style name is "header," the head contains nested target page elements with style names "title" and "page action," and the title contains nested target page elements with style names "delivery declaration" and "delivery plan name," then the target object can include a container as its class name attribute, and a first array of child node attributes for the container, where the first array elements include "header," "title," "page action," and "delivery declaration." The head's child node attributes form a second array, where the second array elements include "title" and "page action." The title's child node attributes form a third array, where the third array elements include "delivery declaration" and "target value." Since the delivery plan name is not class name information, the corresponding target page element's style name is the target value.

[0045] For example, the style name of the target page element is compared with the style name of the current page element according to the hierarchical relationship to obtain the new style name. Based on the hierarchical relationship corresponding to the new style name, the style name of the parent node of the new style name in the target object is determined, and the new style name is associated and stored in the style name of the parent node.

[0046] Optionally, the style name to be deleted is obtained by comparing the style name of the target page element with the style name of the current page element according to the hierarchical relationship. Based on the hierarchical relationship corresponding to the deleted style name, the style name of the child node of the deleted style name in the target object is determined, and the deleted style name and the style name corresponding to the child node are deleted from the target object.

[0047] For any style name of a target page element in the first abstract syntax tree, the style name of the current page element at the same level in the target object is obtained according to the hierarchical relationship. The style name of the target page element is compared with the style name of the current page element. If the style names match, the style names corresponding to the child nodes of the target page element are compared with the style names in the array corresponding to the child node attributes of the current page element. Through the above comparison process, style names that exist in the first abstract syntax tree but not in the target object are identified and added as style names. And / or, through the above comparison process, style names that do not exist in the first abstract syntax tree but exist in the target object are identified and deleted as style names. And / or, through the above comparison process, shift style names that change the hierarchical relationship are identified.

[0048] Figure 2This is a schematic diagram illustrating the style name comparison process in a method for generating page style code provided in an embodiment of this disclosure. For example... Figure 2 As shown, the hierarchical relationship of nodes in the first abstract syntax tree 210 corresponds to the hierarchical relationship of style names in the target object. By comparing style names level by level, page operations 230 for adding style names (AA220) and deleting style names can be obtained.

[0049] For a newly added style name, indicating a new page element, the style name of the parent node of the newly added style name in the target object can be determined based on the parent node of the node corresponding to the newly added style name in the first abstract syntax tree. The newly added style name is then associated and stored in the style name of the parent node. Specifically, if the style names in the target object exist as a nested array, the newly added style name is inserted into the array corresponding to the parent node.

[0050] Deleting a style name means deleting a page element. You can delete the child nodes of the node corresponding to the style name according to the first abstract syntax tree, determine the style name of the child node of the deleted style name in the target object, and delete the deleted style name and the style name of the child node from the target object.

[0051] For shift style names, which indicate adjustments to the nesting relationship of page elements, the style name of the parent node of the shift style name in the target object can be determined based on the parent and child nodes of the node corresponding to the shift style name in the first abstract syntax tree. The shift style name and the style names of its child nodes are then inserted into the array corresponding to the parent node.

[0052] S130. Update the second abstract syntax tree corresponding to the current page style code based on the updated target object, and generate the target page style code based on the updated second abstract syntax tree.

[0053] Here, the current page style code represents the page style code for the current page. The current page can be the front-end page before the page element code is updated. Because the page element code is updated, the page style code needs to be updated accordingly to obtain the target page style code. The target page style code refers to the page style code written based on the class name information specified in the page element code.

[0054] In this embodiment of the disclosure, the current page style code is parsed based on a preset syntax structure to obtain the second abstract syntax tree. For example, the current page style code is input into a syntax analyzer, and the syntax structure of the current page style code is parsed by the syntax analyzer to obtain the attribute values ​​of the page style, etc. The attribute values ​​of the page style are converted into nodes, and these nodes are added to the abstract syntax tree to form the second abstract syntax tree. Specifically, nodes of the abstract syntax tree are generated based on the parsed attribute values. If a node has a parent node, the node is attached to the parent node; if a node has no parent node, the node is attached to the root node.

[0055] For example, updating the second abstract syntax tree corresponding to the current page style code based on the updated target object includes:

[0056] Based on the hierarchical relationship in the updated target object, the style names in the updated target object are compared with the style names of the nodes in the second abstract syntax tree to obtain the style name to be added. Based on the hierarchical relationship corresponding to the style name to be added, the parent node of the style name to be added in the second abstract syntax tree is determined, and the node corresponding to the style name to be added is attached to the parent node.

[0057] Optionally, based on the hierarchical relationship in the updated target object, the style name in the updated target object is compared with the style name of the node in the second abstract syntax tree to obtain the style name to be deleted. Based on the hierarchical relationship corresponding to the style name to be deleted, the child node of the style name to be deleted in the second abstract syntax tree is determined, and the node corresponding to the style name to be deleted and its child node are deleted from the second abstract syntax tree.

[0058] Specifically, the hierarchical relationship of style names is determined based on the class name attribute and child node attribute of the target page element stored in the target object. Based on the hierarchical relationship of style names in the target object, the style names in the target object are compared with the style names at the same level in the second abstract syntax tree. Based on the comparison result, at least one of the following is determined in the second abstract syntax tree: the style name to be added, the style name to be deleted, and the style name to be shifted.

[0059] For a style name to be added, the parent node of the style name to be added in the second abstract syntax tree is determined based on the style name of the parent node of the style name to be added in the target object, and the node corresponding to the style name to be added is mounted to the parent node.

[0060] For a style name to be deleted, based on the style name of the child node of the style name to be deleted in the target object, determine the child node of the style name to be deleted in the second abstract syntax tree, and delete the node corresponding to the style name to be deleted and the child node from the second abstract syntax tree.

[0061] For a style name to be shifted, based on the style name of the parent node of the style name to be shifted in the target object, determine the parent node of the style name to be shifted in the second abstract syntax tree. Delete the node corresponding to the style name to be shifted from the second abstract syntax tree, and generate a new node based on the style name to be shifted, which is then attached to the parent node in the second abstract syntax tree. Based on the style names of the child nodes corresponding to the style name to be shifted in the target object, attach the child nodes of the node of the style name to be shifted in the second abstract syntax tree to the node of the style name to be shifted.

[0062] The technical solution of this disclosure, in the process of updating page element code, determines the style name and hierarchical relationship of the target page element through the first abstract syntax tree corresponding to the target page element code. Based on the style name and hierarchical relationship of the target page element, the existing style name and hierarchical relationship in the target object are updated, ensuring that the latest style name and hierarchical relationship are always preserved in the target object. Then, the second abstract syntax tree of the existing page style code is updated according to the updated target object. Finally, the updated second abstract syntax tree is compiled to generate the target page style code. This disclosure, by storing the latest style name and hierarchical relationship of page elements in the target object and updating the second abstract syntax tree of the existing page style code based on the style name and hierarchical relationship in the target object, eliminates the need to regenerate the complete abstract syntax tree of the page style code, thus improving the generation efficiency of page style code. Since the style name and hierarchical relationship in the target object are determined based on the target page element code, updating the second abstract syntax tree based on the target object can improve the accuracy of page style code generation.

[0063] Figure 3 This is a flowchart illustrating another method for generating page style code according to an embodiment of the present disclosure. This embodiment is applicable to situations where there is no current page style code, and generates target page style code based on the style name and hierarchical relationship in the updated target object.

[0064] In some embodiments, since the style names and hierarchical relationships of page element code can be stored in the target object in real time, if the currently designed page element code is changed, the current page style code corresponding to the current page element code may not yet be generated. However, the style names and hierarchical relationships in the target object will be updated, and at this time, the target page style code can be generated based on the updated style names and hierarchical relationships of the target page elements in the target object.

[0065] like Figure 3 As shown, the method includes:

[0066] S310. Update the current page element code to obtain the target page element code. Based on the first abstract syntax tree corresponding to the target page element code, determine the style name and hierarchical relationship of the target page element.

[0067] S320. Update the target object based on the style name and hierarchy of the target page element. The target object is used to store the style name and hierarchy of the current page element corresponding to the current page element code.

[0068] Specifically, the code of the current page element is updated to obtain the code of the target page element. For any node in the first abstract syntax tree corresponding to the target page element code, if the node type meets the preset filtering conditions, the class name information in the node content is used as the style name of the target page element. If the node content does not include class name information, the style name of the target page is set to the target value. Based on the target page elements represented by the parent node and / or child node corresponding to the node, the hierarchical relationship between the target page elements is determined.

[0069] The newly determined style name is compared with the style names at the same level in the target object to determine whether the style name is a newly added or deleted style name. Specifically, the level to which the node belongs is determined based on the parent node and / or child node corresponding to the node. The style name in the target object at that level is obtained and compared with the style name of the node to determine whether the style name is a newly added or deleted style name. If it is a newly added style name, the style name of the parent node of the newly added style name in the target object is determined according to the hierarchical relationship corresponding to the newly added style name, and the newly added style name is used as the attribute value of the child node attribute of the parent node. If it is a deleted style name, the style name of the child node of the deleted style name in the target object is determined according to the hierarchical relationship corresponding to the deleted style name, and the deleted style name and the style name corresponding to its child node are deleted from the target object. This embodiment of the disclosure realizes real-time updating of style names and hierarchical relationships in the target object.

[0070] If the node type of the node does not meet the preset filtering conditions, then it is determined whether the node type of the next node in the first abstract syntax tree meets the preset filtering conditions.

[0071] S330. For any style name in the updated target object, if the style name is class name information, then generate a node of the second abstract syntax tree based on the class name information.

[0072] For example, the root node of the second abstract syntax tree is created based on the Less compiler. The updated target object is traversed to obtain the style name. If the style name is class name information, a node of the second abstract syntax tree is generated based on the class name information. Specifically, if the style name is className information, it is determined that the style name is class name information; if the style name is a target value, it is determined that the style name is not class name information.

[0073] S340. Determine the parent node corresponding to the node in the second abstract syntax tree according to the hierarchical relationship corresponding to the class name information, and mount the node to the corresponding parent node.

[0074] For example, based on the hierarchical relationship corresponding to the class name information in the updated target object, the class name information of the parent node of the class name information is determined. Then, based on the class name information of the parent node, the parent node of the node generated based on the class name information in the second abstract syntax tree is determined. The node generated based on the class name information is then attached to its corresponding parent node. Here, the parent node is a node in the second abstract syntax tree generated based on the corresponding class name information in the target object. If the target object does not have class name information for the parent node of the class name information, then the node corresponding to the class name information is attached to the root node.

[0075] S350. Generate the target page style code based on the second abstract syntax tree.

[0076] For example, a compilation operation is performed based on the root node of the second abstract syntax tree to generate the target page style code corresponding to the second abstract syntax tree. The target page style code is then stored to obtain the page style file. In the page style file, class names are arranged in an indented manner according to hierarchical relationships. Style code can be added within the curly braces {} corresponding to the class names according to the style requirements of page elements, thereby binding the class names in the page style file to the DOM.

[0077] Figure 4 This is a flowchart illustrating yet another method for generating page style code according to an embodiment of this disclosure. Figure 4 As shown, the method includes:

[0078] S401. Write the class name attribute of the DOM through the target code.

[0079] The class name attribute's value includes class name information, among other things. The target code represents code written in the target programming language.

[0080] S402. Define the target object to store DOM class name information and hierarchical relationships.

[0081] The hierarchical relationship is determined based on the lineage relationship between nodes in the first abstract syntax tree.

[0082] S403. Read the first abstract syntax tree based on the target page element code.

[0083] S404, Traverse the first abstract syntax tree.

[0084] S405. Determine whether a node in the first abstract syntax tree meets the preset filtering conditions. If yes, execute S406; otherwise, execute S407.

[0085] S406. Store the class name information of the current node into the target object. If the current node does not contain class name information, store the target value into the target object.

[0086] S407. Determine if the traversal is complete. If yes, execute S408; otherwise, return to execute S404.

[0087] If there are no untraversed nodes in the first abstract syntax tree, then the traversal is considered complete; otherwise, the traversal continues to the next node in the first abstract syntax tree based on the hierarchical relationship.

[0088] S408. Create the root node of the second abstract syntax tree.

[0089] S409, Traverse the target object.

[0090] S410. Determine whether the current style name in the target object is a class name. If yes, execute S411; otherwise, execute S415.

[0091] S411. Create nodes for the second abstract syntax tree based on the current class name information.

[0092] S412. Determine if the currently created node has a parent node. If it does, execute S413; otherwise, execute S414.

[0093] S413. Mount the currently created node to the corresponding parent node in the second abstract syntax tree.

[0094] S414. Mount the currently created node to the root node of the second abstract syntax tree.

[0095] S415. Determine if the traversal is complete. If yes, execute S416; otherwise, return to execute S409.

[0096] S416. Generate target page style code based on the second abstract syntax tree using the Less compiler.

[0097] S417. Save the target page style code as a page style file.

[0098] The technical solution of this disclosure, after writing the page element code, stores the style names and hierarchical relationships of the page elements in a target object, and updates the style names and hierarchical relationships in the target object in real time when the page element code is updated. Without writing the page style code, an abstract syntax tree for the page style code is directly generated from the style names and hierarchical relationships stored in the target object, and the abstract syntax tree is compiled to generate the page style code, thus improving the efficiency of front-end program development.

[0099] Figure 5 This is a schematic diagram of a page style code generation device provided in an embodiment of the present disclosure. The device can be implemented in the form of software and / or hardware, and optionally, it can be implemented by an electronic device, such as a mobile terminal, a PC, or a server.

[0100] like Figure 5 As shown, the device includes: a style determination module 510, an object update module 520, and a style code generation module 530.

[0101] The style determination module 510 is used to update the current page element code to obtain the target page element code, and determine the style name and hierarchical relationship of the target page element according to the first abstract syntax tree corresponding to the target page element code, wherein the hierarchical relationship is determined based on the lineage relationship between nodes in the first abstract syntax tree;

[0102] The object update module 520 is used to update the target object based on the style name and hierarchical relationship of the target page element. The target object is used to store the style name and hierarchical relationship of the current page element corresponding to the current page element code.

[0103] The style code generation module 530 is used to update the second abstract syntax tree corresponding to the current page style code based on the updated target object, and to generate the target page style code based on the updated second abstract syntax tree.

[0104] Optionally, the style determination module 510 is specifically used for:

[0105] For any node in the first abstract syntax tree corresponding to the target page element code, if the node type of the node meets the preset filtering conditions, the style name of the target page element represented by the node is determined according to the node content.

[0106] Based on the target page elements represented by the parent node and / or child node corresponding to the node, determine the hierarchical relationship between the target page elements.

[0107] Further, determining the style name of the target page element represented by the node based on the node content includes:

[0108] If the node content is class name information, then the class name information is used as the style name of the target page element; otherwise, the style name of the target page element is set as the target value.

[0109] Optionally, the object update module 520 is specifically used for:

[0110] The new style name is obtained by comparing the style name of the target page element with the style name of the current page element according to the hierarchical relationship.

[0111] Based on the hierarchical relationship corresponding to the newly added style name, determine the style name of the parent node of the newly added style name in the target object, and store the newly added style name as associated with the style name of the parent node.

[0112] Optionally, the object update module 520 is specifically used for:

[0113] The style name to be deleted is obtained by comparing the style name of the target page element with the style name of the current page element according to the hierarchical relationship.

[0114] Based on the hierarchical relationship corresponding to the deleted style name, determine the style name of the child node of the deleted style name in the target object, and delete the deleted style name and the style name corresponding to the child node from the target object.

[0115] Optionally, the style code generation module 530 is further configured to:

[0116] If the current page style code does not exist, for any style name in the updated target object, if the style name is class name information, then generate a node of the second abstract syntax tree based on the class name information;

[0117] Based on the hierarchical relationship corresponding to the class name information, determine the parent node corresponding to the node in the second abstract syntax tree, and attach the node to the corresponding parent node;

[0118] Generate the target page style code based on the second abstract syntax tree.

[0119] Optionally, the style code generation module 530 is specifically used for:

[0120] Based on the hierarchical relationship in the updated target object, the style name in the updated target object is compared with the style name of the node in the second abstract syntax tree to obtain the style name to be added.

[0121] Based on the hierarchical relationship corresponding to the style name to be added, determine the parent node of the style name to be added in the second abstract syntax tree, and attach the node corresponding to the style name to be added to the parent node.

[0122] Optionally, the style code generation module 530 is specifically used for:

[0123] Based on the hierarchical relationship in the updated target object, the style name in the updated target object is compared with the style name of the node in the second abstract syntax tree to obtain the style name to be deleted.

[0124] Based on the hierarchical relationship corresponding to the style name to be deleted, determine the child node of the style name to be deleted in the second abstract syntax tree, and delete the node corresponding to the style name to be deleted and the child node from the second abstract syntax tree.

[0125] The page style code generation apparatus provided in this disclosure can execute the page style code generation method provided in any embodiment of this disclosure, and has the corresponding functional modules and beneficial effects of the execution method.

[0126] It is worth noting that the various units and modules included in the above-mentioned device are only divided according to functional logic, but are not limited to the above division, as long as the corresponding functions can be realized; in addition, the specific names of each functional unit are only for easy differentiation and are not used to limit the protection scope of the embodiments of this disclosure.

[0127] Figure 6 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this disclosure. Reference is made below. Figure 6 It illustrates an electronic device suitable for implementing embodiments of the present disclosure (e.g., Figure 6 The diagram below shows the structure of the terminal device or server 600. The terminal device in this embodiment may include, but is not limited to, mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), and vehicle terminals (e.g., vehicle navigation terminals), as well as fixed terminals such as digital TVs and desktop computers. Figure 6 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments disclosed herein.

[0128] like Figure 6 As shown, electronic device 600 may include a processing unit (e.g., a central processing unit, a graphics processing unit, etc.) 601, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 602 or a program loaded from storage device 608 into random access memory (RAM) 603. The RAM 603 also stores various programs and data required for the operation of electronic device 600. The processing unit 601, ROM 602, and RAM 603 are interconnected via bus 604. An edit / output (I / O) interface 605 is also connected to bus 604.

[0129] Typically, the following devices can be connected to I / O interface 605: input devices 606 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 607 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 608 including, for example, magnetic tapes, hard disks, etc.; and communication devices 609. Communication device 609 allows electronic device 600 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 6 An electronic device 600 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively.

[0130] In particular, according to embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device 609, or installed from a storage device 608, or installed from a ROM 602. When the computer program is executed by the processing device 601, it performs the functions defined in the methods of embodiments of this disclosure.

[0131] The names of messages or information exchanged between multiple devices in the embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of such messages or information.

[0132] The electronic device provided in this embodiment and the page style code generation method provided in the above embodiments belong to the same inventive concept. Technical details not described in detail in this embodiment can be found in the above embodiments, and this embodiment has the same beneficial effects as the above embodiments.

[0133] This disclosure provides a computer storage medium storing a computer program that, when executed by a processor, implements the page style code generation method provided in the above embodiments.

[0134] It should be noted that the computer-readable medium described in this disclosure can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this disclosure, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in connection with an instruction execution system, apparatus, or device. In this disclosure, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium can be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit 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 using any suitable medium, including but not limited to: wires, optical fibers, RF (radio frequency), etc., or any suitable combination thereof.

[0135] In some implementations, clients and servers can communicate using any currently known or future-developed network protocol such as HTTP (Hypertext Transfer Protocol) and can interconnect with digital data communication (e.g., communication networks) of any form or medium. Examples of communication networks include local area networks (“LANs”), wide area networks (“WANs”), the Internet (e.g., the Internet of Things), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future-developed networks.

[0136] The aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device.

[0137] The aforementioned computer-readable medium carries one or more programs that, when executed by the electronic device, cause the electronic device to:

[0138] Update the current page element code to obtain the target page element code. Based on the first abstract syntax tree corresponding to the target page element code, determine the style name and hierarchical relationship of the target page element. The hierarchical relationship is determined based on the lineage relationship between nodes in the first abstract syntax tree.

[0139] The target object is updated based on the style name and hierarchy of the target page element. The target object is used to store the style name and hierarchy of the current page element corresponding to the current page element code.

[0140] Update the second abstract syntax tree corresponding to the current page style code based on the updated target object, and generate the target page style code based on the updated second abstract syntax tree.

[0141] Computer program code for performing the operations of this disclosure can be written in one or more programming languages ​​or a combination thereof, including but not limited to object-oriented programming languages ​​such as Java, Smalltalk, and C++, as well as conventional procedural programming languages ​​such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0142] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0143] The units described in the embodiments of this disclosure can be implemented in software or hardware. The names of the units are not, in some cases, intended to limit the specific unit.

[0144] The functions described above in this document can be performed, at least in part, by one or more hardware logic components. For example, exemplary types of hardware logic components that can be used, without limitation, include: Field Programmable Gate Arrays (FPGAs), Application-Specific Integrated Circuits (ASICs), Application Standard Products (ASSPs), System-on-Chip (SoCs), Complex Programmable Logic Devices (CPLDs), and so on.

[0145] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0146] The above description is merely a preferred embodiment of this disclosure and an explanation of the technical principles employed. Those skilled in the art should understand that the scope of this disclosure is not limited to technical solutions formed by specific combinations of the above-described technical features, but should also cover other technical solutions formed by arbitrary combinations of the above-described technical features or their equivalents without departing from the above-described concept. For example, technical solutions formed by substituting the above features with (but not limited to) technical features disclosed in this disclosure that have similar functions.

[0147] Furthermore, while the operations are described in a specific order, this should not be construed as requiring these operations to be performed in the specific order shown or in a sequential order. In certain environments, multitasking and parallel processing may be advantageous. Similarly, while several specific implementation details are included in the above discussion, these should not be construed as limiting the scope of this disclosure. Certain features described in the context of individual embodiments may also be implemented in combination in a single embodiment. Conversely, various features described in the context of a single embodiment may also be implemented individually or in any suitable sub-combination in multiple embodiments.

[0148] Although the subject matter has been described using language specific to structural features and / or methodological logic, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or actions described above. Rather, the specific features and actions described above are merely illustrative examples of implementing the claims.

Claims

1. A method for generating page style code, characterized in that, include: Update the current page element code to obtain the target page element code. Based on the first abstract syntax tree corresponding to the target page element code, determine the style name and hierarchical relationship of the target page element. The hierarchical relationship is determined based on the lineage relationship between nodes in the first abstract syntax tree. The target object is updated based on the style name and hierarchy of the target page element. The target object is used to store the style name and hierarchy of the current page element corresponding to the current page element code. Update the second abstract syntax tree corresponding to the current page style code based on the updated target object, and generate the target page style code based on the updated second abstract syntax tree.

2. The method according to claim 1, characterized in that, The step of determining the style name and hierarchy of the target page element based on the first abstract syntax tree corresponding to the target page element code includes: For any node in the first abstract syntax tree corresponding to the target page element code, if the node type of the node meets the preset filtering conditions, the style name of the target page element represented by the node is determined according to the node content. Based on the target page elements represented by the parent node and / or child node corresponding to the node, determine the hierarchical relationship between the target page elements.

3. The method according to claim 2, characterized in that, The step of determining the style name of the target page element represented by the node based on the node content includes: If the node content is class name information, then the class name information is used as the style name of the target page element; otherwise, the style name of the target page element is set as the target value.

4. The method according to claim 1, characterized in that, The update of the target object based on the style name and hierarchy of the target page element, wherein the target object is used to store the style name and hierarchy of the current page element corresponding to the current page element code, includes: The new style name is obtained by comparing the style name of the target page element with the style name of the current page element according to the hierarchical relationship. Based on the hierarchical relationship corresponding to the newly added style name, determine the style name of the parent node of the newly added style name in the target object, and store the newly added style name as associated with the style name of the parent node.

5. The method according to claim 1, characterized in that, The update of the target object based on the style name and hierarchy of the target page element, wherein the target object is used to store the style name and hierarchy of the current page element corresponding to the current page element code, includes: The style name to be deleted is obtained by comparing the style name of the target page element with the style name of the current page element according to the hierarchical relationship. Based on the hierarchical relationship corresponding to the deleted style name, determine the style name of the child node of the deleted style name in the target object, and delete the deleted style name and the style name corresponding to the child node from the target object.

6. The method according to claim 3, characterized in that, Also includes: If the current page style code does not exist, for any style name in the updated target object, if the style name is class name information, then generate a node of the second abstract syntax tree based on the class name information; Based on the hierarchical relationship corresponding to the class name information, determine the parent node corresponding to the node in the second abstract syntax tree, and attach the node to the corresponding parent node; Generate the target page style code based on the second abstract syntax tree.

7. The method according to claim 1, characterized in that, The step of updating the second abstract syntax tree corresponding to the current page style code based on the updated target object includes: Based on the hierarchical relationship in the updated target object, the style name in the updated target object is compared with the style name of the node in the second abstract syntax tree to obtain the style name to be added. Based on the hierarchical relationship corresponding to the style name to be added, determine the parent node of the style name to be added in the second abstract syntax tree, and attach the node corresponding to the style name to be added to the parent node.

8. The method according to claim 1, characterized in that, The step of updating the second abstract syntax tree corresponding to the current page style code based on the updated target object includes: Based on the hierarchical relationship in the updated target object, the style name in the updated target object is compared with the style name of the node in the second abstract syntax tree to obtain the style name to be deleted. Based on the hierarchical relationship corresponding to the style name to be deleted, determine the child node of the style name to be deleted in the second abstract syntax tree, and delete the node corresponding to the style name to be deleted and the child node from the second abstract syntax tree.

9. A device for generating page style code, characterized in that, include: The style determination module is used to update the current page element code to obtain the target page element code, and determine the style name and hierarchical relationship of the target page element based on the first abstract syntax tree corresponding to the target page element code. The hierarchical relationship is determined based on the lineage relationship between nodes in the first abstract syntax tree. The object update module is used to update the target object based on the style name and hierarchical relationship of the target page element. The target object is used to store the style name and hierarchical relationship of the current page element corresponding to the current page element code. The style code generation module is used to update the second abstract syntax tree corresponding to the style code of the current page based on the updated target object, and to generate the style code of the target page based on the updated second abstract syntax tree.

10. An electronic device, characterized in that, The electronic device includes: One or more processors; Storage device for storing one or more programs. When the one or more programs are executed by the one or more processors, the one or more processors implement the page style code generation method as described in any one of claims 1-8.

11. A storage medium containing computer-executable instructions, characterized in that, The computer-executable instructions, when executed by a computer processor, are used to perform the method for generating page style code as described in any one of claims 1-8.

12. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the method for generating page style code as described in any one of claims 1-8.

Images