Detection method for array lookup expression in vue component template
By using vue-eslint-parser and custom rules to detect array lookup expressions in Vue templates, the problem of insufficient language quality detection of Vue templates is solved, and higher code normativeness and program performance are achieved.
Patent Information
- Application Number
- CN202411605061.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-11-12
- Publication Date
- 2025-02-28
AI Technical Summary
The Vue template language is relatively insufficient in quality inspection, which leads to the program quality relying on the experience of developers and lacks effective quality inspection methods.
Use vue-eslint-parser as the parser of ESLint, parse Vue components into AST, detect array search expressions in Vue templates through custom rules, generate eslint repair methods and detection reports, and ensure code quality and consistency.
Through in-depth detection and repair of ESLint, the standardization and program performance of the Vue template language are improved, potential errors and risks are reduced, and code readability and maintainability are improved.
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of data query processing, and in particular to a method for detecting an array search expression in a Vue component template. Background Art
[0002] Vue is a lightweight, flexible and efficient JavaScript framework for building interactive user interfaces. It uses a componentized development model to make front-end development simpler and more maintainable. Vue provides a responsive data binding and componentization system, as well as a powerful tool and plug-in ecosystem that enables developers to quickly build high-quality web applications. ESLint is a configurable static code analysis tool that identifies and reports problems, errors, and potential irregularities in JavaScript code. At the same time, ESLint is also a flexible tool that can be customized according to project needs to adapt to different development environments and team styles. It can help developers maintain a consistent code style and discover problems that may cause bugs or lead to poor code quality. ESLint provides a series of rules for checking code syntax, code style, best practices, and issues that can improve performance.
[0003] Development teams can choose to enable or disable different rules to customize their own code specifications according to their needs and preferences. As a powerful front-end framework, Vue is equipped with a unique custom template language. As far as the current situation is concerned, although Vue's template language has powerful and rich functions, compared with traditional programming languages, the methods used in quality detection of its template language are relatively lacking and insufficient. This situation makes the quality of related programs largely depend on the level of experience accumulated by the developers themselves.
[0004] In view of the above problems, it is urgent to make innovative designs based on the original array search expression method. Summary of the invention
[0005] The purpose of the present invention is to provide a method for detecting array search expressions in vue component templates, so as to solve the problem that the quality detection method of its template language is relatively insufficient compared with traditional programming languages, which leads to the problem that the quality of the program is completely dependent on the experience of the developer.
[0006] To achieve the above object, the present invention provides the following technical solution: a method for detecting an array search expression in a vue component template, comprising the following detection steps:
[0007] S1. Use vue-eslint-parser as the eslint parser to parse the vue component into AST;
[0008] S2. Through the eslint detection rule of the array search expression in the custom vue template, traverse all the attribute nodes of the exported object and find all the function call nodes in the vue template;
[0009] S3. Enable eslint custom rules to detect the vue project and filter out all function call nodes that are not array search nodes;
[0010] S4. Traverse all function call nodes, extract the searched array nodes, search primary key nodes and search parameter nodes;
[0011] S5. Traverse all function call nodes and generate array search expression eslint repair method based on its searched array nodes and search parameter nodes;
[0012] S6. Traverse AST to obtain the default export declaration node;
[0013] S7. Get all attribute nodes of the export object of the default export declaration node;
[0014] S8. Traverse all attribute nodes of the exported object and obtain the computed attribute node;
[0015] S9. Traverse all function call nodes, and generate computed property eslint repair methods based on their searched array nodes, searched primary key nodes, and computed property nodes;
[0016] S10. Traverse all function call nodes, search for expression eslint repair methods and computed properties eslint repair methods and function call nodes based on their arrays to generate eslint detection reports.
[0017] The above technical solutions are used to effectively cooperate with the team to ensure code quality and consistency in array search.
[0018] Preferably, the getSourceCode method of the eslint custom rule context in S3 obtains the source code operation object, and only the getText method of the source code operation object is used to obtain the code string corresponding to the function name node.
[0019] The above technical solution is adopted to facilitate obtaining the function name node of the callee attribute in all function call nodes.
[0020] Preferably, the callee attribute of the function call node in S4 obtains the function name node, and the arguments attribute of the function call node obtains the function call parameter node.
[0021] By adopting the above technical solution, the searched array node is obtained by removing the .find suffix of the function name node using the string repalce method.
[0022] Preferably, the current function call node in S5 uses the getSourceCode method of the eslint custom rule context to obtain a source code operation object, the getText method of the source code operation object obtains the code string corresponding to the searched array node, and adds a prefix [and suffix] to the code string corresponding to the search parameter node.
[0023] The above technical solution is adopted to facilitate the use of a quick search code generation array to search for an expression eslint repair method.
[0024] Preferably, the eslint repair method in S5 generates an array search from the current function call node and the quick search code, and if the flag of the current function call node is suspected to be repairable, the array search expression eslint repair method is not generated.
[0025] By adopting the above technical solution, the code string corresponding to the search parameter node is obtained by using the getText method of the source code operation object.
[0026] Preferably, the quick search code is generated by adding the code string corresponding to the search parameter node to the suffix of the code string corresponding to the searched array node.
[0027] By adopting the above technical solution, after quickly searching the code, the code corresponding to the parameter node is added with the code string suffix corresponding to the corresponding array node.
[0028] Preferably, the node type traversed in S6 is ExportDefaultDeclaration, which indicates that the current node is a default export declaration node.
[0029] The above technical solution is adopted to determine and export through the ExportDefaultDeclaration auxiliary node.
[0030] Preferably, the declaration attribute of the export declaration node used in S7 obtains the export object node, and the properties attribute of the export object node obtains all its property nodes.
[0031] The above technical solution is adopted to obtain the attribute node of the default export declaration node.
[0032] Preferably, if the flag of the current function call node searched in S9 is in a repairable state, the getSourceCode method of the eslint custom rule context is used to obtain the getText method in the source code operation object to obtain the code strings corresponding to the searched array node and the primary key node respectively, and the corresponding code strings are inserted into the following template to generate the computed attribute code corresponding to the function call node to generate the computed attribute eslint repair.
[0033] Using the above technical solution, the eslint custom rule provides a corresponding code string for the current function call node, which is convenient for node mark repair. The eslint detection report is generated through the eslint repair method and the function call node.
[0034] Preferably, when the flag of the current function call node in S10 is repairable, the AST is traversed to obtain all nodes of the ImportDeclaration type, an eslint repair method for importing the keyBy method is generated, an array search expression eslint repair method for the current function call node is generated, a risk warning is generated, and a repair array search expression detection report is generated.
[0035] Using the above technical solution, the corresponding expression eslint repair is searched for the flag of the current function call node.
[0036] Compared with the prior art, the beneficial effects of the present invention are: the detection method of array search expression in vue component template:
[0037] 1. Based on the ESLint detection tool, we have carried out comprehensive and in-depth optimization and accurate and efficient detection for the critical array search expressions in Vue templates. Since ESLint can be integrated with most editors and integrated development environments, it helps developers find and solve problems as early as possible during the coding process through real-time code inspection and prompts, which greatly improves the standardization of the Vue template language, making it follow more stringent and scientific standards, reducing potential errors and risks caused by non-standardization, and promoting the maintainability and readability of the project;
[0038] 2. By standardizing the Vue template language, the performance of the program is significantly enhanced. The efficiency of data processing and calculation is optimized, making the program run more smoothly and efficiently, and effectively improving the readability of the Vue template. The code structure becomes clearer and the logic is clearer. Developers can understand and grasp the core content of the template more easily and quickly, reducing the cost and difficulty of subsequent maintenance and updates, and providing a solid guarantee for long-term stable development and optimization;
[0039] 3.vue-eslint-parser is an ESLint parser for static code analysis of Vue single-file components. It is based on ESLint and adapts to Vue's special syntax, so that ESLint can parse and check Javascript, templates and style codes in Vue files. By using vue-esl int-parser, developers can make full use of the powerful functions of ESLint to perform static code checking and standardization on Vue single-file components, effectively helping development teams ensure code quality and consistency, capture potential errors or inefficient code, and provide Vue-specific rules to optimize Vue applications. DETAILED DESCRIPTION
[0040] The following will be combined with the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.
[0041] The present invention provides a technical solution: a detection method for array search expression in a vue component template, comprising the following detection steps:
[0042] S1. Use vue-eslint-parser as the eslint parser to parse the vue component into AST;
[0043] S2. Through the eslint detection rule of the array search expression in the custom vue template, traverse all the attribute nodes of the exported object and find all the function call nodes in the vue template;
[0044] When traversing AST, find all function call nodes in the vue template. If the traversed node type is CallExpression, it means that the current node is a function call node.
[0045] S3. Enable eslint custom rules to detect the vue project and filter out all function call nodes that are not array search nodes;
[0046] The getSourceCode method of the eslint custom rule context in S3 obtains the source code operation object, and only uses the getText method of the source code operation object to obtain the code string corresponding to the function name node;
[0047] In the process of traversing all function call nodes, the callee attribute of the function call node is used to obtain the function name node, and the getText method of the source code operation object is used to obtain the code string corresponding to the function name node;
[0048] If the code string corresponding to the function name node cannot match the regular expression / ^([a-zA-Z_$][a-zA-Z0-9_$]*(\s*\(\s*\))?\.?)+$ / , it means that it is not an array search node. At the same time, if the code string corresponding to the function name node does not end with the .find string, it means that it is not an array search node.
[0049] The function call parameter node is obtained by using the arguments attribute of the function call node;
[0050] If the type of the function call parameter node is not Function, it means it is not an array search node;
[0051] If the first item of the params attribute of the call parameter node is a node of type Identifier, and the body attribute of the call parameter node is a node of type BinaryExpression, and the operator attribute of the body attribute is the string ===, and the left attribute or the right attribute of the body attribute is a MemberExpression type node prefixed with the first item string of the params attribute, then the current function call node is marked as providing an eslint repair method, otherwise the current function call node is marked as suspected to be repairable
[0052] S4. Traverse all function call nodes, extract the searched array nodes, search primary key nodes and search parameter nodes;
[0053] During the function call node process, if the flag of the current function call node is suspected to be repairable, no extraction is performed;
[0054] The callee attribute of the function call node in S4 obtains the function name node, and the arguments attribute of the function call node obtains the function call parameter node;
[0055] Use the string repalce method to remove the .find suffix of the function name node to obtain the searched array node;
[0056] If the left attribute or the right attribute of the body attribute of the calling parameter node is a MemberExpression type node prefixed with the first string of the params attribute of the calling parameter node, then the search primary key node is the property attribute node whose left attribute or the right attribute of the body attribute of the calling parameter node;
[0057] If the left attribute or right attribute of the body attribute of the calling parameter node is not a node prefixed by the first string of the params attribute of the calling parameter node, then the search parameter node is the left attribute or right attribute of the body attribute of the calling parameter node;
[0058] S5. Traverse all function call nodes and generate array search expression eslint repair method based on its searched array nodes and search parameter nodes;
[0059] a. If the flag of the current function call node is repairable, use the getSourceCode method of the eslint custom rule context to obtain the source code operation object;
[0060] Based on the code corresponding to the searched array node, remove the characters (,), and replace the characters . with characters _ to generate the mapping variable name of the searched array node;
[0061] The getText method of the source code operation object obtains the code string corresponding to the searched array node, and adds a prefix [and a suffix] to the code string corresponding to the search parameter node;
[0062] Add the code string corresponding to the search parameter node to the suffix of the code string corresponding to the searched array node to generate a quick search code;
[0063] Use the replaceText method of the fixer parameter object in the fix function in the report method in the eslint custom rule to pass in the current function call node and the quick search code generation array search expression eslint repair method;
[0064] The eslint repair method generates an array search from the current function call node and the quick search code, and if the flag of the current function call node is suspected to be repairable, the array search expression eslint repair method is not generated;
[0065] The quick search code is generated by adding the code string corresponding to the search parameter node to the suffix of the code string corresponding to the searched array node;
[0066] b. If the flag of the current function call node is suspected to be repairable, there is no need to generate the array search expression eslint repair method;
[0067] S6. Traverse AST to obtain the default export declaration node;
[0068] The node type traversed in S6 is ExportDefaultDeclaration, which means that the current node is a default export declaration node;
[0069] S7. Get all attribute nodes of the export object of the default export declaration node;
[0070] The declaration attribute of the export declaration node used in S7 obtains the export object node, and the properties attribute of the export object node obtains all its attribute nodes;
[0071] S8. Traverse all attribute nodes of the exported object and obtain the computed attribute node;
[0072] Traverse all attribute nodes of the exported object node, and use the name attribute of the key attribute of each attribute node to obtain its attribute name. If the attribute name of the attribute node is computed, it means that the current attribute node is a computed attribute node;
[0073] S9. Traverse all function call nodes, and generate computed property eslint repair methods based on their searched array nodes, searched primary key nodes, and computed property nodes;
[0074] a. If the flag of the current function call node is in a repairable state, use the getSourceCode method of the eslint custom rule context to obtain the getText method in the source code operation object to obtain the code strings corresponding to the searched array node and the primary key node respectively;
[0075] Based on the code corresponding to the searched array node, remove the characters (,), and replace the characters . with characters _ to generate the mapping variable name of the searched array node;
[0076] Use the getText method of the source code operation object to obtain the code string corresponding to the primary key node;
[0077] Use the searched array node to map the variable name and the code string corresponding to the search primary key node to insert into the following template to generate the computed attribute code corresponding to the function call node:
[0078] JavaScript
[0079] `${The array node being searched maps to the variable
[0080] name}(){returnkeyBy(this.${code string corresponding to the array node being searched}),${code string corresponding to the primary key node being searched}}`
[0081] Use the replaceTextRange method of the fixer parameter object in the fix function in the report method in the eslint custom rule to pass in the end range of the current function call node and the computed property code corresponding to the function call node to generate the computed property eslint repair method;
[0082] b. If the flag of the current function call node is suspected to be repairable, use the report method in the eslint custom rule to pass the suggestion string "The current function call node is suspected to be repairable" to the computed property and the current function call node, and generate a risk warning;
[0083] S10. Traverse all function call nodes, search for expression eslint repair methods and computed properties eslint repair methods and function call nodes based on their arrays to generate eslint detection reports;
[0084] a. When the flag of the current function call node is fixable, traverse the AST to obtain all nodes of the ImportDeclaration type. If there is a node of the ImportDeclaration type whose source attribute's value attribute is the string lodash-es, and whose specifiers attribute's imported attribute's name attribute is the string keyBy, no processing is done. Otherwise, use the replaceTextRange method of the fixer parameter object in the fix function in the report method in the eslint custom rule to pass in the start range of the default export declaration node and the string import{keyBy}from"lodash-es"; generate an eslint repair method for importing the keyBy method;
[0085] Use the report method in the eslint custom rule to generate risk warnings and generate a repair array search expression detection report;
[0086] b. If the flag of the current function call node is suspected to be repairable, it has been processed in S9.
[0087] Working principle: When using the detection method of array search expressions in vue component templates, first vue-esl int-parser is used to perform static code analysis on Vue single-file components using the ESLint parser, so that ESLint parses and checks the Javascript, templates, and style codes in the Vue files. At all function call nodes, a computed property eslint repair method is generated based on the searched array nodes, searched primary key nodes, and computed property nodes. An eslint detection report is generated through the array search expression eslint repair method, the computed property eslint repair method, and the function call node. The array search expressions in the Vue templates are optimized and detected, which improves the standardization of the Vue template language, program performance, and readability and maintainability of the Vue template.
[0088] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.
Claims
1. A detection method for array search expression in vue component template, characterized in that, The following detection steps are included: S1. Use vue-eslint-parser as the eslint parser to parse the vue component into AST; S2. Through the eslint detection rule of the array search expression in the custom vue template, traverse all the attribute nodes of the exported object and find all the function call nodes in the vue template; S3. Enable eslint custom rules to detect the vue project and filter out all function call nodes that are not array search nodes; S4. Traverse all function call nodes, extract the searched array nodes, search primary key nodes and search parameter nodes; S5. Traverse all function call nodes and generate array search expression eslint repair method based on its searched array nodes and search parameter nodes; S6. Traverse AST to obtain the default export declaration node; S7. Get all attribute nodes of the export object of the default export declaration node; S8. Traverse all attribute nodes of the exported object and obtain the computed attribute node; S9. Traverse all function call nodes, and generate computed property eslint repair methods based on their searched array nodes, searched primary key nodes, and computed property nodes; S10. Traverse all function call nodes, search for expression eslint repair methods and computed properties eslint repair methods and function call nodes based on their arrays to generate eslint detection reports.
2. A detection method for array search expression in vue component template according to claim 1, characterized in that: The getSourceCode method of the eslint custom rule context in S3 obtains the source code operation object, and only uses the getText method of the source code operation object to obtain the code string corresponding to the function name node.
3. A detection method for array search expression in vue component template according to claim 1, characterized in that: The callee attribute of the function call node in S4 obtains the function name node, and the arguments attribute of the function call node obtains the function call parameter node.
4. A detection method for array search expression in vue component template according to claim 1, characterized in that: The current function call node in S5 uses the getSourceCode method of the eslint custom rule context to obtain the source code operation object, and the getText method of the source code operation object obtains the code string corresponding to the searched array node, and adds a prefix [and suffix] to the code string corresponding to the search parameter node.
5. A detection method for array search expression in vue component template according to claim 1, characterized in that: The eslint repair method in S5 generates an array search from the current function call node and the quick search code, and if the flag of the current function call node is suspected to be repairable, the array search expression eslint repair method is not generated.
6. A method for detecting an array search expression in a vue component template according to claim 5, characterized in that: The quick search code is generated by adding the code string corresponding to the search parameter node to the suffix of the code string corresponding to the searched array node.
7. A method for detecting an array search expression in a vue component template according to claim 1, characterized in that: The node type traversed in S6 is ExportDefaultDeclaration, which means that the current node is a default export declaration node.
8. A method for detecting an array search expression in a vue component template according to claim 1, characterized in that: The declaration attribute of the export declaration node used in S7 obtains the export object node, and the properties attribute of the export object node obtains all its property nodes.
9. A detection method for array search expression in vue component template according to claim 1, characterized in that: If the flag of the current function call node found in S9 is in a repairable state, the getSourceCode method of the eslint custom rule context is used to obtain the getText method in the source code operation object to obtain the code strings corresponding to the searched array node and the primary key node respectively, and the corresponding code strings are inserted into the following template to generate the computed attribute code corresponding to the function call node to generate the computed attribute eslint repair.
10. A detection method for array search expression in vue component template according to claim 1, characterized in that: When the flag of the current function call node in S10 is repairable, traverse the AST to obtain all nodes of the ImportDeclaration type, generate an eslint repair method for importing the keyBy method, generate an array search expression eslint repair method for the current function call node, generate a risk warning, and generate a repair array search expression detection report.