Code file detection alarm method, device, electronic device and storage medium

Abstract

The present application provides a code file detection alarm method, device, electronic device and storage medium, including reading the file content in a pre-written code file containing a React component; converting the JavaScript code in the file content into an abstract syntax tree through a parser module; traversing and querying all nodes in the abstract syntax tree for the target type to obtain at least one target node; extracting a callback function and a dependency array from each target node; comparing the used variables in the callback function with the declared variables in the dependency array to obtain missing dependencies; generating an alarm message based on the missing dependencies. That is, the embodiment of the present application automatically detects the inconsistency between the variables used in the callback function and the declared dependency array, accurately identifies the missing dependencies, and generates an alarm message based on the missing dependencies in the detection results, thereby ensuring the accuracy and reliability of the code, thereby improving the overall code quality.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of code application technology, and in particular to a code file detection alarm method, device, electronic device and storage medium. Background Art

[0002] React Hooks is a feature introduced in React 16.8 that allows you to use state and other React features without writing classes. Hooks provides many built-in functions that can store internal state in functional components, perform side effects, and more. Two important functions are called useMemo and useCallback.

[0003] useMemo is a hook used to cache the calculation results of complex functions. useCallback is similar to useMemo, but it is used to cache the function itself rather than the calculation results. useCallback reduces unnecessary rendering by caching the function when the dependencies have not changed.

[0004] However, in the actual programming process, correctly managing the dependencies of React Hooks is a challenge, especially for novice developers, who often encounter missing dependencies, that is, developers forget to include a variable required for calculation in the dependency array. Such omissions will cause problems in the application logic, resulting in the value of the dependency changing, but the value of the dependency is not written into the dependency and is not recalculated, which leads to the page displaying wrong data. Summary of the invention

[0005] The embodiments of the present application provide a code file detection alarm method, device, system, electronic device and computer-readable storage medium to solve the problem of data errors caused by relying on omissions in related technologies.

[0006] In a first aspect, an embodiment of the present application provides a code file detection alarm method, the method comprising:

[0007] Read the file contents of a pre-written code file containing a React component;

[0008] Convert the JavaScript code in the file content into an abstract syntax tree through a parser module;

[0009] Traversing and querying all nodes of the target type in the abstract syntax tree to obtain at least one target node;

[0010] Extracting callback functions and dependency arrays from each of the target nodes;

[0011] Compare the used variables in the callback function with the declared variables in the dependency array to obtain missing dependencies;

[0012] Generate warning information based on the missing dependency.

[0013] Optionally, the comparing the used variables in the callback function with the declared variables in the dependency array to obtain the missing dependencies includes:

[0014] Analyze the callback function to obtain all used variables inside the callback function, obtain the call location corresponding to each target node, and the elements in the dependency array;

[0015] For each call of the target node, determining whether all the used variables in the callback function exist in the declared variables in the dependency array;

[0016] If not, the used variables outside of the declared variables are treated as missing dependencies.

[0017] Optionally, the callback function is located at a first preset position of the calling parameter, and the dependency array is located at a second preset position of the calling parameter.

[0018] Optionally, reading the file content in the pre-written code file containing the React component includes:

[0019] The directory where the currently executed script is located and the file path corresponding to the pre-written code file containing the React component are concatenated by the second module to obtain an absolute path;

[0020] The file content specified by the absolute path is synchronously read through the first module.

[0021] Optionally, the traversing and querying all nodes of the target type in the abstract syntax tree to obtain at least one target node includes:

[0022] All nodes in the abstract syntax tree are traversed and queried for a target type of CallExpression and a target name of useMemo to obtain at least one target node.

[0023] Optionally, generating warning information according to the missing dependency includes:

[0024] The missing dependencies are recorded, and warning information is generated according to the recording results.

[0025] Optionally, recording the missing dependencies and generating warning information according to the recording results includes:

[0026] Warning information is printed on the console according to the missing dependencies, wherein each piece of the warning information includes the missing dependencies generated by the target node call of the target component.

[0027] In a second aspect, an embodiment of the present application provides a code file detection alarm device, the device comprising:

