Instruction optimization method and device based on abstract syntax tree, equipment and medium

By generating an abstract syntax tree and automatically completing the v-for directive parameters in the Vue template, the complexity problem of optimizing the v-for directive in the Vue template is solved, efficient and accurate list rendering directive optimization is achieved, and code quality and development efficiency are improved.

CN120596095APending Publication Date: 2025-09-05CHINA PING AN LIFE INSURANCE CO LTD
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202510581726.7
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2025-05-06
Publication Date
2025-09-05

AI Technical Summary

Technical Problem

Existing optimization methods for the v-for directive in Vue templates rely on regular expressions, which have difficulty handling multi-layer deconstruction, nested data structures, or complex v-for usage patterns. This can lead to parsing errors and missing key parameters, increasing development difficulty and the probability of errors. This is especially impactful on code consistency and maintenance in large-scale projects such as finance and healthcare.

Method used

By parsing the Vue template to generate an abstract syntax tree, it traverses and identifies the statement parameters and syntax structure of the list rendering instruction, performs missing detection based on the syntax structure and automatically completes the missing parameters, uses the deep parsing capability of AST to handle complex structures, and adapts to various v-for statements.

Benefits of technology

It improves the accuracy and efficiency of code development, reduces the error rate, ensures the consistency and maintainability of code style, avoids runtime errors caused by missing parameters, and improves the quality and stability of Vue templates.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN120596095A_ABST
    Figure CN120596095A_ABST
Patent Text Reader

Abstract

The invention relates to the technical field of computers, and discloses an instruction optimization method and device based on an abstract syntax tree, equipment and a medium, according to the method, the abstract syntax tree is generated by analyzing a Vue template source code, code logic can be more accurately understood, and a list rendering instruction can be more accurately positioned. The abstract syntax tree is traversed to identify the statement parameters and the syntax structure of the list rendering instruction, deletion detection is performed based on the syntax structure, different deconstruction rules can be dynamically adapted, whether the instruction parameters are deleted or not can be accurately judged, and the code development accuracy and development efficiency are improved. When parameter missing is detected, missing parameters are complemented according to the grammar structure, optimization of a list rendering instruction is realized, development workload is reduced, consistency of code styles is guaranteed, maintainability of a front-end transaction system of a financial institution or an information management system of a medical institution is improved, system operation errors caused by parameter missing are avoided, and the system performance is improved. And the code quality and the development efficiency are obviously improved.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to an instruction optimization method, device, equipment and medium based on an abstract syntax tree. Background Art

[0002] Currently, optimizations for the v-for directive in Vue templates often rely on regular expressions to handle the recognition and modification of loop syntax. While these regular expression methods work well for simple structures, they struggle when it comes to multi-layer destructuring, nested data structures, or complex v-for usage patterns. Regular expression parsing can be prone to parsing errors or missing key parameters, especially when automatically recognizing and completing the index parameter.

[0003] For example, the v-for="itemin list" syntax in Vue templates can meet basic looping needs. However, if developers want to destructure objects within v-for (e.g., v-for="{a,b}in items") or nest destructuring (e.g., v-for="{a,{b}}in items"), traditional regular expressions have difficulty recognizing these structures and automatically completing the index parameter. This forces developers to manually add the parameters, increasing the risk of errors and the development burden. This problem is particularly prominent in large-scale projects in fields such as finance and healthcare, potentially leading to inconsistent coding styles and maintenance difficulties.

[0004] In addition, regular expressions are difficult to cope with the flexible changes of v-for statements, cannot dynamically adapt to different deconstruction modes or syntax updates, and lack the high performance and high precision brought by AST parsing, resulting in inefficient instruction code development. Summary of the Invention

[0005] The present invention provides an instruction optimization method, device, computer equipment and medium based on an abstract syntax tree to solve the technical problem of low efficiency in instruction code development.

[0006] In a first aspect, an instruction optimization method based on an abstract syntax tree is provided, comprising:

[0007] Parse the source code in the Vue template to obtain the abstract syntax tree of the source code;

[0008] Traversing the abstract syntax tree to identify statement parameters and grammatical structures of the list rendering instructions in the Vue template;

[0009] Based on the grammatical structure, performing a missing detection on the statement parameters of the list rendering instruction to obtain a missing detection result;

[0010] When the missing detection result indicates that there are missing parameters in the instruction parameters of the list rendering instruction, the missing parameters of the instruction parameters of the list rendering instruction are completed based on the syntax structure to achieve instruction optimization of the list rendering instruction.

[0011] In a second aspect, an instruction optimization device based on an abstract syntax tree is provided, comprising:

[0012] The code parsing module is used to parse the source code in the Vue template and obtain the abstract syntax tree of the source code;

[0013] An instruction recognition module is used to traverse the abstract syntax tree and identify the statement parameters and grammatical structure of the list rendering instruction in the Vue template;

[0014] A missing detection module is used to perform missing detection on the statement parameters of the list rendering instruction based on the grammatical structure to obtain a missing detection result;

[0015] A missing completion module is used to complete the missing parameters of the list rendering instruction based on the syntax structure when the missing detection result shows that there are missing parameters in the instruction parameters of the list rendering instruction, so as to achieve instruction optimization of the list rendering instruction.

[0016] In a third aspect, a computer device is provided, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the above-mentioned instruction optimization method based on the abstract syntax tree when executing the computer program.

