CN114840439A

CN114840439A - Front-end code visualization method, device, equipment and storage medium

Info

Publication number: CN114840439A
Application number: CN202210579810.1A
Authority: CN
Inventors: 万苗
Original assignee: Ping An Property and Casualty Insurance Company of China Ltd
Current assignee: Ping An Property and Casualty Insurance Company of China Ltd
Priority date: 2022-05-25
Filing date: 2022-05-25
Publication date: 2022-08-02

Abstract

The invention relates to a performance test technology, and discloses a front-end code visualization method, which comprises the following steps: acquiring a code to be detected of a front-end project; dividing the code to be detected into a plurality of code blocks according to the code category label in the code to be detected; performing code quality detection on each code block to obtain a code quality detection result; carrying out code rule detection on each code block by using a pre-constructed code rule detection specification to obtain a code rule detection result; and visualizing the code quality detection result and the code rule detection result by utilizing a pre-constructed visualization tool. The invention also provides a front-end code visualization device, equipment and a storage medium. The invention can solve the problem of visualization of the front-end code quality detection result.

Description

Front-end code visualization method, device, equipment and storage medium

Technical Field

The invention relates to the technical field of performance testing, in particular to a front-end code visualization method and device, electronic equipment and a computer readable storage medium.

Background

Under the big background of internet development, with the increase of complexity of a front-end project, the code amount in the project shows a linear increasing trend, the increase of the code amount in the project can generate the problems of slow project process, increased code maintenance cost and hard control of code quality, most of front-end code development only focuses on the completion degree of project requirements, but does not focus on the overall performance problem of the developed front-end code, and the quality detection of the front-end project code is a standardized detection process for the quality and performance of code writing.

Currently, the code quality of a front-end project is usually framed by a predefined code specification, but only the format of code development is required to meet the specification requirement by using the method, that is, the code specification can be passed, and the overall quality of the developed code cannot be guaranteed.

Disclosure of Invention

The invention provides a front-end code visualization method, a front-end code visualization device, a front-end code visualization equipment and a storage medium, and mainly aims to solve the problem of visualization of a front-end code quality detection result.

In order to achieve the above object, the present invention provides a front-end code visualization method, including:

acquiring a code to be detected of a front-end project;

dividing a code to be detected into a plurality of code blocks according to a code category label in the code to be detected;

performing code quality detection on each code block to obtain a code quality detection result;

carrying out code rule detection on each code block by using a pre-constructed code rule detection specification to obtain a code rule detection result;

and visualizing the code quality detection result and the code rule detection result by utilizing a pre-constructed visualization tool.

Optionally, the performing code quality detection on each code block to obtain a code quality detection result includes:

executing pattern detection on the pattern content included in each code block by using a pre-constructed pattern detection tool to obtain a pattern detection result;

constructing a syntax parsing tree by using each code block, and calculating the code repetition rate and the code dependency rate of code statements in the syntax parsing tree;

inquiring the code repetition rate score of each code block according to a preset code repetition rate score inquiry table, and inquiring the code dependency rate score of each code block according to a preset code dependency rate score inquiry table;

summarizing the code repetition rate scores and the code dependency rate scores to obtain code statement score results;

and summarizing the style detection result and the code statement grading result to obtain a code quality detection result.

Optionally, the constructing a syntax parsing tree by using each of the code blocks includes:

removing the blank symbol and the comment statement in each code statement to obtain a plurality of standard code statements; identifying a code identification of each standard code statement;

and constructing a syntax parsing tree of the plurality of standard code statements by using the nesting relation among the code statements and the code identifications.

Optionally, the visualizing the code quality detection result and the code rule detection result by using a pre-constructed visualization tool includes:

acquiring the file format of the codes in the front-end project and the number of files corresponding to the file format;

querying the number of repeated files in the front-end project;

and displaying the file format, the file number corresponding to the file format, the repeated file number, the code quality detection result and the code rule detection result by using the visualization tool in a preset graph respectively.

Optionally, the performing, by using a pre-constructed code rule detection specification, code rule detection on each code block to obtain a code rule detection result includes:

using the pre-constructed code rule detection specification to carry out grammar specification detection on each code block;

executing loop statement detection on each code block by using the pre-constructed code rule detection specification to obtain a loop statement detection result;

and summarizing the standard detection result and the loop statement detection result to obtain the code rule detection result.

Optionally, the performing loop statement detection on each code block by using the pre-constructed code rule detection specification to obtain a loop statement detection result includes:

analyzing a loop statement in the project syntax tree by using the code check plug-in;

judging whether the mark in the loop sentence is used in a preset keyword or not; if the mark in the loop sentence is not used in a preset keyword, the grammar check result is that grammar detection is passed;

and if the mark in the loop statement is used in a preset keyword, the syntax check result is that the syntax check does not pass.

Optionally, the performing, by using a pre-built pattern detection tool, pattern detection on the pattern content included in each code block includes:

and detecting the CSS style corresponding to each code block according to a detection rule configured in the pre-constructed style detection tool to obtain a style detection result, and executing style error reporting on the style detection result according to a preset error reporting rule.

In order to solve the above problem, the present invention also provides a front-end code visualization apparatus, including:

the code processing module is used for acquiring a code to be detected of a front-end project; dividing the code to be detected into a plurality of code blocks according to the code category label in the code to be detected;

the code detection module is used for detecting the code quality of each code block to obtain a code quality detection result; carrying out code rule detection on each code block by using a pre-constructed code rule detection specification to obtain a code rule detection result;

and the detection result visualization module is used for visualizing the code quality detection result and the code rule detection result by utilizing a pre-constructed visualization tool.

In order to solve the above problem, the present invention also provides an electronic device, including:

at least one processor; and the number of the first and second groups,

a memory communicatively coupled to the at least one processor; wherein the content of the first and second substances,

the memory stores a computer program executable by the at least one processor to enable the at least one processor to perform the method for front end code visualization described above.

In order to solve the above problem, the present invention further provides a computer-readable storage medium, in which at least one computer program is stored, and the at least one computer program is executed by a processor in an electronic device to implement the front-end code visualization method described above.

According to the embodiment of the invention, the code to be detected can be divided into simple code blocks through the code category label in the code to be detected, so that the complexity of code quality detection can be reduced, and the code quality detection precision can be improved.

Drawings

Fig. 1 is a schematic flowchart of a front-end code visualization method according to an embodiment of the present invention;

FIG. 2 is a functional block diagram of a front-end code visualization apparatus according to an embodiment of the present invention;

fig. 3 is a schematic structural diagram of an electronic device implementing the front-end code visualization method according to an embodiment of the present invention.

The implementation, functional features and advantages of the objects of the present invention will be further explained with reference to the accompanying drawings.

Detailed Description

It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.

The embodiment of the application provides a front-end code visualization method. The execution subject of the front-end code visualization method includes, but is not limited to, at least one of the electronic devices that can be configured to execute the method provided by the embodiments of the present application, such as a server, a terminal, and the like. In other words, the front-end code visualization method may be performed by software or hardware installed in a terminal device or a server device, and the software may 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, and the like. The server may be an independent server, or may be a cloud server that provides basic cloud computing services such as a cloud service, a cloud database, cloud computing, a cloud function, cloud storage, a Network service, cloud communication, a middleware service, a domain name service, a security service, a Content Delivery Network (CDN), a big data and artificial intelligence platform, and the like.

Referring to fig. 1, a flowchart of a front-end code visualization method according to an embodiment of the present invention is shown. In this embodiment, the front-end code visualization method includes:

and S1, acquiring the codes to be detected of the front-end project.

In the embodiment of the invention, the front-end project can be a project developed and designed by a team in charge of front-end development, user interface interaction can be completed by creating interfaces such as a WEB page or an APP, the types of the front-end project can be greatly different in different scenes, for example, in the insurance industry, the front-end project can be an account system, a claim settlement decision and the like, and for example, in a network transaction scene, the front-end project can be a payment frame unit.

In the embodiment of the present invention, the code to be detected may be a complete program code written by a developer responsible for front-end project development to implement normal work of a front-end project, where the front-end project may be constructed based on development frameworks such as a node.

In detail, the code to be detected for acquiring the front-end project according to the embodiment of the present invention may be provided by a front-end project developer, where the code to be detected may be a code in an HTML file.

And S2, dividing the code to be detected into a plurality of code blocks according to the code category label in the code to be detected.

In this embodiment of the present invention, the code category tag may be a title level tag included in the code of each service of the front-end item, such as a title level tag of an HTML file, < h1> < h1/> defines a primary title, < h2> < h2/> defines a secondary title, < h3> < h3/> defines a tertiary title, and so on.

As an embodiment of the present invention, the dividing the code to be detected into a plurality of code blocks according to the code category label in the code to be detected includes: inquiring a code category label in the code to be detected; according to the code category label, the code to be detected is segmented; and extracting the code blocks after segmentation to obtain the plurality of code blocks.

