Front-end variable exception detection and repair method, device, equipment and storage medium

Abstract

The application relates to an artificial intelligence technology, and discloses a front-end variable abnormality detection and repair method, which comprises the following steps: constructing a variable abnormality detection and repair project of a front-end project, finding out a component to be repaired from the front-end project according to the variable abnormality detection and repair project, identifying an abnormal variable in the component to be repaired, and identifying a variable value type of the abnormal variable; performing cumulative operation deletion processing on the abnormal variable whose variable value type is identified as a number type; performing array conversion processing on the abnormal variable whose variable value type is identified as an array type; and performing attribute extension processing on the abnormal variable whose variable value type is identified as an object type. In addition, the application also relates to a blockchain technology, and the front-end project can be obtained from a node of the blockchain. The application further provides a front-end variable abnormality detection and repair device, an electronic device and a readable storage medium. The application can solve the problem of low variable abnormality detection and repair efficiency.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of artificial intelligence, and in particular to a front-end variable abnormality detection and repair method and device, electronic equipment and a readable storage medium. BACKGROUND

[0002] At present, the mainstream framework in the front-end development process is mainly vue and react, and domestic small and medium-sized companies mainly use vue framework, because the vue framework is relatively easy to learn and easy to start and quickly develop. React framework requires learning more framework basic knowledge and more advanced design ideas, so it is mainly active in the projects of medium and large companies. In the development process of the react framework, the writing method of the code triggered by the modification of the variable to update the view is obviously different from that of the vue framework, mainly in the processing of arrays and objects. The vue framework can directly modify the original variable by adding, deleting, inserting and other operations. The react framework adopts the concept of pure functional programming, and the variable setting cannot be directly added, deleted, inserted and other operations that will affect the original data itself, and needs to be set through the unique method of the framework. For many developers, especially those who develop vue and react framework projects at the same time or those who switch from vue framework projects to react framework projects, it is very easy to write react variable setting code with inherent ideas, and through the error code writing process, the console does not report an error and there is no exception warning reminder, and the function can still be normal in some scenarios. Therefore, the function may be abnormal due to the non-standard writing method of the variable setting in the react framework, which is finally published to the production.

[0003] At present, the solution to this problem mainly stays in increasing the skill training of the developers or manually checking and repairing the variables afterwards, which not only requires the developers to invest certain energy to always remember the coding specifications, but also has low variable detection and repair efficiency. SUMMARY

[0004] The present application provides a front-end variable abnormality detection and repair method, device, electronic equipment and readable storage medium, which mainly aims to solve the problem of low variable abnormality detection and repair efficiency.

[0005] To achieve the above purpose, the present application provides a front-end variable abnormality detection and repair method, which comprises:

[0006] A variable abnormality detection and repair project of a front-end project is constructed, and a to-be-repaired component is found from the front-end project according to the variable abnormality detection and repair project;

[0007] identifying an abnormal variable in the component to be repaired, and identifying a variable value type of the abnormal variable;

[0008] performing cumulative operation deletion processing on the abnormal variable whose variable value type is identified as a number type;

[0009] performing array conversion processing on the abnormal variable whose variable value type is identified as an array type;

[0010] performing attribute extension processing on the abnormal variable whose variable value type is identified as an object type.

[0011] Optionally, the variable abnormality detection and repair project for building the front-end project comprises:

[0012] locating a root directory of the front-end project, and adding a variable abnormality detection and repair tool in the root directory;

[0013] setting a detection configuration file in the variable abnormality detection and repair tool, adding a component repair command in the root directory after adding the detection configuration file, executing the component repair command, and obtaining the variable abnormality detection and repair project.

[0014] Optionally, the variable abnormality detection and repair project for building the front-end project comprises:

[0015] traversing a project directory of the front-end project according to the variable abnormality detection and repair project;

[0016] finding out files containing a preset suffix from the traversed project directory as a target file set;

[0017] extracting the component to be repaired in the target file set by using a preset multi-round keyword retrieval method.

[0018] Optionally, the variable abnormality detection and repair project for building the front-end project comprises:

[0019] traversing the target files in the target file set one by one, and finding out whether the traversed target file contains a preset import keyword;

[0020] if the target file does not contain the import keyword, returning to the step of traversing the target files in the target file set one by one;

[0021] if the target file contains the import keyword, finding out whether the target file contains a preset declaration keyword;

[0022] If the target file does not contain the preset declaration keyword, returning the step of traversing the target files in the target file set one by one;

[0023] If the target file contains the declaration keyword, searching whether the target file contains a preset variable setting keyword;

[0024] If the target file does not contain the variable setting keyword, returning the step of traversing the target files in the target file set one by one;

[0025] If the target file contains the variable setting keyword, determining that the current target file is the component to be repaired, and returning the step of traversing the target files in the target file set one by one until the target files in the target file set are traversed.

[0026] Optionally, the identifying the abnormal variable in the component to be repaired comprises:

[0027] extracting a variable container in the component to be repaired;

[0028] determining that a variable in the variable container that is reset is the abnormal variable.

[0029] Optionally, the array conversion processing on the abnormal variable whose variable value type is identified as an array type comprises:

[0030] identifying an array calling method of the abnormal variable of the array type and deleting the abnormal variable;

[0031] setting a preset array replacement method in the deleted abnormal variable.

[0032] Optionally, the attribute extension processing on the abnormal variable whose variable value type is identified as an object type comprises:

[0033] judging whether the abnormal variable of the object type exists an object direct attribute adding operation;

[0034] if the abnormal variable of the object type does not exist the object direct attribute adding operation, not processing the abnormal variable;

[0035] if the abnormal variable of the object type exists the object direct attribute adding operation, constructing an empty object, adding an attribute to be added to the empty object, and performing object merging processing on the empty object to which the attribute is added.

[0036] In order to solve the above problems, the application further provides a front-end variable abnormality detection and repair device, which comprises:

[0037] The detection repair project construction module is used for constructing a variable abnormality detection and repair project of a front-end project, and finding out a component to be repaired from the front-end project according to the variable abnormality detection and repair project.

[0038] The variable abnormality detection module is used for identifying an abnormal variable in the component to be repaired, and identifying a variable value type of the abnormal variable.

[0039] The abnormal variable repair module is used for performing cumulative operation deletion processing on the abnormal variable whose variable value type is identified as a number type, performing array conversion processing on the abnormal variable whose variable value type is identified as an array type, and performing attribute extension processing on the abnormal variable whose variable value type is identified as an object type.