[0017] In a fourth aspect, a computer-readable storage medium is provided, which stores a computer program. When the computer program is executed by a processor, the steps of the above-mentioned instruction optimization method based on the abstract syntax tree are implemented.

[0018] In the solution implemented by the above-mentioned instruction optimization method, device, computer equipment and storage medium based on the abstract syntax tree, by parsing the Vue template source code to generate an abstract syntax tree, it is possible to more accurately understand the code logic and locate the list rendering instruction. The abstract syntax tree is traversed to identify the statement parameters and grammatical structure of the list rendering instruction, and missing detection is performed based on the grammatical structure. Different deconstruction rules can be dynamically adapted to accurately determine whether the instruction parameters are missing, avoiding subjective errors in manual inspection, and improving the accuracy and development efficiency of code development. When the missing parameters are detected, the missing parameters are completed according to the grammatical structure to optimize the list rendering instruction, reducing the developer's development workload, reducing the error rate, ensuring the consistency of the code style, improving maintainability, avoiding runtime errors caused by missing parameters, and significantly improving code quality and development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments of the present invention. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0020] Figure 1 A schematic flow chart of a first embodiment of an instruction optimization method based on an abstract syntax tree according to an embodiment of the present invention;

[0021] Figure 2 1 is a schematic structural diagram of an instruction optimization device based on an abstract syntax tree according to an embodiment of the present invention;

[0022] Figure 3 is a structural diagram of a computer device in one embodiment of the present invention;

[0023] Figure 4 FIG. 2 is another structural diagram of a computer device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0024] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of them. All other embodiments obtained by ordinary technicians in this field based on the embodiments of the present invention without making any creative efforts shall fall within the scope of protection of the present invention.

[0025] The present invention is described in detail below through specific examples.

[0026] See also Figure 1 As shown, Figure 1 The flowchart of the first embodiment of the instruction optimization method based on the abstract syntax tree provided in the embodiment of the present invention includes the following steps:

[0027] S101: Parse the source code in the Vue template to obtain the abstract syntax tree of the source code;

[0028] In one embodiment, a parsing tool or library related to the art may be used to parse the source code in the Vue template to obtain an abstract syntax tree (AST) of the source code.

[0029] Specifically, the Vue template source code is input into the parser, which scans the source code and identifies various elements in the template, such as element tags, instructions (such as v-for list rendering instructions), bound attributes, text content, etc. The parser then constructs an abstract syntax tree based on these identified elements.

[0030] The abstract syntax tree contains multiple nodes, each representing a different component of the source code. For example, a node can represent an element tag, while its child nodes represent the element tag's attributes, subelements, or instructions.

[0031] S102: traverse the abstract syntax tree to identify statement parameters and grammatical structures of the list rendering instructions in the Vue template;

[0032] In one embodiment, the list rendering instruction may be a v-for instruction in a Vue template.

[0033] In Vue.js, v-for is a directive used to render data from a list or array in a template. It dynamically generates multiple DOM elements or components based on the values ​​of an array or object. v-for is the core of list rendering in Vue.

[0034] Financial institutions (such as banks and securities firms) use Vue templates in their front-end trading systems to display large lists of transaction records. This solution accurately parses and optimizes the v-for directive (list rendering directive) used to display transaction records. Whether it's a simple list of transaction amounts and times, or complex, nested transaction details (such as those containing multiple financial product structures), it accurately identifies missing parameters and completes them, effectively displaying accurate transaction data. This facilitates data mining and risk assessment for financial analysts, improves trading system stability and data accuracy, and is crucial for monitoring market trends and preventing trading risks.

[0035] In the hospital's information system, the medical record management system uses Vue templates to display patient medical records. Medical record data structures are complex, containing nested data such as basic patient information, multiple medical records, and various test results. This solution ensures that when displaying medical records, whether it is a simple list of medical records or the complex structure of detailed medical records, they can be accurately presented through optimized v-for instructions. Medical staff can quickly obtain complete patient medical history information, which is crucial for precision medical decision-making, disease diagnosis, and treatment plan development, helping to improve the quality of medical services and ensure patient safety.

[0036] In one embodiment, the entire source code of the Vue template can be parsed to obtain the abstract syntax tree corresponding to the source code, and then the node corresponding to the list rendering instruction can be identified based on the abstract syntax tree corresponding to the source code. Alternatively, only the list rendering instruction in the Vue template can be parsed to obtain the abstract syntax tree corresponding to the list rendering instruction, and then the abstract syntax tree can be processed.

[0037] Generally, Vue's v-for directive allows the use of various complex destructuring assignment syntaxes, such as object destructuring, array destructuring, and nested destructuring. Therefore, parsing tools need to be able to recognize these different destructuring forms and accurately extract loop variables and potential index positions.

[0038] In Vue templates, the v-for directive may appear within multiple levels of nested structures, such as within child components, dynamic components, or conditionally rendered templates. The parsing algorithm needs to be able to recursively traverse these nested structures to find all instances of the v-for directive. Furthermore, for dynamically bound v-for expressions, such as those using computed properties or dynamically imported data sources, the parsing algorithm needs to integrate with Vue's responsiveness system to ensure accurate identification of circularly dependent data structures.

[0039] For example, @babel / parser is used to parse the v-for directive in a Vue template into an AST. During this process, it is necessary to identify various structures of list rendering directives, including simple v-for="iteminitems", complex nested structures (such as v-for="{a,{b}}in items"), and complex destructuring (such as v-for="{a,b,c}"). AST parsing can accurately identify each attribute within the loop body, thereby adapting to the diverse v-for structures. @babel / parser can convert these instruction structures into a tree structure that can be analyzed by the program. Each node represents a different element in the code, facilitating subsequent analysis operations.