In detail, in the embodiment of the present invention, the code to be detected is divided into a plurality of code blocks according to the code category in the code to be detected, so that each code block can be separately executed with code quality detection, and the efficiency of code quality detection is improved.

And S3, performing code quality detection on each code block to obtain a code quality detection result.

In this embodiment of the present invention, the code quality detection may be a process in which a user performs a detection on a code quality related aspect on a target code by using a pre-configured detection specification or content, where the code quality related aspect may be a code repetition rate, a dependency missing condition in a code, and the like, where the dependency missing condition in the code includes but is not limited to: "else if ' statement must be followed by ' else ' statement, switch case must have break, continue or return end, etc.

In detail, the embodiment of the present invention performs code quality detection on each code block to obtain a code quality detection result, and can detect data such as eslin error number, Stylelint error number, code repetition rate, and dependency missing condition in a code of a front-end item, thereby realizing comprehensiveness of code quality detection.

As an embodiment of the present invention, the performing code quality detection on each code block to obtain a code quality detection result includes: executing pattern detection on the pattern content included in each code block by using a pre-constructed pattern detection tool to obtain a pattern detection result; constructing a syntax parsing tree by using each code block, and calculating the code repetition rate and the code dependency rate of code statements in the syntax parsing tree; inquiring the code repetition rate score of each code block according to a preset code repetition rate score inquiry table, and inquiring the code dependency rate score of each code block according to a preset code dependency rate score inquiry table; summarizing the code repetition rate scores and the code dependency rate scores to obtain code statement score results; and summarizing the style detection result and the code statement grading result to obtain a code quality detection result.