[0040] To solve the above problems, the application further provides an electronic device, which comprises:

[0041] A memory for storing at least one computer program; and

[0042] A processor for executing the computer program stored in the memory to implement the front-end variable abnormality detection and repair method.

[0043] To solve the above problems, the application further provides a computer readable storage medium, which stores at least one computer program, and the at least one computer program is executed by a processor in an electronic device to implement the front-end variable abnormality detection and repair method.

[0044] The application directly constructs an abnormality detection and repair project in a front-end project, only needs to introduce the abnormality detection and repair project into the current front-end project, automatically analyzes and identifies abnormal variables in all development files, and performs corresponding repair processing according to the types of the abnormal variables. Meanwhile, since the abnormal variables are automatically identified and repaired in the front-end project, the developer does not need to master related knowledge and technology, saves time and energy spent on manually checking abnormal variables and repairing, avoids possible omission in the manual checking process, and greatly improves the efficiency of variable abnormality detection and repair. Therefore, the front-end variable abnormality detection and repair method, device, electronic device and computer readable storage medium provided by the application can solve the problem of low variable abnormality detection and repair efficiency. BRIEF DESCRIPTION OF DRAWINGS

[0045] Figure 1 A flowchart of a front-end variable abnormality detection and repair method provided by an embodiment of the application is shown in the figure;

[0046] Figure 2 A detailed implementation flowchart of one step in the figure is shown in the figure; Figure 1 ​

[0047] Figure 3 For Figure 1 Detailed implementation flowchart of another step in the method;

[0048] Figure 4 For Figure 1 Detailed implementation flowchart of another step in the method;

[0049] Figure 5 For Figure 1 Detailed implementation flowchart of another step in the method;

[0050] Figure 6 Functional module diagram of the front-end variable exception detection and repair device provided by an embodiment of the application;

[0051] Figure 7 Structural schematic diagram of an electronic device for implementing the front-end variable exception detection and repair method provided by an embodiment of the application.

[0052] The implementation, functional features and advantages of the application will be further described with reference to the embodiments and the accompanying drawings. DETAILED DESCRIPTION

[0053] It should be understood that the specific embodiments described herein are merely intended to explain the application, and are not intended to limit the application.

[0054] An embodiment of the application provides a front-end variable exception detection and repair method. An execution subject of the front-end variable exception detection and repair method includes but is not limited to at least one of a server, a terminal and the like, which can be configured to execute the method provided by the embodiment of the application. In other words, the front-end variable exception detection and repair method can be executed by software or hardware installed in a terminal device or a server device, and the software can be a blockchain platform. The server includes but is not limited to a single server, a server cluster, a cloud server or a cloud server cluster, etc. The server can be a stand-alone server, or a cloud server providing cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content distribution networks (CDN), and big data and artificial intelligence platforms, etc. basic cloud computing services.

[0055] Referring to Figure 1 The flowchart of the front-end variable exception detection and repair method provided by an embodiment of the application is shown. In this embodiment, the front-end variable exception detection and repair method includes the following steps S1-S5:

[0056] S1, a variable exception detection and repair project of a front-end project is constructed, and a component to be repaired is found from the front-end project according to the variable exception detection and repair project.

[0057] In the embodiment of the application, the front-end project refers to a project for realizing user interface interaction of an Internet product through HTML, CSS and JavaScript and various technologies, frameworks and solutions derived therefrom, for example, an XX app development project, an XX company website development project, an XX product page development project, an XX applet development project and the like.

[0058] In detail, as shown in Figure 2 The variable exception detection and repair project of the front-end project includes the following steps S10-S11:

[0059] S10, a root directory of the front-end project is located, and a variable exception detection and repair tool is added in the root directory;

[0060] S11, a detection configuration file is set in the variable exception detection and repair tool, a component repair command is added in the root directory after the detection configuration file is added, the component repair command is executed, and the variable exception detection and repair project is obtained.

[0061] In the embodiment of the application, the variable exception detection and repair project is used to perform the steps of S2 to S5 below in the front-end page to perform exception detection and repair on variable settings in a Class component of a react framework. For example, in the command line (terminal for mac system), the root directory of the current front-end project is located, and the command npmisetState-scan-repair-tools-D is executed. Then, the variable exception detection and repair tool can be added to the current framework project, the detection configuration file config.js is set, the component optimization command npm run scan-and-repair is added in the detection configuration file and executed, and the variable exception detection and repair project is obtained. The configuration content in the detection configuration file includes a directory address of a current development file and the like.

[0062] In detail, the component to be repaired is found from the front-end project according to the variable exception detection and repair project, including:

[0063] The project directory of the front-end project is traversed according to the variable exception detection and repair project;

[0064] The files containing preset suffixes are found from the traversed project directory as a target file set;

[0065] The component to be repaired in the target file set is extracted by using a preset multi-round keyword retrieval method.

[0066] In an optional embodiment of the present application, according to the configuration item configured in the detection configuration file config.js in the variable exception detection and repair project: the directory address of the current development file, the project directory of the front-end project is traversed, and the component directory is found from the directory of the project development file, and the file including the address ending with the suffix.js is taken as the target file set.

[0067] In an optional embodiment of the present application, the variable exception detection and repair project is used for variable exception detection and repair of class components written in the react framework.

[0068] In detail, the target file set is extracted by using the preset multi-round keyword retrieval method, including:

[0069] The target files in the target file set are traversed one by one, and it is found whether the target file traversed contains a preset import keyword;

[0070] If the target file does not contain the import keyword, the step of traversing the target files in the target file set one by one is returned;

[0071] If the target file contains the import keyword, it is found whether the target file contains a preset declaration keyword;

[0072] If the target file does not contain the preset declaration keyword, the step of traversing the target files in the target file set one by one is returned;

[0073] If the target file contains the declaration keyword, it is found whether the target file contains a preset variable setting keyword;

[0074] If the target file does not contain the variable setting keyword, the step of traversing the target files in the target file set one by one is returned;

[0075] If the target file contains the variable setting keyword, it is determined that the current target file is the component to be repaired, and the step of traversing the target files in the target file set one by one is returned, until the target files in the target file set are traversed.

[0076] In an optional embodiment of the present application, since variable setting only appears in class components written in react, and class components are also through the file ending with.js, it is necessary to identify class components through the following steps:

[0077] 1.1, judge whether the current target file exists in the beginning of the code, through the import keyword (import keyword), the react library is introduced into the current file, for example, import React from'react'. If it does not exist, it means that the file does not belong to the react component, and the next.js end file is directly judged until all.js end files are judged, if it exists, step 1.2 is performed to judge;