[0028] The reading module is used to read the file contents in the pre-written code files containing React components;

[0029] A conversion module, used for converting the JavaScript code in the file content into an abstract syntax tree through a parser module;

[0030] A traversal query module, used to perform a traversal query on all nodes of a target type in the abstract syntax tree to obtain at least one target node;

[0031] An extraction module, used for extracting a callback function and a dependency array from each of the target nodes;

[0032] A comparison module, used for comparing the used variables in the callback function with the declared variables in the dependency array to obtain missing dependencies;

[0033] A generating module is used to generate warning information according to the missing dependency.

[0034] Optionally, the comparison module includes:

[0035] A first comparison submodule is used to analyze the callback function to obtain all used variables inside the callback function, obtain the call position corresponding to each target node, and the elements in the dependency array;

[0036] A second comparison submodule is used to determine, for each call of the target node, whether all the used variables in the callback function exist in the declared variables in the dependency array;

[0037] The third comparison submodule is used for, if not, treating the used variables outside the declared variables as missing dependencies.

[0038] Optionally, the comparison module is specifically used for the callback function to be located at a first preset position of the calling parameter, and the dependency array to be located at a second preset position of the calling parameter.

[0039] Optionally, the reading module includes:

[0040] The first reading submodule is used to concatenate the directory where the currently executed script is located and the file path corresponding to the pre-written code file containing the React component through the second module to obtain an absolute path;

[0041] The second reading submodule is used to synchronously read the file content specified by the absolute path through the first module.

[0042] Optionally, the traversal query module includes:

[0043] The traversal query submodule is used to traverse and query all nodes in the abstract syntax tree for a target type of CallExpression and a target name of useMemo to obtain at least one target node.

[0044] Optionally, the generating module includes:

[0045] The generation submodule is used to record the missing dependencies and generate warning information according to the recording results.

[0046] Optionally, the generating submodule includes:

[0047] A generating unit is used to print warning information on a console according to the missing dependency, wherein each piece of the warning information includes the missing dependency generated by the target node call of the target component.

[0048] In a third aspect, an embodiment of the present application further provides an electronic device, comprising: a processor; and a memory for storing instructions executable by the processor, wherein the processor is configured to execute the instructions to implement any of the code file detection alarm methods described above.

[0049] In a fourth aspect, an embodiment of the present application further provides a computer-readable storage medium, which, when instructions in the computer-readable storage medium are executed by a processor of an electronic device, enables the electronic device to execute any of the code file detection alarm methods described above.

[0050] In an embodiment of the present application, the file content in a pre-written code file containing a React component is read; the JavaScript code in the file content is converted into an abstract syntax tree through a parser module; all nodes in the abstract syntax tree are traversed and queried for the target type to obtain at least one target node; callback functions and dependency arrays are extracted from each of the target nodes; missing dependencies are obtained by comparing the used variables in the callback function with the declared variables in the dependency array; and warning information is generated based on the missing dependencies. That is, the embodiment of the present application generates a corresponding abstract syntax tree (AST) by parsing the read code file with a parser, providing a basis for subsequent dependency detection, automatically detecting the inconsistency between the variables used in the callback function and the declared dependency array by traversing the AST and identifying the target node call, accurately identifying the missing dependencies, and generating warning information based on the missing dependencies in the detection results. This precise dependency tracking ensures the accuracy and reliability of the code, thereby improving the overall code quality.

[0051] The above description is only an overview of the technical solution of the present application. In order to more clearly understand the technical means of the present application, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the present application more obvious and easy to understand, the specific implementation methods of the present application are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0052] Various other advantages and benefits will become apparent to those of ordinary skill in the art by reading the detailed description of the preferred embodiments below. The accompanying drawings are only for the purpose of illustrating the preferred embodiments and are not to be considered as limiting the present application. Also, the same reference symbols are used throughout the accompanying drawings to represent the same components. In the accompanying drawings:

[0053] Figure 1 This is a flowchart of a code file detection alarm method provided by an embodiment of the present application;

[0054] Figure 2 It is a flowchart of another code file detection alarm method provided by an embodiment of the present application;