[0040] This embodiment leverages the deep parsing capabilities of AST to significantly improve the accuracy of processing complex structures such as multi-layer nesting and object deconstruction compared to traditional regular expression methods, avoiding errors caused by regular expression mismatches and ensuring code stability and parsing accuracy. This embodiment can be applied to various complex dynamic deconstructions and nested structures in Vue templates, ensuring that v-for statements can still be correctly parsed and automatically completed under deconstruction and data structure adjustments, without affecting the normal use of other functions.

[0041] After obtaining the abstract syntax tree, the abstract syntax tree is traversed to identify statement parameters and syntax structures of list rendering instructions (such as v-for instructions) in the Vue template.

[0042] Furthermore, based on the tree search method, each node in the abstract syntax tree is traversed to determine the node attributes of each node; when it is detected that the node attribute is the list rendering instruction, the statement parameters and grammatical structure of the list rendering instruction are determined based on the node data of the node corresponding to the list rendering instruction.

[0043] Exemplarily, the tree search method may include a depth-first search or a breadth-first search.

[0044] Specifically, starting from the root node, we gradually visit each node in the abstract syntax tree. For each node, we check its node attributes to determine whether it represents a list rendering instruction. If a node's node attributes are detected to represent a list rendering instruction, we further analyze the node data of its child nodes.

[0045] Among them, the node data of the child node contains the statement parameters of the list rendering instruction. For example, in the v-for instruction, the parameters include the array expression to be traversed, the alias (used to represent the currently traversed element), the index variable (optional), etc.

[0046] When a list rendering instruction is detected, the grammatical structure of the list rendering instruction also needs to be analyzed, such as the element tag in which it is located, the position of the instruction in the tag, and whether the grammatical format of the instruction complies with the specification (such as whether there is a correct colon separator, etc.).

[0047] In one embodiment, in an actual Vue template, the abstract syntax tree (AST) may contain multiple nodes corresponding to list rendering instructions (v-for). The v-for instructions represented by these nodes may appear in different template locations, and the node data corresponding to each of them may be the same or different. In other words, the statement parameters (such as loop variable name, whether index is included, etc.) and grammatical structure (such as whether deconstruction assignment, nested structure, etc.) extracted by each v-for instruction node may differ.

[0048] At this point, in order to achieve code completion and optimization, you can compare the node data of each node to find the most complete statement parameters and grammatical structure of the list rendering instruction, that is, the form with the most complete parameters (such as loop variables and index variables at the same time) and the clearest grammatical structure.

[0049] Furthermore, based on the node data of the current node, the first statement parameter of the list rendering instruction is determined; based on the node data of other nodes except the current node, the second statement parameter of the list rendering instruction is obtained; the first statement parameter and the second statement parameter are compared to obtain a statement parameter comparison result; when the statement parameter comparison result is that there is no difference in the structure of the first statement parameter and the second statement parameter, the first statement parameter is determined to be the statement parameter of the list rendering instruction; based on the first statement parameter, the grammatical structure of the list rendering instruction is determined.

[0050] In one embodiment, the first node representing a list rendering instruction traversed in the abstract syntax tree can be used as the current node, or any node representing a list rendering instruction in the abstract syntax tree can be used as the current node, and other nodes representing list rendering instructions in the abstract syntax tree can be used as other nodes.

[0051] Specifically, by parsing the child nodes corresponding to the current node, the structure and content of the parameter part are extracted, including loop variables, index variables, and possible deconstruction assignment information.

[0052] The node data of other nodes may represent different instances in the same project or v-for instructions in other related templates. These node data are traversed, summarized and the set of second statement parameters is obtained.

[0053] Compare the first statement parameters with the second statement parameters, and analyze the structure of the first statement parameters and the second statement parameters, including checking the parameter type (such as whether there is deconstruction, nested deconstruction, etc.), the number of parameters (whether there are index parameters), and the parameter naming method.

[0054] If the parameter structures of the first and second statement parameters are identical, meaning the parameter structures of other nodes are consistent with the current node, then it can be determined that the first statement parameter of the current node meets the general specifications or patterns within the project. Based on the first statement parameter, the syntax structure of the list rendering instruction is further determined, including confirming the order of the parameters and whether they comply with Vue's syntax rules.

[0055] In one embodiment, when the statement parameter comparison result shows that there is a structural difference between the first statement parameter and the second statement parameter, based on the statement parameter comparison result, the difference parameter is completed into the first statement parameter to obtain the completed first statement parameter; the completed first statement parameter is determined as the statement parameter of the list rendering instruction; and based on the completed first statement parameter, the grammatical structure of the list rendering instruction is determined.

[0056] In one embodiment, if the sentence parameter comparison result shows that there are structural differences between the first sentence parameter and the second sentence parameter, the difference parameters need to be completed based on the comparison result.

[0057] Specifically, the second statement parameter is analyzed to determine which parameters or structures are missing from the first statement parameter of the current node. For example, other nodes may contain index parameters that the current node does not, or there may be differences in the depth or breadth of deconstruction assignments. Based on these differences, the missing parameters are added to the first statement parameter to form the completed first statement parameter.