[0078] 1.2, judge whether the current target file exists, through the class keyword (declaration keyword), a class is declared, and the class inherits the Component component class of the react framework, for example, class A extendsReact.component{component declaration content}, wherein A is the declared component name, and React.component is the Component component class of the react framework. If it does not exist, it means that the file is not a class component declaration file, and the next.js end file is directly judged until all.js end files are judged, if it exists, it means that the current file belongs to a class component, and step 1.3 is performed to judge whether the variable is used.

[0079] 1.3, judge whether the code in the content of the declaration of the component (i.e. the component declaration content wrapped in the curly braces in the example in step 1.2) in the current target file contains the constructor function initialized and executed, whether there is a variable initialization setting through the this keyword (variable setting keyword) in the code, such as this.state={variable initial setting content}, wherein state is a container for storing current component variables of all react framework class components. If it does not exist, it means that the current component does not use variables, and the next.js end file is directly judged until all.js end files are judged, if it exists, it means that the current component uses variables, and step 1.4 is performed to judge whether there is a variable setting operation after initialization;

[0080] 1.4, find whether there is a keyword setState in the content of the component declaration in the current file, if it exists, it means that the current component has a variable setting operation after the initialization of the variable, which meets the scanning conditions of the application, and is determined as a component to be repaired. If it does not exist, the next.js end file is directly judged until all.js end files are judged.

[0081] S2, identify the abnormal variable in the component to be repaired, and identify the variable value type of the abnormal variable.

[0082] In the embodiment of the present application, the abnormal variable that does not conform to the specification often appears in the variable that is reset, and therefore further identification of the abnormal variable is required.

[0083] Specifically, referring to Figure 3 As shown in the figure, the identification of the abnormal variable in the component to be repaired includes the following steps S20-S21:

[0084] S20, extracting the variable container in the component to be repaired;

[0085] S21, determining the variable that is reset in the variable container as the abnormal variable.

[0086] In an optional embodiment of the present application, the variable container of the defined component in the current file is obtained, that is, the state object in step 1.3. Each variable in the object is traversed to check whether the single variable currently traversed and obtained is included in the object parameter passed in by calling the setState method. For example, the variable currently processed is variable A, and there is a through statement such as this.setState({variable A: new value of variable A}), which indicates that the variable A is re-assigned to the new value of the variable A. It is indicated that the variable has been reset, and the variable that is reset is determined as the abnormal variable.

[0087] In an optional embodiment of the present application, the abnormal variable that does not conform to the specification can be judged by the Object.prototype.toString method to determine the data type of the variable value of the abnormal variable, which mainly includes three types, that is, the number, array and object types.

[0088] S3, performing accumulation operation deletion processing on the abnormal variable whose variable value type is identified as the number type.

[0089] In the embodiment of the present application, for the variable value type belonging to the number type, it is first judged whether the new value of the set variable is the variable itself, such as this.state.variable A. It is required to find whether there is a variable modification operation behavior of accumulation or reduction by an operation operator in the front code of the setState method. For example, this.state.variable A++, which indicates that the variable A is directly accumulated; this.state.variable A--, which indicates that the variable A is directly accumulated. These two cases are not allowed because the variable itself will be directly modified. When the subsequent processing is performed by the setState method, the comparison of the front and rear values by the framework will be consistent, which finally leads to that the component is not refreshed, the page display is abnormal, and therefore the abnormal variable repair is required.

[0090] Wherein, in the digital type of exception variable repair, when calling the setState method, the code for setting the new value of the variable is changed from directly referring to the value itself to the value itself plus 1 or minus 1 (determined according to whether the cumulative or cumulative operator is used). For example, the new value of variable A should be changed from this.state.variable A to this.state.variable A+1 or this.state.variable A-1. And the whole line of code for directly adding or subtracting the variable in the code before calling the setState method is deleted.

[0091] S4, the array conversion processing of the exception variable whose variable value type is identified as an array type is performed.

[0092] In the embodiment of the application, since the array can use multiple methods to call elements, including: push method, pop method, unshift method and shift method, it is necessary to perform corresponding array conversion on different array calling methods.

[0093] Further, referring to Figure 4 As shown in the figure, the array conversion processing of the exception variable whose variable value type is identified as an array type includes the following steps S40-S41:

[0094] S40, identify the array calling method of the exception variable of the array type and delete it;

[0095] S41, set a preset array replacement method in the deleted exception variable.

[0096] In an optional embodiment of the application, for the case of using the push method:

[0097] 4.11, judge whether the push method for adding array elements to the array is used to set the new value of the variable, such as this.setState({array B: array B.push(new element C)}), which indicates that the array B of the array type is added with a new element C. Due to the use of the push method, the original array B will be directly changed, which will cause the data of array B before and after the execution of the setState method to be found to be unchanged, and the react framework bottom layer will be determined to have no change, resulting in that the view of the component is not updated;

[0098] 4.12, for the code originally using the push method, first extract the input parameter when calling the push method, and then delete the original code for calling the push method and replace it with the concat method and the extracted input parameter. For example, array B.push(new element C) needs to be changed to array B.concat(new element C).

[0099] For the case of using pop method:

[0100] 4.21, judge whether the new value of the setting variable is the variable itself. For example, this.state.arrayD, you need to judge whether there is an operation of deleting the last element of the array using the pop method in the previous code of calling the setState method. For example, this.state.arrayD.pop(), which means deleting the last element of arrayD. Since the pop method is used, the original arrayD will be directly changed, which will cause the component content to be updated when the setState method is executed. It is found that there is no change in the data of arrayD before and after, which will be judged by the bottom layer of the react framework as no change, and finally the view of the component is not updated;

[0101] 4.22, by changing the code of deleting the original pop method operation, and then setting the value of the new variable when calling the setState method, the code of directly referencing the value itself is changed to using the slice method to intercept the first to the second last element operation, for example, this.setState({arrayD:this.state.arrayD.pop()}), which is changed to this.setState({arrayD:this.state.arrayD.slice(0,-1)}).

[0102] For the case of using unshift method:

[0103] 4.31, judge whether the new value of the setting variable is the variable itself. For example, this.state.arrayE, you need to judge whether there is an operation of adding an element to the beginning of the array using the unshift method in the previous code of calling the setState method. For example, this.state.arrayE.unshift(elementF), which means adding an element F to the beginning of arrayE. Since the unshift method is used, the original arrayE will be directly changed, which will cause the component content to be updated when the setState method is executed. It is found that there is no change in the data of arrayE before and after, which will be judged by the bottom layer of the react framework as no change, and finally the view of the component is not updated;