[0055] Figure 3 This is a data flow diagram of another code file detection alarm method provided by the present application;

[0056] Figure 4 It is a logic block diagram of a code file detection alarm device provided in an embodiment of the present application;

[0057] Figure 5 is a structural diagram of an electronic device provided in an embodiment of the present application;

[0058] Figure 6 It is a schematic diagram of a code file detection alarm process provided in an embodiment of the present application. DETAILED DESCRIPTION

[0059] The exemplary embodiments of the present application will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present application are shown in the accompanying drawings, it should be understood that the present application can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided in order to enable a more thorough understanding of the present application and to fully convey the scope of the present application to those skilled in the art.

[0060] Figure 1 is a flowchart of a code file detection alarm method provided by an embodiment of the present application, such as Figure 1 As shown, the method includes:

[0061] Step 101, reading the file content in the pre-written code file containing the React component;

[0062] It should be noted that in the embodiment of the present application, it is necessary to read a JavaScript file containing a React component, and first introduce two Node.js modules: fs and path. The fs module is used for file system operations, such as reading and writing files, and the path module is used to process file path operations.

[0063] In order to locate this file, you can use the path.join method to concatenate the two partial paths, __dirname (the directory where the currently executed script is located) and the file path, to form an absolute path filePath.

[0064] The fs.readFileSync method is used to read the file content specified by the filePath absolute path variable in a synchronous manner. For example, it can be implemented arbitrarily through code: fs.readFileSync(filePath).

[0065] It should be noted that the Node.js fs.readFileSync() usage and code examples fs.readFileSync() method is a built-in application programming interface of the fs module, which is used to read files and return their contents. In the fs.readFileSync() method, you can read files in a synchronous manner, that is, tell node.js to block other parallel processes and execute the current file reading process.

[0066] Specifically, read the file content. Suppose there is a code file with the following content:

[0067] import React,{useState,useMemo}from'react';

[0068] function ExampleComponent(){

[0069] const[count,setCount]=useState(0);

[0070] const memoizedValue=useMemo(()=>computeExpensiveValue(count),[count]);

[0071] return {memoizedValue} ;

[0072] }

[0073] Step 102, converting the JavaScript code in the file content into an abstract syntax tree through a parser module;

[0074] It should be noted that, in the embodiments of the present application, Babel is a widely used JavaScript compiler, wherein @babel / parser is a parser module of Babel, which can read JavaScript code and convert it into an abstract syntax tree (AST).

[0075] AST is a deeply nested object that represents the structure and grammatical elements of the code. Through AST, the code can be analyzed and modified programmatically.

[0076] Therefore, in the embodiment of the present application, the file content includes JavaScript code, and the file content read in step 101 can be passed to the parser module by calling the parser.parse method. The parser module converts the JavaScript code in the file content into an abstract syntax tree.

[0077] Specifically, the above process can be expressed in code:

[0078] const parser = require('@babel / parser'); / / Use the Babel parser and configure parsing options to adapt to React and ES6 syntax

[0079]

[0080] Use Babel to parse the above code and get AST (simplified representation)

[0081]

[0082]

[0083]

[0084] The above structure is briefly explained as follows:

[0085] CallExpression represents a function call expression, which is the call of useMemo in this scenario;

[0086] callee indicates the function being called, here is useMemo;

[0087] arguments means all the parameters of the useMemo call. In this example, there are two parameters: one is the arrow function () => computeExpensiveValue(count), and the other is the dependency array [count];

[0088] ArrowFunctionExpression represents an arrow function, whose body is a call to computeExpensiveValue, which represents the calculation logic of useMemo;

[0089] CallExpression (in the body of **ArrowFunctionExpression) represents the call of the computation function computeExpensiveValue, whose parameter is count;

[0090] ArrayExpression represents a dependent array, which contains an element count, indicating that memoizedValue depends on the value of count**.

[0091] Step 103, traversing and querying all nodes of the target type in the abstract syntax tree to obtain at least one target node;

[0092] Furthermore, the traversal query of all nodes according to the target type in the abstract syntax tree to obtain at least one target node includes:

[0093] All nodes in the abstract syntax tree are traversed and queried for a target type of CallExpression and a target name of useMemo to obtain at least one target node.

[0094] Among them, CallExpression is the calculation function, and useMemo is the name corresponding to the target node.

[0095] It should be noted that in the embodiment of the present application, in step 103, it is necessary to identify the useMemo call from the AST. Specifically, it is necessary to traverse the entire AST structure to find a node whose target type is CallExpression and whose target name callee is useMemo.

[0096] Step 104, extracting a callback function and a dependency array from each of the target nodes;

[0097] For each useMemo target node found, two main parts are extracted from it: the callback function and the dependency array, where the callback function is located in the first position of the call parameter and the dependency array is located in the second position.

[0098] The callback function body is further analyzed to extract all variables used inside the function body. Finally, the collected information is organized, including the call location of each **useMemo**, the variables used by the callback function, and the elements in the dependency array, to facilitate subsequent analysis and generate warning reports.

[0099] The code implementation logic of the above steps 103-104 includes:

[0100]

[0101]

[0102]

[0103] The meaning of each field in the above structure is as follows:

[0104] useMemoCallLocation indicates the specific location or identifier of the useMemo call in the file;

[0105] callbackVariablesUsed represents a list of all variable names used inside the callback function body;

[0106] dependencies represents the array of dependencies explicitly specified in the useMemo call;

[0107] missingDependencies represents a list of possible missing dependencies identified by analysis.

[0108] Step 105, comparing the used variables in the callback function with the declared variables in the dependency array to obtain missing dependencies;

[0109] It should be noted that in the embodiment of the present application, a comparative analysis of dependencies is performed to identify and mark dependencies that may be missed in the useMemo call.

[0110] Using all the useMemo call information collected in step 104, each item is traversed. For each useMemo call, the variables used in the callback function (callbackVariablesUsed) are compared with the variables declared in the dependency array (dependencies) to find out the variables that are not declared in the dependency array.

[0111] Specifically, the code portion of step 105 above is as follows:

[0112]

[0113] After the above steps, a structured analysis result can be obtained, which includes the dependency information that may be missed for each **useMemo** call:

[0114]

[0115] It should be noted that in the embodiment of the present application, in React, useMemo is a hook that is used to cache calculation results to avoid recalculation every time the component is rendered. The working principle of useMemo is to track the dependencies of its calculation results through the dependencies array. When the value of the dependency changes, useMemo will recalculate its value; if the dependency has not changed, even if the component is re-rendered, useMemo will return the previously calculated result, thereby improving performance.

[0116] Dependencies are variables or values ​​that may affect the calculation results. In useMemo, these dependencies can be passed to the hook as an array. In this way, React will re-execute the useMemo callback function and update the cached value when any of these dependencies changes.

[0117] Step 106: Generate warning information according to the missing dependency.

[0118] It should be noted that, in the embodiment of the present application, each missing dependency is recorded so as to generate detailed warning information.

[0119] Further, generating warning information according to the missing dependency includes:

[0120] The missing dependencies are recorded, and warning information is generated according to the recording results.

[0121] Further, recording the missing dependencies and generating warning information according to the recording results includes:

[0122] Warning information is printed on the console according to the missing dependencies, wherein each piece of the warning information includes the missing dependencies generated by the target node call of the target component.

[0123] The target node is the node whose name is useMemo.

[0124] It should be noted that in the embodiment of the present application, next, for each missing dependency information passed in, the function traverses the array and prints a warning message in the console using the console.warn method. Each warning message will clearly indicate which dependency is missing in which component's useMemo call.

[0125] The specific code is as follows:

[0126]

[0127] Finally, the following warning report will be displayed:

[0128] [useMemo] Missing dependency: data in file ExampleComponent.js line 10

[0129] [useMemo] Missing dependency: id in file AnotherComponent.js line 11.

[0130] It should be noted that in the embodiments of the present application, reference is made to Figure 6 ,pass Figure 6 The steps in the code analysis not only automatically identify potential dependency omissions, but also provide developers with specific feedback to help optimize the code and avoid errors and performance issues caused by incorrect dependencies. This process covers the complete path from code analysis to specific problem feedback, providing developers with a powerful tool to improve their development efficiency and code quality.