[0058] If the first statement parameter already contains all the parameters or structures in the second statement parameter, that is, there are missing parameters in the second statement parameter, it can be determined that the first statement parameter is more complete and there is no need to modify or complete the first statement parameter.

[0059] The completed first statement parameter is determined as the statement parameter of the list rendering instruction, and based on the completed first statement parameter, the grammatical structure of the list rendering instruction is re-determined to ensure the correctness and consistency of the grammar, so as to maintain the uniformity of the code style and improve the code quality in the project.

[0060] By comparing the node data of different nodes, it is possible to ensure that when there are multiple list rendering instruction nodes, the statement parameters of the list rendering instruction can be identified and completed, and its grammatical structure can be determined, thereby improving the consistency and integrity of the code.

[0061] S103: Based on the grammatical structure, perform a missing detection on the statement parameters of the list rendering instruction to obtain a missing detection result;

[0062] In one embodiment, based on the identified syntax structure of the list rendering instruction, a missing detection is performed on the statement parameters of the instruction.

[0063] For example, according to the syntax structure of the list rendering instruction, the necessary parameters required by the list rendering instruction in terms of syntax are clarified. Taking the v-for instruction as an example, its basic syntax structure is v-for=

[0064] "(item,index)initems", where "items" is the array expression to be traversed, "item" is the alias of the element currently being traversed, and "index" is an optional index variable. According to this syntax specification, check whether the actual instruction statement parameters are missing any required parts.

[0065] For example, check whether the array expression to be traversed is provided in the actual syntax structure of the v-for directive. If not, it can be determined that there is a missing parameter problem in the directive statement parameter of the v-for directive, and the missing parameter is an array expression.

[0066] Furthermore, based on the grammatical structure, a standard grammatical structure pattern of the list rendering instruction is determined; and the statement parameters of the list rendering instruction are matched with the standard grammatical structure pattern to obtain a missing detection result of the statement parameters of the list rendering instruction.

[0067] In one embodiment, the standard syntax structure pattern of the list rendering instruction is clearly defined as the detection basis. Taking the v-for instruction in Vue.js as an example, its standard syntax structure pattern is usually

[0068] v-for="(alias,index)initerable" or v-for="(alias,index)ofiterable" (the of keyword is also supported in some versions or specific scenarios).

[0069] Iterable is an iterable object (such as an array or object) that specifies the list data source to be rendered; alias is an alias for the currently iterated element, used to reference the current item in the template; and index is an optional parameter that represents the index or key value of the current item. These components constitute the key elements of the complete syntax of the v-for directive and can serve as a reference standard for missing values.

[0070] Locate the nodes corresponding to list rendering instructions from the Abstract Syntax Tree (AST). In the Vue template AST, each element, instruction, etc. has a corresponding node representation. Using a tree traversal algorithm (such as depth-first search or breadth-first search), the node type or attribute is searched to determine which nodes are list rendering instruction nodes.

[0071] For example, the AST node attributes include a section that identifies the instruction type. By matching the v-for instruction identifier, we can accurately locate the relevant instruction node and analyze the statement parameter information it contains. We then parse the statement parameter section in the instruction node and extract the actual parameter content.

[0072] In the AST, the parameter part of the instruction node is usually stored in some structured form, including string expressions or other data structures.

[0073] For the v-for directive (list rendering directive), its argument string needs to be parsed and split into its components according to the grammatical structure. For example, the argument string can be split into an (alias, index) portion on the left and an iterable portion on the right. During the parsing process, operations such as string segmentation and whitespace removal can be performed to accurately extract the specific content of each argument.

[0074] During the detection process, the extracted parameters are matched against the standard grammatical structure pattern. If the parameter string does not match the pattern, further analysis is performed to determine which part caused the mismatch and the missing parameter is determined.

[0075] At the same time, the context information provided by AST, such as the type of the element where the instruction is located and the overall structure of the template, is used to assist in determining whether the missing parameters will have a practical impact on list rendering, avoiding misjudgment of some simplified writing methods that are acceptable in specific scenarios.

[0076] In one embodiment, when the statement parameters of the list rendering instruction conform to the standard syntax structure pattern, the missing detection result is determined to be that there is no missing parameter in the statement parameters of the list rendering instruction; when the statement parameters of the list rendering instruction do not conform to the standard syntax structure pattern, the missing detection result is determined to be that there is missing parameter in the statement parameters of the list rendering instruction, and the instruction information of the list rendering instruction is recorded.

[0077] Specifically, according to the standard grammatical structure, the extracted parameters are checked one by one to see if there is any missing condition.

[0078] Taking the v-for directive (list rendering directive) as an example, its standard syntax structure pattern is usually v-for = "(alias, index) initerable". The parameter detection process can then sequentially detect the missing of the iterable parameter, the alias parameter, and the index parameter.

[0079] First, the iterable parameter is checked for absence. This is essential for list rendering, as list rendering is impossible without a data source. If no data source expression, such as in or of, is found in the parsed parameters, the iterable parameter is considered missing.

[0080] Next, check whether the alias parameter exists. Alias ​​is a key identifier that references the currently traversed element in the template. If the first parameter after the comma separation (the alias part) is not found in the parameters, the alias parameter is considered missing.

[0081] For the index parameter, although it is optional, if the template logic analysis finds that the index is needed, but the second parameter (i.e. the index part) is not provided in the parameter, the missing index parameter is recorded.