In an embodiment of the present invention, the pre-built style detection tool may be a detection tool built based on a Stylelint code style examination rule, and is mainly used for examining a CSS style of a code in a front-end item, where the CSS style may be a rule language defining a display format of the front-end item, such as a font, a font size, a font color, and the like in a page, where the CSS style generally exists in a format of an attribute and an attribute value, such as an attribute and an attribute value of a font type: { font-family: "regular script", font size and color are: { font-size: "12 px"; color: #666 }.

In the invention, the preset code repetition rate scoring lookup table can be a scoring table between code repetition rates and scores constructed according to the code repetition rates in the codes; the preset code dependency score lookup table may be a score table between code loss rates and scores, which is constructed according to the code loss rates in the codes, for example, when the code loss rate is 0%, the quality score of the loss condition may be 100 scores.

Further, the constructing a syntax parsing tree using each of the code blocks includes: removing the blank symbol and the comment statement in each code statement to obtain a plurality of standard code statements; identifying a code identification of each standard code statement; and constructing a syntax parsing tree of the plurality of standard code statements by using the nesting relation among the code statements and the code identifications.

In the embodiment of the invention, the syntax parsing tree can be a multilayer tree structure constructed by using code statements in code blocks, wherein the multilayer tree structure can be represented by a folder structure in a microcomputer, a 'my computer' is taken as a main body, a 'C disk' and a 'D disk' are nested in the multilayer tree structure, a plurality of folders are arranged in each disk, the folders are nested in the folders, the process of opening the files layer by layer is equivalent to the process of traversing from a root node to a leaf node, a multilayer tree is formed, and in addition, whether syntax is wrong or not can be verified in the process of constructing the syntax parsing tree.

In this embodiment of the present invention, the code identifier may be a code tag included in a code statement, "title: title "," body: code body "and" script: script file ", etc.

Further, by using the pre-constructed pattern detection tool to perform pattern detection on the pattern content included in each code block, a pattern error can be avoided in development.

As an embodiment of the present invention, the performing, by using a pre-constructed pattern detection tool, pattern detection on pattern content included in each code block includes: and detecting the CSS style corresponding to each code block according to a detection rule configured in the pre-constructed style detection tool to obtain a style detection result, and executing style error reporting on the style detection result according to a preset error reporting rule.

In this embodiment of the present invention, the detection rule may be 'rules' configured in the style detection tool, and is used to detect the attribute value and the attribute name existing in the target CSS style.

In this embodiment of the present invention, the preset error reporting rule may be error reporting including warning level: waning, and error reporting at the error level: and the error reporting module is used for reminding preset staff to process when the error reporting module has error reporting, for example, performing warning alarm when a missing attribute value is detected in the pattern detection result, and performing error reporting when a missing attribute name is detected in the pattern detection result.

And S4, carrying out code rule detection on each code block by using the pre-constructed code rule detection specification to obtain a code rule detection result.

In this embodiment of the present invention, the pre-constructed code rule detection specification may refer to a rule or content that needs to be checked and is preset by a user, and includes: 1. checking whether the v-for syntax uses index as key; 2. all 'else if' statements must be followed by 'else' statements; 3. the array methods find and findIndex are not used; 4. default is necessary to use switch case; 5. the use of switch case must have a break, continue or return end.

In the embodiment of the invention, the pre-constructed code rule detection specification can be constructed by adopting an ESLint code format tool, wherein each code detection rule constructed by the ESLint code format tool is a check plug-in, and a configurable code check plug-in can be constructed by the rule input by a user.

In detail, the performing, by using the pre-constructed code rule detection specification, the code rule detection on each code block to obtain a code rule detection result includes: using the pre-constructed code rule detection specification to carry out grammar specification detection on each code block; executing loop statement detection on each code block by using the pre-constructed code rule detection specification to obtain a loop statement detection result; and summarizing the standard detection result and the loop statement detection result to obtain the code rule detection result.

Further, the performing syntax specification detection and variable specification detection on each code block includes: judging whether each code block meets a preset grammar specification or not; if codes in each code block do not meet the grammar specification, determining that the specification check result is that specification detection does not pass; and if the codes in each code block meet the grammar specification, determining that the specification detection result is that specification detection is passed.

In the embodiment of the present invention, through syntax specification checking, rule 2 can be checked: all 'else if' statements must be followed by 'else' statements; 3: the array methods find and findIndex are not used; 4: default is necessary to use switch case; 5: there must be a break, continue or return end using switch case.

Further, the performing loop statement detection on each code block by using the pre-constructed code rule detection specification to obtain a loop statement detection result includes: analyzing a loop statement in the project syntax tree by using the code check plug-in; judging whether the mark in the loop sentence is used in a preset keyword or not; if the mark in the loop sentence is not used in a preset keyword, the grammar check result is that grammar detection is passed; and if the mark in the loop sentence is used in a preset keyword, the grammar checking result is that grammar detection is not passed.

In the embodiment of the present invention, the statement detection may be used to check rule 1: whether the v-for syntax uses the index as the key is checked, for example, the vue-template-builder is used for parsing to obtain a v-for loop statement, whether the identifier index in the v-for loop statement is used in the preset key is judged, if the identifier index is used, an error is prompted, and the loop statement check and the identifier check are performed on each code block, so that the efficiency of the for loop can be improved.

And S5, visualizing the code quality detection result and the code rule detection result by utilizing a pre-constructed visualization tool.

In an embodiment of the present invention, the pre-constructed visualization tool may be a display tool that displays information such as data and text in the form of a chart and a graph.

In detail, the visualizing the code quality detection result and the code rule detection result by using a pre-constructed visualization tool includes: acquiring the file format of the codes in the front-end project and the number of files corresponding to the file format; querying the number of repeated files in the front-end project; and displaying the file format, the file number corresponding to the file format, the repeated file number, the code quality detection result and the code rule detection result by using the visualization tool in a preset graph respectively.

According to the embodiment of the invention, the pre-constructed visualization tool is used for visualizing the code quality detection result and the code rule detection result, so that the visualization of the quality detection result can be realized, and the quality detection result of the code can be visually seen.

Fig. 2 is a functional block diagram of a front-end code visualization apparatus according to an embodiment of the present invention.

The front-end code visualization apparatus 100 of the present invention may be installed in an electronic device. According to the implemented functions, the front-end code visualization apparatus 100 may include a code processing module 101, a code detection module 102, and a detection result visualization module 103. The module of the present invention, which may also be referred to as a unit, refers to a series of computer program segments that can be executed by a processor of an electronic device and that can perform a fixed function, and that are stored in a memory of the electronic device.

In the present embodiment, the functions regarding the respective modules/units are as follows:

the code processing module 101 is configured to obtain a to-be-detected code of a front-end project; dividing the code to be detected into a plurality of code blocks according to the code category label in the code to be detected;

The code detection module 102 is configured to perform code quality detection on each code block to obtain a code quality detection result; carrying out code rule detection on each code block by using a pre-constructed code rule detection specification to obtain a code rule detection result;

In this embodiment of the present invention, the pre-constructed code rule detection specification may refer to a rule or content that needs to be checked and is preset by a user, and includes: 1. checking whether the v-for syntax uses index as key; 2. all 'else if' statements must be followed by 'else' statements; 3. the array methods find and findIndex are not used; 4. default is necessary to use switch case; 5. there must be a break, continue or return end using switch case.

Further, the syntax specification detection and variable specification detection for each code block includes: judging whether each code block meets a preset grammar specification or not; if codes in each code block do not meet the grammar specification, determining that the specification check result is that specification detection does not pass; and if the codes in each code block meet the grammar specification, determining that the specification detection result is that specification detection is passed.

The detection result visualization module 103 visualizes the code quality detection result and the code rule detection result by using a pre-constructed visualization tool.

Fig. 3 is a schematic structural diagram of an electronic device implementing a front-end code visualization method according to an embodiment of the present invention.

The electronic device 1 may comprise a processor 10, a memory 11, a communication bus 12 and a communication interface 13, and may further comprise a computer program, such as a front-end code visualization program, stored in the memory 11 and executable on the processor 10.

In some embodiments, the processor 10 may be composed of an integrated circuit, for example, a single packaged integrated circuit, or may be composed of a plurality of integrated circuits packaged with the same function or different functions, and includes one or more Central Processing Units (CPUs), a microprocessor, a digital Processing chip, a graphics processor, a combination of various control chips, and the like. The processor 10 is a Control Unit (Control Unit) of the electronic device, connects various components of the electronic device by using various interfaces and lines, and executes various functions and processes data of the electronic device by running or executing programs or modules (for example, executing front-end code visualization programs and the like) stored in the memory 11 and calling data stored in the memory 11.

The memory 11 includes at least one type of readable storage medium including flash memory, removable hard disks, multimedia cards, card-type memory (e.g., SD or DX memory, etc.), magnetic memory, magnetic disks, optical disks, etc. The memory 11 may in some embodiments be an internal storage unit of the electronic device, for example a removable hard disk of the electronic device. The memory 11 may also be an external storage device of the electronic device in other embodiments, such as a plug-in mobile hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like, which are provided on the electronic device. Further, the memory 11 may also include both an internal storage unit and an external storage device of the electronic device. The memory 11 may be used not only to store application software installed in the electronic device and various types of data, such as codes of a front-end code visualization program, but also to temporarily store data that has been output or is to be output.

The communication bus 12 may be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus. The bus may be divided into an address bus, a data bus, a control bus, etc. The bus is arranged to enable connection communication between the memory 11 and at least one processor 10 or the like.

The communication interface 13 is used for communication between the electronic device and other devices, and includes a network interface and a user interface. Optionally, the network interface may include a wired interface and/or a wireless interface (e.g., WI-FI interface, bluetooth interface, etc.), which are typically used to establish a communication connection between the electronic device and other electronic devices. The user interface may be a Display (Display), an input unit such as a Keyboard (Keyboard), and optionally a standard wired interface, a wireless interface. Alternatively, in some embodiments, the display may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, an OLED (Organic Light-Emitting Diode) touch device, or the like. The display, which may also be referred to as a display screen or display unit, is suitable, among other things, for displaying information processed in the electronic device and for displaying a visualized user interface.

Fig. 3 only shows an electronic device with components, and it will be understood by a person skilled in the art that the structure shown in fig. 3 does not constitute a limitation of the electronic device 1, and may comprise fewer or more components than shown, or a combination of certain components, or a different arrangement of components.

For example, although not shown, the electronic device may further include a power supply (such as a battery) for supplying power to each component, and preferably, the power supply may be logically connected to the at least one processor 10 through a power management device, so that functions of charge management, discharge management, power consumption management and the like are realized through the power management device. The power supply may also include any component of one or more dc or ac power sources, recharging devices, power failure detection circuitry, power converters or inverters, power status indicators, and the like. The electronic device may further include various sensors, a bluetooth module, a Wi-Fi module, and the like, which are not described herein again.

It is to be understood that the described embodiments are for purposes of illustration only and that the scope of the appended claims is not limited to such structures.

The memory 11 in the electronic device 1 stores a front-end code visualization program that is a combination of instructions that, when executed in the processor 10, may implement:

acquiring a code to be detected of a front-end project;

dividing the code to be detected into a plurality of code blocks according to the code category label in the code to be detected;

Specifically, the specific implementation method of the instruction by the processor 10 may refer to the description of the relevant steps in the embodiment corresponding to the drawings, which is not described herein again.

Further, the integrated modules/units of the electronic device 1, if implemented in the form of software functional units and sold or used as separate products, may be stored in a computer readable storage medium. The computer readable storage medium may be volatile or non-volatile. For example, the computer-readable medium may include: any entity or device capable of carrying said computer program code, recording medium, U-disk, removable hard disk, magnetic disk, optical disk, computer Memory, Read-Only Memory (ROM).

The present invention also provides a computer-readable storage medium, storing a computer program which, when executed by a processor of an electronic device, may implement:

acquiring a code to be detected of a front-end project;

In the embodiments provided in the present invention, it should be understood that the disclosed apparatus, device and method can be implemented in other ways. For example, the above-described apparatus embodiments are merely illustrative, and for example, the division of the modules is only one logical functional division, and other divisions may be realized in practice.

The modules described as separate parts may or may not be physically separate, and parts displayed as modules may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment.

In addition, functional modules in the embodiments of the present invention may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, or in a form of hardware plus a software functional module.

It will be evident to those skilled in the art that the invention is not limited to the details of the foregoing illustrative embodiments, and that the present invention may be embodied in other specific forms without departing from the spirit or essential attributes thereof.

The present embodiments are therefore to be considered in all respects as illustrative and not restrictive, the scope of the invention being indicated by the appended claims rather than by the foregoing description, and all changes which come within the meaning and range of equivalency of the claims are therefore intended to be embraced therein. Any reference signs in the claims shall not be construed as limiting the claim concerned.

The block chain is a novel application mode of computer technologies such as distributed data storage, point-to-point transmission, a consensus mechanism, an encryption algorithm and the like. A block chain (Blockchain), which is essentially a decentralized database, is a series of data blocks associated by using a cryptographic method, and each data block contains information of a batch of network transactions, so as to verify the validity (anti-counterfeiting) of the information and generate a next block. The blockchain may include a blockchain underlying platform, a platform product service layer, an application service layer, and the like.

The embodiment of the application can acquire and process related data based on an artificial intelligence technology. Among them, Artificial Intelligence (AI) is a theory, method, technique and application system that simulates, extends and expands human Intelligence using a digital computer or a machine controlled by a digital computer, senses the environment, acquires knowledge and uses the knowledge to obtain the best result.

Furthermore, it will be obvious that the term "comprising" does not exclude other elements or steps, and the singular does not exclude the plural. A plurality of units or means recited in the system claims may also be implemented by one unit or means in software or hardware. The terms first, second, etc. are used to denote names, but not any particular order.

Finally, it should be noted that the above embodiments are only for illustrating the technical solutions of the present invention and not for limiting, and although the present invention is described in detail with reference to the preferred embodiments, it should be understood by those skilled in the art that modifications or equivalent substitutions may be made on the technical solutions of the present invention without departing from the spirit and scope of the technical solutions of the present invention.

Claims

1. A method for front-end code visualization, the method comprising:

acquiring a code to be detected of a front-end project;

2. The front-end code visualization method according to claim 1, wherein the performing code quality detection on each of the code blocks to obtain a code quality detection result comprises:

3. The front-end code visualization method as recited in claim 2, wherein said building a syntax parse tree using each of said code blocks comprises:

4. The front-end code visualization method according to claim 1, wherein the visualizing the code quality detection result and the code rule detection result by using a pre-constructed visualization tool comprises:

querying the number of repeated files in the front-end project;

5. The front-end code visualization method according to claim 1, wherein the performing code rule detection on each code block by using a pre-constructed code rule detection specification to obtain a code rule detection result comprises:

6. The front-end code visualization method according to claim 5, wherein the performing loop statement detection on each code block by using the pre-constructed code rule detection specification to obtain a loop statement detection result includes:

judging whether the mark in the loop sentence is used in a preset keyword or not;

if the mark in the loop sentence is not used in a preset keyword, the grammar check result is that grammar detection is passed;

and if the mark in the loop sentence is used in a preset keyword, the grammar checking result is that grammar detection is not passed.

7. The front-end code visualization method according to claim 2, wherein performing, by using a pre-built pattern detection tool, pattern detection on the pattern content included in each of the code blocks comprises:

8. A front-end code visualization apparatus, the apparatus comprising:

and the detection visualization module is used for visualizing the code quality detection result and the code rule detection result by utilizing a pre-constructed visualization tool.

9. An electronic device, characterized in that the electronic device comprises:

at least one processor; and the number of the first and second groups,

the memory stores a computer program executable by the at least one processor to enable the at least one processor to perform a front end code visualization method as claimed in any one of claims 1 to 7.

10. A computer-readable storage medium, storing a computer program, wherein the computer program, when executed by a processor, implements the front-end code visualization method according to any of claims 1 to 7.