[0131] In an embodiment of the present application, the file content in a pre-written code file containing a React component is read; the JavaScript code in the file content is converted into an abstract syntax tree through a parser module; all nodes in the abstract syntax tree are traversed and queried for the target type to obtain at least one target node; callback functions and dependency arrays are extracted from each of the target nodes; missing dependencies are obtained by comparing the used variables in the callback function with the declared variables in the dependency array; and warning information is generated based on the missing dependencies. That is, the embodiment of the present application generates a corresponding abstract syntax tree (AST) by parsing the read code file with a parser, providing a basis for subsequent dependency detection, automatically detecting the inconsistency between the variables used in the callback function and the declared dependency array by traversing the AST and identifying the target node call, accurately identifying the missing dependencies, and generating warning information based on the missing dependencies in the detection results. This precise dependency tracking ensures the accuracy and reliability of the code, thereby improving the overall code quality.

[0132] Figure 2 is a flowchart of a code file detection alarm method provided by an embodiment of the present application, such as Figure 2 As shown, the method includes:

[0133] Step 201, reading the file content in the pre-written code file containing the React component;

[0134] Step 202, converting the JavaScript code in the file content into an abstract syntax tree through a parser module;

[0135] Step 203, traversing and querying all nodes of the target type in the abstract syntax tree to obtain at least one target node;

[0136] Step 204, extracting a callback function and a dependency array from each of the target nodes;

[0137] It should be noted that the above steps 201-204 refer to the previous discussion and will not be repeated here.

[0138] Step 205, analyzing the callback function to obtain all used variables inside the callback function, obtaining the call location corresponding to each target node, and the elements in the dependency array;

[0139] Step 206, for each call of the target node, determining whether all the used variables in the callback function exist in the declared variables in the dependency array;

[0140] It should be noted that there are two situations for the existence of declared variables, one is that it exists in the dependent array, and the other is that it does not exist in the dependent array.

[0141] Therefore, in step 206, it is necessary to find out the declared variables that are not in the dependency array to warn the user, that is, for each target node call, it is determined whether all the used variables in the callback function exist in the declared variables in the dependency array, and then the operation in step 207 is performed on the declared variables that exist in the declared variables that are not in the dependency array.

[0142] Furthermore, the callback function is located at a first preset position of the calling parameter, and the dependency array is located at a second preset position of the calling parameter.

[0143] It should be noted that the useMemo function is called when the program is executed. The first and second positional parameters of the useMemo function are the callback function and the dependency array, respectively. The callback function means the action that will be executed when the dependency changes, which is defined by the user.

[0144] Step 207, if not, treating the used variables other than the declared variables as missing dependencies;

[0145] It should be noted that in the above steps 205-207, a comparative analysis of dependencies is performed to identify and mark dependencies that may be missed in the useMemo call.

[0146] Using all the useMemo call information collected in step 204, each item is traversed. For each useMemo call, the variables used in the callback function (callbackVariablesUsed) are compared with the variables declared in the dependency array (dependencies) to find out the variables that are not declared in the dependency array.

[0147] Step 208: Generate warning information according to the missing dependency.

[0148] It should be noted that the above step 208 is referred to the previous discussion and will not be repeated here.

[0149] The embodiment of the present application parses the read code file with a parser to generate a corresponding abstract syntax tree (AST), thereby providing a basis for subsequent dependency detection. By traversing the AST and identifying the target node call, the inconsistency between the variables used in the callback function and the declared dependency array is automatically detected, and the missing dependencies are accurately identified. Based on the missing dependencies in the detection results, an alarm message is generated. This precise dependency tracking ensures the accuracy and reliability of the code, thereby improving the overall code quality.

[0150] In addition, in the embodiments of the present application, automated dependency detection and warning reporting reduces the time developers spend manually identifying and fixing dependency issues, allowing developers to focus more on the implementation of business logic and improve development efficiency.

[0151] Figure 3 is a flowchart of a code file detection alarm method provided by an embodiment of the present application, such as Figure 3 As shown, the method includes:

[0152] Step 301, concatenate the directory where the currently executed script is located and the file path corresponding to the pre-written code file containing the React component through the second module to obtain an absolute path;

[0153] Step 302: synchronously read the file content specified by the absolute path through the first module.

[0154] It should be noted that in the embodiment of the present application, it is necessary to read a JavaScript file containing a React component, and first introduce two Node.js modules: fs and path. The fs module is used for file system operations, such as reading and writing files, and the path module is used to process file path operations.

[0155] In order to locate this file, you can use the path.join method to concatenate the two partial paths, __dirname (the directory where the currently executed script is located) and the file path, to form an absolute path filePath.

[0156] The fs.readFileSync method is used to read the file content specified by the filePath absolute path variable in a synchronous manner. For example, it can be implemented arbitrarily through code: fs.readFileSync(filePath).

[0157] It should be noted that the Node.js fs.readFileSync() usage and code examples fs.readFileSync() method is a built-in application programming interface of the fs module, which is used to read files and return their contents. In the fs.readFileSync() method, you can read files in a synchronous manner, that is, tell node.js to block other parallel processes and execute the current file reading process.

[0158] Step 303, converting the JavaScript code in the file content into an abstract syntax tree through a parser module;

[0159] Step 304, traverse and query all nodes of the target type in the abstract syntax tree to obtain at least one target node;

[0160] Step 305, extracting the callback function and dependency array from each of the target nodes;

[0161] Step 306, comparing the used variables in the callback function with the declared variables in the dependency array to obtain missing dependencies;

[0162] Step 307: Generate warning information according to the missing dependency.

[0163] It should be noted that the above steps 303-307 refer to the previous discussion and will not be repeated here.

[0164] The embodiment of the present application parses the read code file with a parser to generate a corresponding abstract syntax tree (AST), thereby providing a basis for subsequent dependency detection. By traversing the AST and identifying the target node call, the inconsistency between the variables used in the callback function and the declared dependency array is automatically detected, and the missing dependencies are accurately identified. Based on the missing dependencies in the detection results, an alarm message is generated. This precise dependency tracking ensures the accuracy and reliability of the code, thereby improving the overall code quality.

[0165] In addition, in the embodiments of the present application, by automatically identifying potential dependency issues and providing clear warnings, the technical solution helps developers maintain the clarity and maintainability of the code, which is particularly important in complex projects and large teams.

[0166] In addition, in the embodiments of the present application, for novice developers, the automatic detection and warning reports provided by the solution can be used as a learning tool to help them understand and master the dependency management of React Hooks more quickly.

[0167] Corresponding to the method provided in the above-mentioned code file detection alarm method embodiment of the present application, see Figure 4 The present application also provides a logic block diagram of a code file detection alarm device. In this embodiment, the device 400 includes:

[0168] The reading module 401 is used to read the file content in the pre-written code file containing the React component;

[0169] A conversion module 402, configured to convert the JavaScript code in the file content into an abstract syntax tree through a parser module;

[0170] A traversal query module 403 is used to perform a traversal query on all nodes of a target type in the abstract syntax tree to obtain at least one target node;

[0171] An extraction module 404 is used to extract a callback function and a dependency array from each of the target nodes;

[0172] A comparison module 405 is used to compare the used variables in the callback function with the declared variables in the dependency array to obtain missing dependencies;

[0173] The generating module 406 is used to generate warning information according to the missing dependency.

[0174] Optionally, the comparison module includes:

[0175] A first comparison submodule is used to analyze the callback function to obtain all used variables inside the callback function, obtain the call position corresponding to each target node, and the elements in the dependency array;

[0176] A second comparison submodule is used to determine, for each call of the target node, whether all the used variables in the callback function exist in the declared variables in the dependency array;

[0177] The third comparison submodule is used for, if not, treating the used variables outside the declared variables as missing dependencies.

[0178] Optionally, the comparison module is specifically used for the callback function to be located at a first preset position of the calling parameter, and the dependency array to be located at a second preset position of the calling parameter.

[0179] Optionally, the reading module includes:

[0180] The first reading submodule is used to concatenate the directory where the currently executed script is located and the file path corresponding to the pre-written code file containing the React component through the second module to obtain an absolute path;

[0181] The second reading submodule is used to synchronously read the file content specified by the absolute path through the first module.

[0182] Optionally, the traversal query module includes:

[0183] The traversal query submodule is used to traverse and query all nodes in the abstract syntax tree for a target type of CallExpression and a target name of useMemo to obtain at least one target node.

[0184] Optionally, the generating module includes:

[0185] The generation submodule is used to record the missing dependencies and generate warning information according to the recording results.

[0186] Optionally, the generating submodule includes:

[0187] A generating unit is used to print warning information on a console according to the missing dependency, wherein each piece of the warning information includes the missing dependency generated by the target node call of the target component.

[0188] In summary, the embodiment of the present application provides a code file detection alarm device. The embodiment of the present application parses the read code file with a parser to generate a corresponding abstract syntax tree (AST), which provides a basis for subsequent dependency detection. By traversing the AST and identifying the target node call, the inconsistency between the variables used in the callback function and the declared dependency array is automatically detected, and the missing dependencies are accurately identified. Based on the missing dependencies in the detection results, an alarm message is generated. This precise dependency tracking ensures the accuracy and reliability of the code, thereby improving the overall code quality.

[0189] Figure 5 This is a structural diagram of an electronic device M00 provided in an embodiment of the present application. In the figure, the electronic device M00 includes a processor M01 and a memory M02. The memory M02 stores programs or instructions that can be run on the processor M01. When the program or instruction is executed by the processor M01, the various steps of the above-mentioned code file detection alarm method embodiment are implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0190] In an embodiment of the present application, the memory M02 can be used to store software programs and various data. The memory M02 may mainly include a first storage area for storing programs or instructions and a second storage area for storing data, wherein the first storage area may store an operating system, an application program or instructions required for at least one function (such as a sound playback function, an image playback function, etc.), etc. In addition, the memory M02 may include a volatile memory or a non-volatile memory, or the memory x09 may include both volatile and non-volatile memories. Among them, the non-volatile memory may be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory may be a random access memory (RAM), a static random access memory (SRAM), a dynamic random access memory (DRAM), a synchronous dynamic random access memory (SDRAM), a double data rate synchronous dynamic random access memory (DDRSDRAM), an enhanced synchronous dynamic random access memory (ESDRAM), a synchronous link dynamic random access memory (SLDRAM) and a direct memory bus random access memory (DRRAM). The memory M02 in the embodiment of the present application includes but is not limited to these and any other suitable types of memories.

[0191] The processor M01 may include one or more processing units; optionally, the processor M01 integrates an application processor and a modem processor, wherein the application processor mainly processes operations related to an operating system, a user interface, and application programs, and the modem processor mainly processes wireless communication signals, such as a baseband processor. It is understandable that the modem processor may not be integrated into the processor M01.

[0192] An embodiment of the present application also provides a readable storage medium, on which a program or instruction is stored. When the program or instruction is executed by a processor, each process of the above-mentioned code file detection alarm method embodiment is implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0193] The processor is the processor in the electronic device described in the above embodiment. The readable storage medium includes a computer readable storage medium, such as a computer read-only memory ROM, a random access memory RAM, a magnetic disk or an optical disk.

[0194] An embodiment of the present application further provides a chip, which includes a processor and a communication interface, wherein the communication interface is coupled to the processor, and the processor is used to run programs or instructions to implement the various processes of the above-mentioned code file detection alarm method embodiment, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0195] It should be understood that the chip involved in the embodiments of the present application can also be called a system-level chip, a system chip, a chip system or a system-on-chip chip, etc.