[0082] In addition, in the syntax structure of the v-for directive, even if there is no missing parameter problem in the instruction statement parameters of the v-for directive, if there is an error in the order of the instruction statement parameters, it may also cause the v-for directive to malfunction. Therefore, it is also necessary to check whether the order of the instruction statement parameters is correct based on the basic syntax structure of the v-for directive. Only when the instruction statement parameters are complete and the order of the instruction statement parameters in the syntax structure conforms to the syntax specifications can it be determined that there is no missing problem in the v-for directive.

[0083] This embodiment automatically detects the parameters in the v-for statement through the AST parsing results. When the missing index is detected, it is completed. For example, v-for = "{a, b} in items" is automatically converted to v-for = "({a, b}, index) in items", ensuring the standardization and consistency of v-for writing. This feature can significantly reduce the manual operation required by developers.

[0084] After the missing parameter detection is completed, the detection results are recorded, including detailed information such as the missing parameter type and location. Once a missing parameter is found, this information needs to be recorded in detail for subsequent completion or other optimization operations. The recorded content may include the template file location where the instruction is located (such as line number, column number), the specific writing method of the instruction, the missing parameter name (such as iterable, alias or index), and the possible scope of impact. This information is of great guiding significance for subsequent automatic completion or manual repair by developers, and can help quickly locate the problem and take appropriate solutions.

[0085] S104: When the missing detection result indicates that a parameter of the list rendering instruction is missing, the missing parameters of the list rendering instruction are completed based on the syntax structure to optimize the list rendering instruction.

[0086] In one embodiment, if it is detected that a parameter of a list rendering instruction is missing, the missing parameter is completed according to the syntax structure of the list rendering instruction, thereby optimizing the list rendering instruction.

[0087] When completing index parameters, maintain semantic consistency and readability. When missing index parameters are detected, completion is performed according to the v-for syntax. For example, convert v-for="iteminitems" to v-for="(item,index)initems" . During completion, consider the order and deconstruction of parameters to ensure that the completed code meets the developer's expectations. Furthermore, syntax checking is required to avoid introducing new syntax errors due to automatic completion.

[0088] Exemplarily, by analyzing the results of AST parsing, the parameter part of the v-for statement is scanned. In a normal v-for instruction, an index parameter is usually expected to facilitate the positioning and operation of the loop item. When the missing index in the parameter is detected, it is completed according to the syntax specification of v-for. For example, for v-for = "{a, b} initems", it is converted to v-for = "({a, b}, index) initems". This conversion process requires accurately locating the parameter node position in the AST and adding a new index parameter node, while ensuring the correctness of the syntax and the integrity of the structure.

[0089] Specifically, the type and position of the missing parameters are determined according to the syntax specification of the instruction. For example, if an array expression to be traversed is missing, a reasonable array variable name can be inferred as the completion content based on the context or template logic.

[0090] For optional index variables, if they are missing and may be needed in some scenarios (such as when performing specific operations based on the index in a list item), a default index variable name (such as "index") can be generated and added to the directive parameters.

[0091] Furthermore, based on the grammatical structure, the missing parameters of the instruction parameters and the completion positions of the missing parameters are determined; based on the completion positions of the missing parameters, the missing parameters are completed into the instruction parameters of the list rendering instruction to obtain the completed list rendering instruction.

[0092] When completing parameters, follow the syntax structure of the list rendering instruction to complete the operation, ensuring that the syntax of the completed list rendering instruction is correct and complies with the specifications of the Vue template.

[0093] Specifically, for each v-for node, extract its parameter portion. Through grammatical analysis, determine whether the parameter contains an index variable. For example, in the simple v-for parameter structure "itemin items", if the index parameter is missing, it needs to be completed.

[0094] When completing index parameters, consider the different parameter structures. For simple loop variables (such as item), the completed code should be "(item,index)". For parameters containing object or array destructuring (such as "{a,b}in items"), the completion code is "({a,b},index)". If there is nested destructuring, such as "v-for="{a,{b}}in items", the completion code should be "({a,{b}},index)".

[0095] After completing the parameters, the modified AST is converted back to code. The updated AST is converted back to template code in string form through the code generation tool.

[0096] After completion, the entire list rendering instruction can be verified to ensure that the optimized list rendering instruction can work properly, thereby improving the quality and reliability of the Vue template.

[0097] This embodiment automatically completes missing index parameters, standardizes the writing of v-for, reduces manual operations and errors, reduces maintenance costs, and helps development teams maintain a consistent code style.

[0098] Understandably, the complexity of Vue templates lies primarily in nested structures, complex deconstruction, and the varying support for v-for across different Vue versions. When implementing AST-based parsing and completion for v-for directives in Vue templates, given the complexity of Vue templates, it's crucial to ensure the solution is flexible enough to accommodate various complex deconstructions and dynamic structures. When parsing and completing, the varying support for v-for across different Vue versions must be fully considered, with in-depth traversal and analysis of various nested levels and data structures to ensure accurate index identification and completion even in complex scenarios.

[0099] For example, in Vue2, the v-for syntax allows for the omission of index parameters. In Vue3, while this can still be omitted, the official recommendation is to explicitly specify index parameters to improve code readability and performance. Therefore, adaptation to different versions of Vue is necessary. You can adjust the parsing and completion strategies by checking the Vue version number in your project. For example, in a Vue3 project, you can more actively prompt developers to complete index parameters, while in a Vue2 project, you can decide whether to prompt or complete based on the specific configuration of the project.