[0104] 4.32. First, extract the input parameter passed when calling the unshift method and put it into a newly created empty array G. Then, delete the original code that calls the unshift method and replace it with array G calling the concat method, passing array E as the input parameter. For example, this.setState({array E: this.state.array E.unshift(element F)) is changed to this.setState({array E: array G.concat.(array E)}).

[0105] For cases where the shift method is used:

[0106] 4.41. Determine if the new value of a variable is the variable itself. For example, if `this.state.arrayH`, then in the code before calling the `setState` method, you need to check if the `shift` method was used to remove an element from the beginning of the array. For example, `this.state.arrayH.shift()` means removing the first element from array H. Because the use of the `shift` method directly changes the original array H, when the `setState` method is executed and the component content needs to be updated, it will find that the data in array H has not changed before and after. The React framework will judge that there has been no change, ultimately resulting in the component's view not updating.

[0107] 4.42. By deleting the code that originally used the shift method, and then changing the code that sets the value of the new variable when calling the setState method from directly referencing its value itself, such as this.setState({array H: this.state.array H.shift()), to this.setState({array H: this.state.array H.slice(1)).

[0108] S5. Perform attribute expansion processing on abnormal variables whose value type is identified as an object type.

[0109] For details, refer to Figure 5 As shown, the attribute expansion processing for abnormal variables whose value type is identified as object type includes the following steps S50-S52:

[0110] S50. Determine if an exception variable of an object type exists; directly add attributes to the object.

[0111] S51. If an exception variable of an object type does not exist, and the object is directly added to an attribute, then the exception variable will not be processed.

[0112] S52, if the object type abnormal variable exists object direct addition attribute operation, build empty object, add the attribute to be added to the empty object, and perform object merging processing on the empty object after adding the attribute.

[0113] In an optional embodiment of the present application, for the scenario where the value type of the variable belongs to the object:

[0114] 5.1, judge whether the new value of the set variable is the variable itself. For example, this.state.object J, it is necessary to judge whether there is an operation of directly adding an attribute to the object in the front code of the call to the setState method. For example, this.state.object J.attribute A=111, which means adding attribute A to object J and setting the value of attribute A to 111. This way of directly adding attributes to the object will change the original object, which will cause the component content to be updated when the setState method is executed, and the data of object J before and after the change will not be changed, which will be determined by the react framework bottom layer as no change, and finally the view of the component will not be updated.

[0115] 5.2, create an empty object, and place the attribute to be added (i.e. attribute A in 5.1) into the empty object, such as {attribute A: 111}

[0116] 5.3, when calling the setState method, change the code for setting the value of the new variable from directly referencing the value itself to using the Object.assign method. When calling this method, three parameters need to be passed in. The first parameter is an empty object, indicating that a new object is created. The second parameter is the object itself that needs to be extended, i.e. object J in the example. The third parameter is the object created in step 5.2. This way is equivalent to merging the newly created object, the object that needs to be extended, and the object that only contains the extended attribute into a new object, so that the original object will not be modified when adding attributes to the object.

[0117] In another optional embodiment of the present application, after checking the abnormal files and repairing them, the specific files and the line of code in which the tool automatically repaired the operation are printed in the console, which facilitates the developer to subsequently troubleshoot and reminds the developer to avoid such syntax error usage in the future, thereby improving the development efficiency.

[0118] The application constructs an exception detection and repair project in a front-end project, and only needs to introduce the exception detection and repair project into the current front-end project to automatically analyze and identify the exception variables in all development files and perform corresponding repair processing according to the types of the exception variables. Meanwhile, since the exception variables are automatically identified and repaired in the front-end project, the developer does not need to master related knowledge and technology, the time and energy spent on manually checking the exception variables and repairing are saved, and the missed scenarios in the manual checking process are avoided, so that the efficiency of variable exception detection and repair is greatly improved. Therefore, the front-end variable exception detection and repair method provided by the application can solve the problem of low efficiency of variable exception detection and repair.

[0119] As Figure 6 shown, it is a functional module diagram of a front-end variable exception detection and repair device provided by an embodiment of the application.

[0120] The front-end variable exception detection and repair device 100 can be installed in an electronic device. According to the implemented functions, the front-end variable exception detection and repair device 100 can include a detection repair project construction module 101, a variable exception detection module 102, and an exception variable repair module 103. The modules of the application can also be referred to as units, which refer to a series of computer program segments that can be executed by an electronic device processor and can complete a fixed function, and are stored in the memory of the electronic device.

[0121] In this embodiment, the functions of each module / unit are as follows:

[0122] The detection repair project construction module 101 is used to construct a variable exception detection and repair project of a front-end project, and find out a component to be repaired from the front-end project according to the variable exception detection and repair project;

[0123] The variable exception detection module 102 is used to identify an exception variable in the component to be repaired and identify the variable value type of the exception variable;

[0124] The exception variable repair module 103 is used to perform cumulative operation deletion processing on the exception variable whose variable value type is identified as a number type, perform array conversion processing on the exception variable whose variable value type is identified as an array type, and perform attribute extension processing on the exception variable whose variable value type is identified as an object type.

[0125] In detail, the specific implementation of each module of the front-end variable exception detection and repair device 100 is as follows:

[0126] Step one, construct a variable exception detection and repair project of a front-end project, and find out a component to be repaired from the front-end project according to the variable exception detection and repair project.

[0127] In the embodiment of the present application, the front-end project refers to a project for realizing the user interface interaction of an Internet product through HTML, CSS and JavaScript and various technologies, frameworks, solutions derived therefrom, for example, an XX app development project, an XX company website development project, an XX product page development project, an XX applet development project, etc.

[0128] In detail, the variable exception detection and repair project for constructing the front-end project comprises:

[0129] locating a root directory of the front-end project, and adding a variable exception detection and repair tool in the root directory;

[0130] setting a detection configuration file in the variable exception detection and repair tool, adding a component repair command in the root directory after adding the detection configuration file, executing the component repair command, and obtaining the variable exception detection and repair project.

[0131] In the embodiment of the present application, the variable exception detection and repair project is used to perform the following steps in the front-end page to perform exception detection and repair on the variable setting in the Class component of the react framework. For example, locating the root directory of the current front-end project in the command line (terminal for mac system), executing the command: npmisetState-scan-repair-tools-D, then the variable exception detection and repair tool can be added to the current framework project, a detection configuration file config.js is set, a component optimization command: npm run scan-and-repair is added in the detection configuration file and executed, and the variable exception detection and repair project is obtained, wherein the configuration content in the detection configuration file includes the directory address of the current development file and the like.

[0132] In detail, the variable exception detection and repair project comprises:

[0133] traversing the project directory of the front-end project according to the variable exception detection and repair project;

[0134] finding out files containing a preset suffix from the traversed project directory as a target file set;

[0135] extracting the to-be-repaired component in the target file set by using a preset multi-round keyword retrieval method.

[0136] In an optional embodiment of the present application, according to the configuration item configured in the detection configuration file config.js in the variable exception detection and repair project: the directory address of the current development file, the project directory of the front-end project is traversed, and the component directory is found from the directory of the project development file, and the file including the address ending with the suffix.js is taken as the target file set.

[0137] In an optional embodiment of the present application, the variable exception detection and repair project is used for variable exception detection and repair of class components written in the react framework.

[0138] In detail, the target file set is extracted by using the preset multi-round keyword retrieval method, including:

[0139] The target files in the target file set are traversed one by one, and it is found whether the target file traversed contains a preset import keyword;

[0140] If the target file does not contain the import keyword, the step of traversing the target files in the target file set one by one is returned;

[0141] If the target file contains the import keyword, it is found whether the target file contains a preset declaration keyword;

[0142] If the target file does not contain the preset declaration keyword, the step of traversing the target files in the target file set one by one is returned;

[0143] If the target file contains the declaration keyword, it is found whether the target file contains a preset variable setting keyword;

[0144] If the target file does not contain the variable setting keyword, the step of traversing the target files in the target file set one by one is returned;

[0145] If the target file contains the variable setting keyword, it is determined that the current target file is the component to be repaired, and the step of traversing the target files in the target file set one by one is returned, until the target files in the target file set are traversed.

[0146] In an optional embodiment of the present application, since variable setting only appears in class components written in react, and class components are also through the suffix.js file, it is necessary to identify class components through the following steps:

[0147] 1.1, judge whether the current target file exists in the beginning of the code through the import keyword (import keyword) to introduce the react library into the current file, for example, import React from'react'. If it does not exist, it means that the file does not belong to the react component, and the next.js end file is directly judged until all.js end files are judged, if it exists, step 1.2 is performed to judge;

[0148] 1.2, judge whether the current target file exists through the class keyword (declaration keyword) to declare a class, and the class inherits the Component component class of the react framework, for example, class A extendsReact.component{component declaration content}, wherein A is the declared component name, and React.component is the Component component class of the react framework. If it does not exist, it means that the file is not a class component declaration file, and the next.js end file is directly judged until all.js end files are judged, if it exists, it means that the current file belongs to a class component, and step 1.3 is performed to judge whether the variable is used.

[0149] 1.3, judge whether the code in the content of the declaration of the component (i.e. the component declaration content wrapped in the curly braces in the example in step 1.2) in the current target file contains the constructor function initialized and executed, whether there is a variable initialization setting through the this keyword (variable setting keyword) in the constructor function, such as this.state={variable initial setting content}, wherein state is a container for storing current component variables of all react framework class components. If it does not exist, it means that the current component does not use variables, and the next.js end file is directly judged until all.js end files are judged, if it exists, it means that the current component uses variables, and step 1.4 is performed to judge whether there is a variable setting operation after initialization;

[0150] 1.4, find whether there is a keyword setState in the content of the component declaration in the current file, if it exists, it means that the current component has a variable setting operation after the initialization of the variable, which meets the scanning conditions of the application, and is determined as a component to be repaired. If it does not exist, the next.js end file is directly judged until all.js end files are judged.

[0151] Step two, identifying the abnormal variable in the component to be repaired, and identifying the variable value type of the abnormal variable.

[0152] In the embodiment of the application, the abnormal variable that does not conform to the specification often appears in the variable that is reset, and therefore further identification of the abnormal variable is required.

[0153] Specifically, the identification of the abnormal variable in the component to be repaired includes the following steps S20-S21:

[0154] Extracting the variable container in the component to be repaired;

[0155] Determining the variable that is reset in the variable container as the abnormal variable.

[0156] In an optional embodiment of the application, the variable container of the component defined in the current file is obtained, that is, the state object in step 1.3. Each variable in the object is traversed to check whether the single variable currently traversed is included in the object parameter passed in by calling the setState method. For example, the variable currently processed is variable A, and there is a through statement such as this.setState({variable A: new value of variable A}) indicating that the variable A is re-assigned to the new value of the variable A, which indicates that the variable is reset, and the variable that is reset is determined as the abnormal variable.

[0157] In an optional embodiment of the application, the abnormal variable that does not conform to the specification can be judged by the Object.prototype.toString method to determine the data type of the variable value of the abnormal variable, which mainly includes three types, that is, the number, array and object types.

[0158] Step three, performing accumulation operation deletion processing on the abnormal variable whose variable value type is identified as the number type.

[0159] In the embodiment of the application, for the value type of the variable belonging to the number type, it is first judged whether the new value of the set variable is the variable itself, such as this.state.variable A, and whether there is a variable modification operation behavior of accumulation or reduction by an operation operator in the front code of the setState method. For example, this.state.variable A++, which indicates that the variable A is directly accumulated; this.state.variable A--, which indicates that the variable A is directly accumulated. These two cases are not allowed because the variable itself is directly modified, and the comparison of the front and rear values by the framework during the processing by the setState method is consistent, which finally causes the component not to be refreshed, the page display to be abnormal, and therefore the abnormal variable repair is required.

[0160] Wherein, in the exception variable repair of the digital type, when calling the setState method, the code for setting the new value of the variable is changed from directly referring to the value itself to the value itself plus 1 or minus 1 (determined according to whether the cumulative or cumulative operator is used). For example, the new value of variable A should be changed from this.state.variable A to this.state.variable A+1 or this.state.variable A-1. And the whole line of code for directly performing cumulative or cumulative operation on the variable in the code before calling the setState method is deleted.

[0161] Step four, the array conversion processing of the exception variable whose variable value type is identified as an array type.

[0162] In the embodiment of the application, since the array can use multiple methods to call elements, including: push method, pop method, unshift method and shift method, it is necessary to perform corresponding array conversion on different array calling methods.

[0163] Further, the array conversion processing of the exception variable whose variable value type is identified as an array type includes:

[0164] Identifying the array calling method of the exception variable of the array type and deleting it;

[0165] Setting a preset array replacement method in the deleted exception variable.

[0166] In an optional embodiment of the application, for the case of using the push method:

[0167] 4.11, judge whether the push method for adding array elements to the array is used to set the new value of the variable, such as this.setState({array B: array B.push(new element C)}), which indicates that the array B of the array type is added with a new element C. Since the push method is used, the original array B will be directly changed, which will cause the data of array B before and after the execution of the setState method to be found to be unchanged, and the react framework bottom layer will be determined to be unchanged, resulting in that the view of the component is not updated;

[0168] 4.12, for the code originally using the push method, first extract the input parameter when calling the push method, and then delete the code originally calling the push method and replace it with the concat method and the extracted input parameter. For example, array B.push(new element C) needs to be changed to array B.concat(new element C).

[0169] For the case of using pop method:

[0170] 4.21, judge whether the new value of the setting variable is the variable itself. For example, this.state.arrayD, you need to judge whether there is an operation of deleting the last element of the array using the pop method in the previous code calling the setState method. For example, this.state.arrayD.pop(), which means deleting the last element of arrayD. Since the pop method is used, the original arrayD will be directly changed, which will cause the component content to be updated when the setState method is executed. It is found that there is no change in the data of arrayD before and after, which will be judged by the bottom layer of the react framework as no change, and finally the view of the component is not updated;

[0171] 4.22, by changing the code of the original pop method used for deletion operation, and then setting the value of the new variable when calling the setState method, the code from directly referencing the value itself is changed to using the slice method to intercept the first to the last but one element operation, for example, this.setState({arrayD:this.state.arrayD.pop()}), which is changed to this.setState({arrayD:this.state.arrayD.slice(0,-1)}).

[0172] For the case of using unshift method:

[0173] 4.31, judge whether the new value of the setting variable is the variable itself. For example, this.state.arrayE, you need to judge whether there is an operation of adding an element to the beginning of the array using the unshift method in the previous code calling the setState method. For example, this.state.arrayE.unshift(elementF), which means adding an element F to the beginning of arrayE. Since the unshift method is used, the original arrayE will be directly changed, which will cause the component content to be updated when the setState method is executed. It is found that there is no change in the data of arrayE before and after, which will be judged by the bottom layer of the react framework as no change, and finally the view of the component is not updated;

[0174] 4.32. First, extract the input parameter passed when calling the unshift method and put it into a newly created empty array G. Then, delete the original code that calls the unshift method and replace it with array G calling the concat method, passing array E as the input parameter. For example, this.setState({array E: this.state.array E.unshift(element F)) is changed to this.setState({array E: array G.concat.(array E)}).

[0175] For cases where the shift method is used:

[0176] 4.41. Determine if the new value of a variable is the variable itself. For example, if `this.state.arrayH`, then in the code before calling the `setState` method, you need to check if the `shift` method was used to remove an element from the beginning of the array. For example, `this.state.arrayH.shift()` means removing the first element from array H. Because the use of the `shift` method directly changes the original array H, when the `setState` method is executed and the component content needs to be updated, it will find that the data in array H has not changed before and after. The React framework will judge that there has been no change, ultimately resulting in the component's view not updating.

[0177] 4.42. By deleting the code that originally used the shift method, and then changing the code that sets the value of the new variable when calling the setState method from directly referencing its value itself, such as this.setState({array H: this.state.array H.shift()), to this.setState({array H: this.state.array H.slice(1)).

[0178] Step 5: Perform attribute expansion processing on abnormal variables whose value type is identified as an object type.

[0179] In detail, the attribute expansion processing for abnormal variables whose value type is identified as an object includes:

[0180] To check if an exception variable of an object type exists, directly add properties to the object.

[0181] If an exception variable of an object type does not exist, and the object is directly added to a property, then the exception variable will not be processed.

[0182] If the object type abnormal variable exists object direct addition attribute operation, an empty object is constructed, the attribute to be added is added to the empty object, and object merging processing is performed on the attribute-added empty object.

[0183] In an optional embodiment of the present application, for the scenario where the value type of a variable belongs to an object:

[0184] 5.1, judge whether the new value of the set variable is the variable itself. For example, this.state.object J, it is necessary to judge whether there is an operation of directly adding an attribute to the object in the front code of the call to the setState method. For example, this.state.object J.attribute A = 111, which indicates that an attribute A is added to the object J, and the value of the attribute A is set to 111. This way of directly adding an attribute to the object will change the original object, which will cause the data of the object J to be found unchanged before and after the execution of the setState method, and the react framework bottom layer will be determined as no change generated, and finally the view of the component is not updated;

[0185] 5.2, create an empty object, and place the attribute (i.e. attribute A in 5.1) to be added into the empty object, such as {attribute A: 111}

[0186] 5.3, when calling the setState method, the code for setting the value of the new variable is changed from directly referring to the value itself to using the Object.assign method. When calling the method, three parameters need to be passed in. The first parameter is an empty object, indicating that a new object is created. The second parameter is the object itself that needs to be expanded, that is, the object J in the example. The third parameter is the object created in step 5.2. This way is equivalent to merging the newly created object, the object that needs to be expanded, and the object that only contains the expanded attribute into a new object, so that the original object is not modified when the attribute is added to the object.

[0187] In another optional embodiment of the present application, after the abnormal files are checked and repaired, the specific files and the line of code in which the tool performs the automatic repair operation are printed in the console, which facilitates the developer to subsequently troubleshoot and reminds the developer to subsequently avoid the use of such syntax errors, thereby improving the development efficiency.

[0188] The application constructs an exception detection and repair project in the front-end project, and only needs to introduce the exception detection and repair project into the current front-end project to automatically analyze and identify the exception variables in all development files and perform corresponding repair processing according to the types of the exception variables. Meanwhile, since the exception variables are automatically identified and repaired in the front-end project, the developer does not need to master relevant knowledge and technology, the time and energy spent on manually checking the exception variables and repairing are saved, and the missed scenarios in the manual checking process are avoided, so that the efficiency of variable exception detection and repair is greatly improved. Therefore, the front-end variable exception detection and repair device provided by the application can solve the problem of low efficiency of variable exception detection and repair.

[0189] As shown in Figure 7 is a structural schematic diagram of an electronic device for implementing the front-end variable exception detection and repair method according to an embodiment of the application.

[0190] The electronic device can include a processor 10, a memory 11, a communication interface 12 and a bus 13, and can further include a computer program stored in the memory 11 and executable on the processor 10, such as a front-end variable exception detection and repair program.

[0191] The memory 11 includes at least one type of readable storage medium, such as a flash memory, a mobile hard disk, a multimedia card, a card-type memory (such as an SD or DX memory, etc.), a magnetic memory, a magnetic disk, an optical disk, etc. In some embodiments, the memory 11 can be an internal storage unit of the electronic device, such as a mobile hard disk of the electronic device. In other embodiments, the memory 11 can also be an external storage device of the electronic device, such as a plug-in mobile hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. Further, the memory 11 can include both an internal storage unit and an external storage device of the electronic device. The memory 11 can be used not only to store application software and various data installed in the electronic device, such as the code of the front-end variable exception detection and repair program, but also to temporarily store data that has been output or will be output.

[0192] The processor 10 can be composed of integrated circuits in some embodiments, for example, can be composed of a single packaged integrated circuit, or can be composed of multiple packaged integrated circuits with the same function or different functions, including one or more central processing units (CPU), microprocessors, digital processing chips, graphics processors, combinations of various control chips, etc. The processor 10 is the control unit of the electronic device, connects various components of the entire electronic device through various interfaces and lines, executes programs or modules stored in the memory 11 (such as front-end variable anomaly detection and repair programs, etc.), and calls data stored in the memory 11 to perform various functions of the electronic device and process data.

[0193] The communication interface 12 is used for communication between the above-mentioned electronic device and other devices, including network interfaces and user interfaces. Optionally, the network interface can include wired interfaces and / or wireless interfaces (such as WI-FI interfaces, Bluetooth interfaces, etc.), which are usually used to establish a communication connection between the electronic device and other electronic devices. The user interface can be a display (Display), an input unit (such as a keyboard (Keyboard)), and optionally, the user interface can also be a standard wired interface, a wireless interface. Optionally, in some embodiments, the display can be an LED display, a liquid crystal display, a touch liquid crystal display, and an OLED (Organic Light-Emitting Diode) touch screen, etc. The display can also be appropriately referred to as a display screen or a display unit, which is used to display information processed in the electronic device and to display a visual user interface.

[0194] The bus 13 can be a peripheral component interconnect (PCI) bus or an extended industry standard architecture (EISA) bus, etc. The bus 13 can be divided into an address bus, a data bus, a control bus, etc. The bus 13 is configured to realize the connection and communication between the memory 11 and at least one processor 10, etc.

[0195] Figure 7 Only an electronic device with components is shown, and those skilled in the art can understand that, Figure 7 The structure shown does not constitute a limitation on the electronic device, and can include fewer or more components than shown, or combine certain components, or different component arrangements.

[0196] For example, although not shown, the electronic device can also include a power source (such as a battery) to power the various components, and preferably the power source can be logically connected to the at least one processor 10 through a power management device, so that the power management device can implement functions such as charge management, discharge management, and power consumption management. The power source can also include one or more DC or AC power sources, recharging devices, power failure detection circuits, power converters or inverters, power status indicators, and any other components. The electronic device can also include various sensors, Bluetooth modules, Wi-Fi modules, and the like, which are not described here.

[0197] Further, the electronic device can also include a network interface, which can optionally include a wired interface and / or a wireless interface (such as a WI-FI interface, a Bluetooth interface, etc.), and is typically used to establish a communication connection between the electronic device and other electronic devices.

[0198] Optionally, the electronic device can also include a user interface, which can be a display (Display), an input unit (such as a keyboard (Keyboard)), and optionally the user interface can also be a standard wired interface, a wireless interface. Optionally, in some embodiments, the display can be an LED display, a liquid crystal display, a touch liquid crystal display, and an OLED (Organic Light-Emitting Diode) touch, etc. The display can also be appropriately referred to as a display screen or a display unit, and is used to display information processed in the electronic device and to display a visual user interface.

[0199] It should be understood that the embodiments are only for illustration and are not limited in the scope of the patent application by this structure.

[0200] The front-end variable exception detection and repair program stored in the memory 11 of the electronic device is a combination of a plurality of instructions, which, when executed in the processor 10, can achieve:

[0201] Constructing a variable exception detection and repair project for the front-end project, and finding out a to-be-repaired component from the front-end project according to the variable exception detection and repair project;

[0202] Identifying an abnormal variable in the to-be-repaired component, and identifying a variable value type of the abnormal variable;

[0203] Performing cumulative operation deletion processing on the abnormal variable whose variable value type is identified as a number type;

[0204] Performing array conversion processing on the abnormal variable whose variable value type is identified as an array type;

[0205] The attribute extension processing is performed on the abnormal variable whose variable value type is identified as an object type.

[0206] Specifically, the processor 10 can refer to the description of the related steps in the corresponding embodiment of the accompanying drawings for the specific implementation method of the above instructions, and details are not described here.

[0207] Further, the modules / units integrated in the electronic device, if realized in the form of software function units and sold or used as independent products, can be stored in a computer readable storage medium. The computer readable storage medium can be volatile or non-volatile. For example, the computer readable medium can include any entity or device capable of carrying the computer program code, recording medium, U disk, mobile hard disk, magnetic disk, optical disk, computer memory, read-only memory (ROM).

[0208] The application further provides a computer readable storage medium, which stores a computer program, and the computer program can realize the following when executed by a processor of an electronic device:

[0209] A variable abnormality detection and repair project of a front-end project is constructed, and a component to be repaired is found from the front-end project according to the variable abnormality detection and repair project;

[0210] An abnormal variable in the component to be repaired is identified, and a variable value type of the abnormal variable is identified;

[0211] Cumulative operation deletion processing is performed on the abnormal variable whose variable value type is identified as a number type;

[0212] Array conversion processing is performed on the abnormal variable whose variable value type is identified as an array type;

[0213] Attribute extension processing is performed on the abnormal variable whose variable value type is identified as an object type.

[0214] In several embodiments provided in the application, it should be understood that the disclosed devices, apparatuses and methods can be implemented in other ways. For example, the apparatus embodiment described above is only schematic, for example, the division of the modules is only a logical function division, and actual implementation can have another division manner.

[0215] The modules described as separate components can or can not be physically separated, and the components displayed as modules can or can not be physical units, that is, they can be located in one place, or can be distributed on multiple network units. Part or all of the modules can be selected according to actual needs to achieve the purpose of the embodiment scheme.

[0216] In addition, each function module in each embodiment of the present application can be integrated in one processing unit, or each unit can be physically present separately, or two or more units can be integrated in one unit. The integrated unit can be realized in the form of hardware or in the form of hardware plus software function modules.

[0217] It is obvious for those skilled in the art that the present application is not limited to the details of the above exemplary embodiments, and the present application can be realized in other specific forms without departing from the spirit or essential characteristics of the present application.

[0218] Therefore, from any point of view, the embodiments should be regarded as exemplary and non-limiting, and the scope of the present application is defined by the appended claims rather than the above description, and therefore all changes falling within the meaning and scope of the equivalent elements of the claims are intended to be included in the present application. Any additional reference signs in the claims should not be considered as limiting the claims involved.

[0219] The embodiments of the present application can acquire and process related data based on artificial intelligence technology. Among them, artificial intelligence (AI) is to use digital computers or digital computer controlled machines to simulate, extend and expand human intelligence, perceive the environment, acquire knowledge and use knowledge to obtain the best results.

[0220] The basic technology of artificial intelligence generally includes technologies such as sensors, special artificial intelligence chips, cloud computing, distributed storage, big data processing technology, operation / interaction system, mechatronics, etc. The software technology of artificial intelligence mainly includes computer vision technology, robot technology, biometric technology, speech processing technology, natural language processing technology, and machine learning / deep learning, etc.

[0221] The blockchain referred to in the present application is a new application mode of computer technologies such as distributed data storage, point-to-point transmission, consensus mechanism, and encryption algorithm. Blockchain, in essence, is a decentralized database, which is a series of data blocks associated using cryptographic methods, each data block containing information of a batch of network transactions, used to verify the validity (anti-fake) of the information and generate the next block. Blockchain can include blockchain underlying platform, platform product service layer, and application service layer, etc.

[0222] In addition, it is obvious that the word "comprising" does not exclude other units or steps, and the singular does not exclude the plural. The plurality of units or devices stated in the system claims can also be realized by one unit or device through software or hardware. The second word is used to indicate the name, and does not mean any specific order.

[0223] It should be pointed out finally that the above embodiments are only used to illustrate the technical solutions of the present application but not to limit the present application. Although the present application has been described in detail with reference to the preferred embodiments, those skilled in the art should understand that the technical solutions of the present application can be modified or equivalently replaced without departing from the spirit and scope of the present application.

Claims

1. A method for detecting and repairing anomalies in front-end variables, characterized in that, The method includes: Construct a variable anomaly detection and repair project for the front-end project. Based on the variable anomaly detection and repair project, traverse the project directory of the front-end project. Find files containing preset suffixes in the traversed project directory as a target file set. Use a preset multi-round keyword retrieval method to extract the components to be repaired from the target file set. The keyword retrieval method includes sequentially checking whether the target files contain preset introduction keywords, preset declaration keywords, and preset variable setting keywords. Identify the abnormal variables in the component to be repaired, and identify the variable value type of the abnormal variables; Perform cumulative deletion on abnormal variables whose value type is identified as numeric. Perform array conversion on abnormal variables whose value type is identified as an array type; Perform attribute expansion processing on abnormal variables whose value type is identified as an object.

2. The front-end variable anomaly detection and repair method as described in claim 1, characterized in that, The variable anomaly detection and repair project for building the front-end project includes: Locate the root directory of the front-end project and add a variable anomaly detection and repair tool to the root directory; Set a detection configuration file in the variable anomaly detection and repair tool, and add a component repair command in the root directory after adding the detection configuration file. Execute the component repair command to obtain the variable anomaly detection and repair project.

3. The front-end variable anomaly detection and repair method as described in claim 1, characterized in that, The step of extracting the components to be repaired from the target file set using a preset multi-round keyword retrieval method includes: The target files in the target file set are traversed one by one to check whether the traversed target files contain the preset introduction keywords; If the target file does not contain the introduced keyword, then return to the step of traversing the target files in the target file set one by one; If the target file contains the introduced keyword, check whether the target file contains the preset declaration keyword; If the target file does not contain the preset declaration keywords, return to the step of traversing the target files in the target file set one by one; If the target file contains the declaration keywords, check whether the target file contains preset variable setting keywords; If the target file does not contain the variable setting keyword, return to the step of traversing the target files in the target file set one by one; If the target file contains the variable setting keyword, the current target file is determined to be the component to be repaired, and the step of traversing the target files in the target file set one by one is returned until all the target files in the target file set have been traversed.

4. The front-end variable anomaly detection and repair method as described in claim 1, characterized in that, The identification of abnormal variables in the component to be repaired includes: Extract the variable container from the component to be repaired; The variable that was reset in the variable container is identified as the abnormal variable.

5. The front-end variable anomaly detection and repair method as described in claim 1, characterized in that, The process of converting abnormal variables whose value type is identified as array type into arrays includes: Identify and delete array-type abnormal variables that have been called in an array. Set a preset array replacement method in the deleted abnormal variables.

6. The front-end variable anomaly detection and repair method as described in claim 1, characterized in that, The attribute expansion processing for abnormal variables whose value type is identified as object type includes: To check if an exception variable of an object type exists, directly add properties to the object. If an exception variable of an object type does not exist, and the object is directly added to a property, then the exception variable will not be processed. If an exception variable of an object type exists, and an object is directly added to an object, an empty object is constructed, the required attributes are added to the empty object, and the empty object after the attributes are added is merged.

7. A front-end variable anomaly detection and repair device, characterized in that, The device includes: The detection and repair project construction module is used to construct a variable anomaly detection and repair project for the front-end project. Based on the variable anomaly detection and repair project, the module traverses the project directory of the front-end project and finds files containing preset suffixes in the traversed project directory as a target file set. The module uses a preset multi-round keyword retrieval method to extract the components to be repaired from the target file set. The keyword retrieval method includes sequentially checking whether the target files contain preset introduction keywords, preset declaration keywords, and preset variable setting keywords. An anomaly detection module is used to identify abnormal variables in the component to be repaired, and to identify the variable value type of the abnormal variables; The abnormal variable repair module is used to perform cumulative deletion processing on abnormal variables whose value type is identified as numeric, perform array conversion processing on abnormal variables whose value type is identified as array, and perform attribute expansion processing on abnormal variables whose value type is identified as object.

8. An electronic device, characterized in that, The electronic device includes: At least one processor; and, A memory communicatively connected to the at least one processor; wherein, The memory stores a computer program that can be executed by the at least one processor, the computer program being executed by the at least one processor to enable the at least one processor to perform the front-end variable anomaly detection and repair method as described in any one of claims 1 to 6.

9. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the front-end variable anomaly detection and repair method as described in any one of claims 1 to 6.

Images