[0196] An embodiment of the present application provides a computer program product, which is stored in a storage medium. The program product is executed by at least one processor to implement the various processes of the above-mentioned code file detection alarm method embodiment, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0197] It should be noted that, in this article, the term "comprises", "includes" or any other variant thereof is intended to cover non-exclusive inclusion, so that the process, method, article or device including a series of elements includes not only those elements, but also includes other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "including one..." do not exclude the presence of other identical elements in the process, method, article or device including the element. In addition, it should be pointed out that the scope of the method and device in the embodiment of the present application is not limited to performing functions in the order shown or discussed, and may also include performing functions in a substantially simultaneous manner or in reverse order according to the functions involved, for example, the described method may be performed in an order different from that described, and various steps may also be added, omitted, or combined. In addition, the features described with reference to certain examples may be combined in other examples.

[0198] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the relevant technology, can be embodied in the form of a computer software product, which is stored in a storage medium (such as ROM / RAM, a disk, or an optical disk), and includes a number of instructions for a terminal (which can be a mobile phone, a computer, a server, or a network device, etc.) to execute the methods described in each embodiment of the present application.

[0199] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of the present application, ordinary technicians in this field can also make many forms without departing from the purpose of the present application and the scope of protection of the claims, all of which are within the protection of the present application.

Claims

1. A code file detection alarm method, characterized in that: The method comprises: Read the file contents of a pre-written code file containing a React component; Convert the JavaScript code in the file content into an abstract syntax tree through a parser module; Traversing and querying all nodes of the target type in the abstract syntax tree to obtain at least one target node, where the target node is a node whose target type is CallExpression and whose target name is useMemo, and the target name indicates a name of a called function; Extracting callback functions and dependency arrays from each of the target nodes; Comparing the used variables in the callback function with the declared variables in the dependency array to obtain missing dependencies, where the missing dependencies are the used variables other than the declared variables; Generate warning information based on the missing dependency.

2. The method according to claim 1, characterized in that: The missing dependencies obtained by comparing the used variables in the callback function with the declared variables in the dependency array include: Analyze the callback function to obtain all used variables inside the callback function, obtain the call location corresponding to each target node, and the elements in the dependency array; For each call of the target node, determining whether all the used variables in the callback function exist in the declared variables in the dependency array; If not, the used variables outside of the declared variables are treated as missing dependencies.

3. The method according to claim 2, characterized in that The callback function is located at a first preset position of the calling parameter, and the dependency array is located at a second preset position of the calling parameter.

4. The method according to claim 1, characterized in that The reading of the file content in the pre-written code file containing the React component includes: The directory where the currently executed script is located and the file path corresponding to the pre-written code file containing the React component are concatenated by the second module to obtain an absolute path; The file content specified by the absolute path is synchronously read through the first module.

5. The method according to claim 1, characterized in that The traversing and querying all nodes in the abstract syntax tree for the target type to obtain at least one target node includes: All nodes in the abstract syntax tree are traversed and queried for a target type of CallExpression and a target name of useMemo to obtain at least one target node.

6. The method according to claim 1, characterized in that The generating of warning information according to the missing dependency includes: The missing dependencies are recorded, and warning information is generated according to the recording results.

7. The method according to claim 6, characterized in that The recording of the missing dependencies and generating warning information according to the recording results includes: Warning information is printed on the console according to the missing dependencies, wherein each piece of the warning information includes the missing dependencies generated by the target node call of the target component.

8. A code file detection alarm device, characterized in that: The device comprises: The reading module is used to read the file contents in the pre-written code files containing React components; A conversion module, used for converting the JavaScript code in the file content into an abstract syntax tree through a parser module; A traversal query module, used to perform a traversal query on all nodes of a target type in the abstract syntax tree to obtain at least one target node, wherein the target node is a node whose target type is CallExpression and whose target name is useMemo, and the target name indicates a name of a called function; An extraction module, used for extracting a callback function and a dependency array from each of the target nodes; A comparison module, used for comparing the used variables in the callback function with the declared variables in the dependency array to obtain missing dependencies, where the missing dependencies are the used variables other than the declared variables; A generating module is used to generate warning information according to the missing dependency.

9. An electronic device, characterized in that: include: processor; a memory for storing instructions executable by the processor; The processor is configured to execute the instructions to implement the code file detection and alarm method as described in any one of claims 1 to 7.

10. A storage medium, characterized in that: When the instructions in the storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the code file detection alarm method as described in any one of claims 1 to 7.

Images