[0100] Therefore, this application solution can be applied to a variety of v-for structures, adapt to different project needs, and support future deconstruction syntax updates. Its automated batch optimization function can be effectively applied to projects of different sizes to improve development efficiency.

[0101] By parsing the Vue template into an abstract syntax tree, the hierarchical relationship and semantic features of the code can be accurately captured, avoiding ambiguity or missed judgments of regular expressions due to text pattern matching, and significantly improving the parsing reliability of complex syntax (such as nested deconstruction); when identifying list rendering instructions based on AST traversal, structured queries can efficiently locate parameters and syntax patterns, accurately distinguish scenarios such as variable binding and deconstruction levels, and ensure the comprehensiveness of parameter identification; missing detection can dynamically adapt to different deconstruction rules (such as single variable, object deconstruction, nested deconstruction, etc.) by analyzing AST node types and associated attributes, accurately determine whether parameters such as index are missing, and avoid subjective errors in manual inspection; parameter completion injects missing parameters in the correct scope based on the syntax context information of AST, ensuring the logical safety of the code insertion location and reducing syntax errors or naming conflicts caused by manual completion.

[0102] This application uses AST parsing instead of regular matching to fundamentally solve the accuracy and scalability problems of complex v-for statement parsing. It can not only automatically adapt to flexible modes such as multi-layer deconstruction and nested syntax, but also realize automatic completion of index parameters, reducing development workload, improving development efficiency and code development accuracy. At the same time, the processing mechanism based on structured data improves the performance and stability of code analysis, ensures the unified maintenance of loop instructions in large-scale projects, avoids runtime errors caused by missing parameters, and significantly improves code quality and development efficiency. In addition, the strong scalability of AST provides a compatible foundation for future syntax iterations, enabling the tool chain to have the ability of long-term sustainable optimization.

[0103] To improve development efficiency, this application solution can also be combined with a one-click batch optimization function. By integrating it into a code editor or build tool, developers can trigger the scanning and completion of v-for instructions in the entire Vue template project with one click.

[0104] Specifically, developers can trigger a single-click scan and completion of Vue templates across their entire project by clicking the corresponding option in the menu bar, using a shortcut key, or enabling this feature in the build tool's configuration file and running a build command. The scanning process parses each Vue template through the AST, locates all v-for directive nodes, and checks parameter integrity according to pre-set rules. If index parameters are missing, they are automatically completed according to the established syntax structure. The modification status of each file is also recorded for subsequent batch saving.

[0105] After executing the batch optimization function, the modified files can be saved automatically or prompted to save manually. The entire process greatly reduces the workload of manual inspection and modification, quickly unifies the project's code style, and improves code quality.

[0106] By integrating this solution into your build tool or code editor, you can batch process v-for statements with one click, eliminating the need to manually modify code one by one. This significantly reduces development and maintenance costs, especially in large-scale Vue projects.

[0107] It can be seen that in the above solution, by parsing the Vue template source code to generate an abstract syntax tree, it is possible to more accurately understand the code logic and locate the list rendering instructions. Traversing the abstract syntax tree to identify the statement parameters and syntax structure of the list rendering instructions, performing missing detection based on the syntax structure, and dynamically adapting to different deconstruction rules can accurately determine whether the instruction parameters are missing, avoiding subjective errors in manual inspection, and improving the accuracy and efficiency of code development. When missing parameters are detected, the missing parameters are completed according to the syntax structure to optimize the list rendering instructions, reducing the developer's development workload, lowering the error rate, ensuring the consistency of the code style, improving maintainability, avoiding runtime errors caused by missing parameters, and significantly improving code quality and development efficiency.

[0108] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0109] In one embodiment, an instruction optimization device based on an abstract syntax tree is provided. The instruction optimization device based on an abstract syntax tree corresponds one-to-one to the instruction optimization method based on an abstract syntax tree in the above embodiment. Figure 2 As shown, the instruction optimization device based on the abstract syntax tree includes: a code parsing module 201, an instruction recognition module 202, a missing detection module 203 and a missing completion module 204. The functional modules are described in detail as follows:

[0110] The code parsing module 201 is used to parse the source code in the Vue template and obtain the abstract syntax tree of the source code;

[0111] An instruction recognition module 202 is used to traverse the abstract syntax tree and identify the statement parameters and grammatical structure of the list rendering instruction in the Vue template;

[0112] A missing detection module 203 is configured to perform missing detection on the statement parameters of the list rendering instruction based on the grammatical structure to obtain a missing detection result;

[0113] The missing completion module 204 is used to complete the missing parameters of the list rendering instruction based on the syntax structure when the missing detection result shows that the instruction parameters of the list rendering instruction are missing, so as to achieve instruction optimization of the list rendering instruction.

[0114] In one embodiment, the missing completion module 204 includes:

[0115] a parameter determination unit, configured to determine missing parameters of the instruction parameters and a position to complete the missing parameters based on the grammatical structure;

[0116] A missing parameter completion unit is used to complete the missing parameter into the instruction parameter of the list rendering instruction based on the completion position of the missing parameter to obtain the completed list rendering instruction.

[0117] In one embodiment, the missing detection module 203 includes:

[0118] a standard syntax structure determining unit, configured to determine a standard syntax structure pattern of the list rendering instruction based on the syntax structure;

[0119] The missing detection unit is used to match the statement parameters of the list rendering instruction with the standard grammatical structure pattern to obtain a missing detection result of the statement parameters of the list rendering instruction.

[0120] In one embodiment, the deletion detection unit includes:

[0121] a first missing detection subunit, configured to determine, when the statement parameters of the list rendering instruction conform to the standard grammatical structure pattern, that the missing detection result is that the statement parameters of the list rendering instruction do not have missing parameters;

[0122] The second missing detection subunit is used to determine that the missing detection result is that there are missing parameters in the statement parameters of the list rendering instruction when the statement parameters of the list rendering instruction do not conform to the standard grammatical structure pattern, and record the instruction information of the list rendering instruction.

[0123] In one embodiment, the instruction recognition module 202 includes:

[0124] A node attribute determination unit, configured to traverse each node in the abstract syntax tree based on a tree search method to determine the node attribute of each node;

[0125] The instruction parameter determination unit is used to determine the statement parameters and grammatical structure of the list rendering instruction based on the node data of the node corresponding to the list rendering instruction when detecting that the node attribute is the list rendering instruction.

[0126] In one embodiment, the instruction parameter determination unit includes:

[0127] a first statement parameter determination subunit, configured to determine a first statement parameter of the list rendering instruction based on node data of a current node;

[0128] A second statement parameter determination subunit, configured to obtain a second statement parameter of the list rendering instruction based on node data of other nodes except the current node;

[0129] a parameter comparison subunit, configured to compare the first statement parameter with the second statement parameter to obtain a statement parameter comparison result;

[0130] a statement parameter determination first subunit, configured to determine, when a statement parameter comparison result shows that the structures of the first statement parameter and the second statement parameter are identical, that the first statement parameter is a statement parameter of the list rendering instruction;

[0131] The syntax structure determination first subunit is used to determine the syntax structure of the list rendering instruction based on the first statement parameter.

[0132] In one embodiment, the instruction parameter determination unit further includes:

[0133] a difference parameter completion subunit, configured to, when a result of the statement parameter comparison indicates that there is a structural difference between the first statement parameter and the second statement parameter, complete the difference parameter into the first statement parameter based on the statement parameter comparison result to obtain the completed first statement parameter;

[0134] a statement parameter determination second subunit, configured to determine the completed first statement parameter as a statement parameter of the list rendering instruction;

[0135] The grammatical structure determination second subunit is used to determine the grammatical structure of the list rendering instruction based on the completed first statement parameters.

[0136] The present invention provides an instruction optimization device based on an abstract syntax tree. By parsing the Vue template source code to generate an abstract syntax tree, the device can more accurately understand the code logic and locate the list rendering instruction. The abstract syntax tree is traversed to identify the statement parameters and syntax structure of the list rendering instruction, and missing detection is performed based on the syntax structure. Different deconstruction rules can be dynamically adapted to accurately determine whether the instruction parameters are missing, thereby avoiding subjective errors in manual inspection and improving the accuracy and efficiency of code development. When a parameter is detected to be missing, the missing parameter is completed according to the syntax structure to optimize the list rendering instruction, thereby reducing the developer's development workload, lowering the error rate, ensuring the consistency of the code style, improving maintainability, avoiding runtime errors caused by missing parameters, and significantly improving code quality and development efficiency.

[0137] For the specific limitations of the instruction optimization device based on the abstract syntax tree, please refer to the limitations of the instruction optimization method based on the abstract syntax tree above, which will not be repeated here. The various modules in the above-mentioned instruction optimization device based on the abstract syntax tree can be implemented in whole or in part by software, hardware and their combination. The above-mentioned modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory of the computer device in the form of software, so that the processor can call and execute the operations corresponding to the above modules.

[0138] In one embodiment, a computer device is provided. The computer device may be a server, and its internal structure diagram may be as follows: Figure 3 As shown. The computer device includes a processor, a memory, a network interface and a database connected via a system bus. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile and / or volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program and a database. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external client via a network connection. When the computer program is executed by the processor, it implements the functions or steps on the server side of an instruction optimization method based on an abstract syntax tree.

[0139] In one embodiment, a computer device is provided. The computer device may be a client, and its internal structure diagram may be as follows: Figure 4 As shown. The computer device includes a processor, memory, network interface, display screen and input device connected via a system bus. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external server via a network connection. When the computer program is executed by the processor, it implements the functions or steps of the client side of an instruction optimization method based on an abstract syntax tree

[0140] In one embodiment, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the following steps are performed:

[0141] Parse the source code in the Vue template to obtain the abstract syntax tree of the source code;

[0142] Traversing the abstract syntax tree to identify statement parameters and grammatical structures of the list rendering instructions in the Vue template;

[0143] Based on the grammatical structure, performing a missing detection on the statement parameters of the list rendering instruction to obtain a missing detection result;

[0144] When the missing detection result indicates that there are missing parameters in the instruction parameters of the list rendering instruction, the missing parameters of the instruction parameters of the list rendering instruction are completed based on the syntax structure to achieve instruction optimization of the list rendering instruction.

[0145] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the following steps are implemented:

[0146] Parse the source code in the Vue template to obtain the abstract syntax tree of the source code;

[0147] Traversing the abstract syntax tree to identify statement parameters and grammatical structures of the list rendering instructions in the Vue template;

[0148] Based on the grammatical structure, performing a missing detection on the statement parameters of the list rendering instruction to obtain a missing detection result;

[0149] When the missing detection result indicates that there are missing parameters in the instruction parameters of the list rendering instruction, the missing parameters of the instruction parameters of the list rendering instruction are completed based on the syntax structure to achieve instruction optimization of the list rendering instruction.

[0150] It should be noted that the above functions or steps that can be implemented by the computer-readable storage medium or computer device can be found in the relevant descriptions of the server side and the client side in the aforementioned method embodiment. To avoid repetition, they will not be described one by one here.

[0151] Those skilled in the art will appreciate that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through a computer program. The computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

[0152] Those skilled in the art will clearly understand that for the sake of convenience and brevity of description, only the division of the above-mentioned functional units and modules is used as an example. In actual applications, the above-mentioned functions can be distributed and completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above.

[0153] The embodiments described above are only used to illustrate the technical solutions of the present invention, rather than to limit the same. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various embodiments of the present invention, and should all be included in the scope of protection of the present invention.

Claims

1. An instruction optimization method based on an abstract syntax tree, characterized in that: The method comprises: Parse the source code in the Vue template to obtain the abstract syntax tree of the source code; Traversing the abstract syntax tree to identify statement parameters and grammatical structures of the list rendering instructions in the Vue template; Based on the grammatical structure, performing a missing detection on the statement parameters of the list rendering instruction to obtain a missing detection result; When the missing detection result indicates that there are missing parameters in the instruction parameters of the list rendering instruction, the missing parameters of the instruction parameters of the list rendering instruction are completed based on the syntax structure to achieve instruction optimization of the list rendering instruction.

2. The instruction optimization method based on the abstract syntax tree according to claim 1, characterized in that: The step of completing missing parameters of the list rendering instruction based on the grammatical structure to optimize the list rendering instruction includes: Determining missing parameters of the instruction parameters and locations for completing the missing parameters based on the grammatical structure; Based on the completion position of the missing parameter, the missing parameter is completed into the instruction parameter of the list rendering instruction to obtain the completed list rendering instruction.

3. The instruction optimization method based on the abstract syntax tree according to claim 1, characterized in that: The performing missing detection on the statement parameters of the list rendering instruction based on the grammatical structure to obtain the missing detection result includes: Based on the grammatical structure, determining a standard grammatical structure pattern of the list rendering instruction; The statement parameters of the list rendering instruction are matched with the standard syntax structure pattern to obtain a missing detection result of the statement parameters of the list rendering instruction.

4. The instruction optimization method based on the abstract syntax tree according to claim 3, characterized in that: The matching of the statement parameters of the list rendering instruction with the standard grammatical structure pattern to obtain a missing detection result of the statement parameters of the list rendering instruction includes: When the statement parameters of the list rendering instruction conform to the standard grammatical structure pattern, determining that the missing detection result is that the statement parameters of the list rendering instruction do not have missing parameters; When the statement parameters of the list rendering instruction do not conform to the standard grammatical structure pattern, it is determined that the missing detection result is that there are missing parameters in the statement parameters of the list rendering instruction, and instruction information of the list rendering instruction is recorded.

5. The instruction optimization method based on the abstract syntax tree according to claim 1, characterized in that: Traversing the abstract syntax tree to identify statement parameters and grammatical structures of the list rendering instructions in the Vue template includes: Based on a tree search method, traverse each node in the abstract syntax tree to determine the node attributes of each node; When it is detected that the node attribute is the list rendering instruction, the statement parameters and grammatical structure of the list rendering instruction are determined based on the node data of the node corresponding to the list rendering instruction.

6. The instruction optimization method based on the abstract syntax tree according to claim 5, characterized in that: The determining, based on the node data of the node corresponding to the list rendering instruction, the statement parameters and the grammatical structure of the list rendering instruction includes: Determining a first statement parameter of the list rendering instruction based on the node data of the current node; Obtaining a second statement parameter of the list rendering instruction based on node data of other nodes except the current node; Comparing the first statement parameter with the second statement parameter to obtain a statement parameter comparison result; When the statement parameter comparison result shows that there is no structural difference between the first statement parameter and the second statement parameter, determining that the first statement parameter is the statement parameter of the list rendering instruction; Based on the first statement parameter, a grammatical structure of the list rendering instruction is determined.

7. The instruction optimization method based on the abstract syntax tree according to claim 6, characterized in that: After comparing the first statement parameter with the second statement parameter to obtain a statement parameter comparison result, the method further includes: When the statement parameter comparison result shows that there is a structural difference between the first statement parameter and the second statement parameter, based on the statement parameter comparison result, completing the difference parameter into the first statement parameter to obtain the completed first statement parameter; Determine the completed first statement parameter as the statement parameter of the list rendering instruction; Based on the completed first statement parameter, a grammatical structure of the list rendering instruction is determined.

8. An instruction optimization device based on an abstract syntax tree, characterized in that: The instruction optimization device based on the abstract syntax tree includes: The code parsing module is used to parse the source code in the Vue template and obtain the abstract syntax tree of the source code; An instruction recognition module is used to traverse the abstract syntax tree and identify the statement parameters and grammatical structure of the list rendering instruction in the Vue template; A missing detection module is used to perform missing detection on the statement parameters of the list rendering instruction based on the grammatical structure to obtain a missing detection result; A missing completion module is used to complete the missing parameters of the list rendering instruction based on the syntax structure when the missing detection result shows that there are missing parameters in the instruction parameters of the list rendering instruction, so as to achieve instruction optimization of the list rendering instruction.

9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the steps of the instruction optimization method based on the abstract syntax tree according to any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps of the instruction optimization method based on the abstract syntax tree as claimed in any one of claims 1 to 7 are implemented.