A front-end code review method and device, an electronic device and a storage medium

Abstract

The application discloses a front-end code review method and device, electronic equipment and storage medium, obtains the change code and change annotation of the front-end development language of the target project, respectively carries out structural processing on the change code and change annotation, obtains the change code sequence and change annotation sequence, respectively encodes the change code sequence and change annotation sequence, obtains the change code encoding sequence and change annotation encoding sequence, obtains the change vector according to the change code encoding sequence and change annotation encoding sequence, extracts the features of the change vector of each front-end development language through the pre-trained deep learning model, obtains the corresponding change features, splices the change features of all front-end development languages to obtain comprehensive features, judges based on the comprehensive features through a preset algorithm, obtains the code quality of the target project and outputs. The automatic review of the front-end code can be realized, and the review efficiency and the accuracy of the review result are improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of front-end development, and in particular to a front-end code review method and device, an electronic device and a storage medium. BACKGROUND

[0002] The rapid development of web applications and the high standards of user interaction experience make front-end development technology a frontier field of technological innovation and business competition. Front-end code not only carries the heavy responsibility of visual presentation and user interaction, but also is the key to realizing business logic and functional requirements. Therefore, the quality of front-end code is directly related to the response speed, stability, security and maintainability of the application.

[0003] The multi-language characteristics and highly integrated working environment of front-end code require evaluation tools to have higher flexibility and comprehensiveness. However, the traditional front-end code review method has the following limitations:

[0004] Subjectivity: Manual review is often influenced by the reviewer's personal experience, preferences and current state, resulting in biased review results.

[0005] Low efficiency: As the project size and code volume increase, the speed of manual review is difficult to keep up with the pace of development, making review a bottleneck in the development process.

[0006] High cost: High-quality manual review requires a large amount of human resources, and as technology updates and project complexity increase, the cost of review continues to rise.

[0007] Knowledge update lag: Front-end technology updates rapidly, and manual review is difficult to keep up with the latest development practices and standards, which may miss critical technical details. SUMMARY

[0008] The present application provides a front-end code review method, device, electronic device and storage medium to solve the above technical problems in the prior art.

[0009] In one aspect, the present application provides a front-end code review method, which comprises:

[0010] Obtaining the changed code and the change comment of the front-end development language for the target project, the type of the front-end development language including descriptive language and structural language;

[0011] Structurally processing the changed code and the change comment respectively to obtain the corresponding changed code sequence and change comment sequence, the changed code sequence and the change comment sequence being linear text sequences;

[0012] encoding the change code sequence and the change comment sequence respectively to obtain a change code encoding sequence and a change comment encoding sequence, the change code encoding sequence and the change comment encoding sequence being sequences composed of word units;

[0013] obtaining a change vector of a corresponding front-end development language according to the change code encoding sequence and the change comment encoding sequence;

[0014] extracting features of the change vector of each front-end development language through a pre-trained deep learning model to obtain corresponding change features;

[0015] splicing the change features of all front-end development languages to obtain comprehensive features, and determining the code quality of the target project based on the comprehensive features through a preset algorithm and outputting; the comprehensive features include the following dimensions: label structure rationality, semantic label usage rate, comment and code consistency, style selector efficiency, style reuse rate, comment and style consistency, exception handling integrity, function structure rationality, and abstract syntax tree (AST) structure features.

[0016] In the method, the change code and the change comment are respectively structured, including:

[0017] linearly arranging the change code according to the original text structure and order of the change code to obtain a change code sequence;

[0018] linearly arranging the change comment according to the original text structure and order of the change comment to obtain a change comment sequence.

[0019] In the method, when the change code of the front-end development language of the structural language type is structured, the method further includes:

[0020] parsing the change code into an abstract syntax tree;

[0021] performing pre-order, in-order and post-order traversals on the abstract syntax tree to obtain corresponding pre-order sequences, in-order sequences and post-order sequences;

[0022] splicing the pre-order sequences, in-order sequences and post-order sequences to obtain a structure sequence of the change code;

[0023] Correspondingly, the method further includes encoding the structure sequence to obtain a structure encoding sequence.

[0024] In the method, when the front-end development language of the descriptive language type is obtained, the change vector of the front-end development language includes:

[0025] The change annotation coding sequence and the change code coding sequence are spliced to obtain a comprehensive coding sequence of the front-end development language, and the comprehensive coding sequence sequentially comprises a start mark, the change annotation coding sequence, a separation mark, the change code coding sequence, and an end mark.

[0026] The comprehensive coding sequence is converted according to a preset algorithm to obtain the change vector.

[0027] For the front-end development language of the structural language type, obtaining the change vector of the front-end development language comprises:

[0028] The change annotation coding sequence, the change code coding sequence, and the structural coding sequence are spliced to obtain a comprehensive coding sequence of the front-end development language, and the comprehensive coding sequence sequentially comprises a start mark, the change annotation coding sequence, a separation mark, the change code coding sequence, a separation mark, the structural coding sequence, and an end mark.

[0029] The comprehensive coding sequence is converted according to a preset algorithm to obtain the change vector.

[0030] For the change vector of each front-end development language, a change feature is extracted to obtain a corresponding change feature, comprising:

[0031] The change vector is processed by a pre-trained deep learning model to obtain an output vector at a position corresponding to the end mark as the change feature, and the output vector is used to represent the comprehensive feature of the change vector.

[0032] If it is determined that the code quality of the target project does not meet a preset condition, the method further comprises: detecting the comprehensive feature according to a preset template to determine an abnormal dimension, and outputting an evaluation opinion for the abnormal dimension according to the template.

[0033] The second aspect of the present disclosure provides a front-end code evaluation device, comprising:

[0034] The interaction module is configured to obtain change code and change annotation of a front-end development language of a target project, and the type of the front-end development language comprises a descriptive language and a structural language; and output the code quality of the target project.

[0035] The feature construction module is configured to: structurally process the changed code and the change annotation respectively to obtain a changed code sequence and a change annotation sequence; encode the changed code sequence and the change annotation sequence respectively to obtain a changed code encoding sequence and a change annotation encoding sequence; obtain a change vector of a front-end development language according to the changed code encoding sequence and the change annotation encoding sequence of the same front-end development language; extract features from the change vector of each front-end development language to obtain corresponding change features, and splice the change features of all front-end development languages to obtain comprehensive features; the comprehensive features include the following dimensions: label structure rationality, semantic label usage rate, annotation and code consistency, style selector efficiency, style reuse rate, annotation and style consistency, exception handling integrity, function structure rationality, and abstract syntax tree (AST) structure features;

[0036] The evaluation module is configured to determine the code quality of the target project based on the comprehensive features by using a preset algorithm.

[0037] The third aspect of the present disclosure provides an electronic device, comprising:

[0038] a processor;

[0039] a memory for storing executable instructions of the processor;

[0040] The processor is configured to read the executable instructions from the memory and execute the instructions to implement the front-end code evaluation method described above.

[0041] The fourth aspect of the present disclosure provides a computer-readable storage medium, which stores a computer program for executing the front-end code evaluation method described above.

[0042] The above-mentioned scheme of the present disclosure provides an automatic process (data acquisition, structural processing, encoding, vector conversion, feature extraction, feature splicing, and quality evaluation), which can greatly shorten the evaluation time and solve the bottleneck problem of low efficiency of manual evaluation. The deep learning model is applied to the front-end code quality evaluation, which breaks through the subjective limitations of traditional manual evaluation, automatically learns the code semantic and structural features, and realizes the automation and standardization of the evaluation. In combination with the changed code and the annotation of multiple front-end development languages, a multi-language and multi-dimensional evaluation basis is formed, so that the deep learning model can capture cross-language association problems, learn the accuracy of the description of the annotation to the code, avoid one-sidedness of single language and single dimension, make up for the defects of traditional methods that cannot handle multi-language integration problems, and improve the comprehensiveness and accuracy of the code quality evaluation. BRIEF DESCRIPTION OF DRAWINGS

[0043] Figure 1A flowchart of a front-end code review method according to an example of the present disclosure is shown.

[0044] Figure 2 A device structure diagram of front-end code review according to an example of the present disclosure is shown. DETAILED DESCRIPTION

[0045] In order to make the objectives, characteristics and advantages of the present application more obvious and easy to understand, the technical solutions in the embodiments of the present application will be described clearly and completely below with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are only some of the embodiments of the present application, but not all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor fall within the scope of protection of the present application.

[0046] In order to realize the automatic and efficient evaluation of the front-end code, as shown in the description of the present application, Figure 1 The present disclosure provides a front-end code review method, which comprises:

[0047] Operation S101, obtaining the changed code and the change comment of the front-end development language for the target project, the type of the front-end development language including descriptive language and structural language.

[0048] Front end refers to the part responsible for user interface and interactive experience in web application development, involving technologies such as HTML, CSS, JavaScript, etc., used to build the visual presentation, structural layout and interactive logic of web pages. Carrying the display of user interface (such as HTML structure, CSS style) and the implementation of user interaction behavior (such as JavaScript logic), it is the layer directly interacted by users and applications. Compared with the back end focusing on data processing, business logic and server interaction, the front end is more focused on the interface effect and operation experience visible to users, and the code quality directly affects the response speed, stability and maintainability of the application.

[0049] In one example, the changed code refers to the code content modified, added or deleted by the developer in the submitted code change record for the target project of the front end. The type of the front-end development language includes descriptive language (such as HTML, CSS) and structural language (such as JavaScript), so that the changed code can include the following three categories:

[0050] HTML changed code (Code_HTML): the code part involving the modification of HTML language structure, tags, attributes, etc.;

[0051] CSS changed code (Code_CSS): the code part about the adjustment of CSS style rules, selectors, attribute values, etc.;

[0052] JavaScript change code (Code_JS): code content that changes the logic, functions, variables, objects, etc. of the JavaScript language.

[0053] Front-end projects usually require the cooperation of HTML, CSS, and JavaScript (such as HTML for building web structures, CSS for defining web styles, and JavaScript for implementing web interactions), so the change code submitted by developers is a modification of multiple language files in the same project.

[0054] Change comments refer to the explanatory text added by developers in the code change records for the modified, added, or deleted code content. These comments are categorized according to the relevant language types, including:

[0055] HTML change comments: comments for HTML change code, used to explain the purpose or logic of HTML structure, tag modifications, and one comment can correspond to one or more code segments.

[0056] CSS change comments: comments for CSS change code, explaining the intention of CSS style rules, selectors, etc. adjustments, and one comment can correspond to one or more code segments.

[0057] JavaScript change comments: comments for JavaScript change code, explaining the reasons for JavaScript logic, function functionality changes, and one comment can correspond to one or more code segments.

[0058] Change comments are obtained from the developer's submission records along with change code, used to assist in analyzing semantic information during code review, improving the accuracy of automated review.

[0059] Operation S102, the change code and change comments are respectively structured, and the corresponding change code sequence and change comment sequence are obtained.

[0060] As mentioned earlier, front-end code contains three languages: HTML / CSS / JavaScript, with significant differences in characteristics. Structured processing can convert unstructured code and comments into machine-understandable sequences, allowing subsequent use of deep learning models for code quality evaluation, achieving a transition from manual subjective review to automated, standardized, and efficient review, especially suitable for front-end multi-language and high-integration technical scenarios.

[0061] The structured processing can convert the change code and the comment into a linear text sequence (i.e., the elements (texts) in the sequence are arranged in order, without involving two-dimensional hierarchy or nested relationship), which retains the original text order of the code and the comment, for example:

[0062] The HTML change code is:

[0063]

[0064] <h1>Title< / h1>

[0065]

[0066] Through the structured processing, the HTML change code sequence can be obtained: [" ", " <h1>Title< / h1> ", " "].

[0067] Suppose that the submission record contains two HTML change comments:

[0068] <!-- Modify the navigation bar structure -->

[0069] <!-- Optimize the footer style -->

[0070] Through the structured processing, the HTML change comment sequence can be obtained: ["<!-- Modify the navigation bar structure -->", "<!-- Optimize the footer style -->"].

[0071] In operation S103, the change code sequence and the change comment sequence are respectively encoded to obtain a change code encoding sequence and a change comment encoding sequence.

[0072] In examples of the present disclosure, a byte pair encoding (BPE) algorithm can be used to encode the change code encoding sequence and the change comment encoding sequence to obtain corresponding change code encoding sequences and change comment encoding sequences. The elements in the change code encoding sequence and the change comment encoding sequence are tokens. For example:

[0073] The above HTML change code sequence: [" ", " <h1>Title< / h1> ", " "] is encoded to obtain the HTML change code encoding sequence: ["<div", " class", "=\"header\"",">", " ", " <h1>", "Title", "< / h1> ", ""].

[0074] The above HTML change comment sequence: ["<!-- Modify the navigation bar structure -->", "<!-- Optimize the footer style -->"] is encoded to obtain the HTML change comment encoding sequence: [" <!--", "modify", "navigation bar", "structure", "-->",<!--", "optimize", "footer", "style", "-->"].

[0075] At operation S104, a change vector of the front-end development language is obtained according to the change code encoding sequence and the change comment encoding sequence.

[0076] In the operation, the embedding operation is performed on the encoding sequences (the change code encoding sequence and the change comment encoding sequence), so that the encoding sequences can be converted into a dense vector sequence. For example, a word embedding algorithm such as Word2vec can be used to convert tokens in the encoding sequence into a fixed-dimensional vector, so that the subsequent deep learning model can learn the semantic relationship of the tokens based on the vector. Regardless of HTML, CSS or JavaScript, the respective encoding vectors are converted into vectors of the same dimension.

[0077] Based on the example of the HTML change code encoding sequence and the HTML change comment encoding sequence in operation S103, the following HTML change vector (Emb_HTML) can be obtained:

[0078] Emb_HTML = [

[0079] vec([CLS]), / / Start token vector

[0080] vec("<!--"), vec("modify"),..., vec("-->"), / / Change comment encoding vector sequence

[0081] vec([SEP]), / / Separator token vector

[0082] vec("<div"), vec("class"),..., vec(""), / / Change code encoding vector sequence

[0083] vec([EOS]) / / End token vector ]

[0085] The determination method of the change vector will be described through subsequent examples, and will not be described here.

[0086] It should be noted that the change vector is obtained according to the change code encoding sequence and the change comment encoding sequence, that is, the vectors corresponding to the change code and the vectors corresponding to the change comment are fused into the same change vector. Based on this, the limitations of single code analysis can be compensated through semantic collaborative analysis, the code quality is evaluated from two dimensions of "code implementation" and "comment intention", and finally the comprehensiveness, accuracy and efficiency of the review are improved.

[0087] Operation S105, feature extraction is performed on the change vector of each front-end development language by the pre-trained deep learning model to obtain the corresponding change feature.

[0088] In the present disclosure, the change vector of each front-end development language is input into the pre-trained deep learning model for feature extraction to obtain the corresponding change feature, which can represent the comprehensive features of the changed code and the change annotation of the corresponding front-end development language. The deep learning model here is, for example, the CodeBERT model. By pre-training the deep learning model, automatic learning of code semantic and structural features can be achieved, and the automation and standardization of the review can be realized.

[0089] Operation S106, the change features of all front-end development languages are spliced to obtain comprehensive features, and the code quality of the target project is determined based on the comprehensive features by a pre-set algorithm and output.

[0090] The front-end code is composed of HTML (structure), CSS (style), and JavaScript (interaction logic). The change feature of HTML reflects the structural specification (such as tag closure and semantic tag usage), the change feature of CSS reflects the style consistency (such as responsive layout and style reuse), and the change feature of JavaScript reflects the logic robustness (such as error handling and performance optimization). After splicing, a complete evaluation system of "structure - style - logic" is formed, avoiding one-sidedness in a single dimension and making up for the defects of traditional methods that cannot handle multi-language integration problems.

[0091] In one example, a nonlinear function can be used to convert the spliced comprehensive features. Since the features extracted by the CodeBERT model (Transformer architecture) in operation S105 already contain semantic associations, the nonlinear function can further strengthen these semantic associations, thereby capturing complex associations between multi-language features and mapping the spliced high-dimensional feature vector to probability values in the 0-1 interval, thereby generating a code quality discrimination result.

[0092] The above scheme has the following technical effects:

[0093] 1. The automatic process (data acquisition, structured processing, coding, vector conversion, feature extraction, feature splicing, and quality evaluation) greatly shortens the review time and solves the bottleneck problem of low efficiency of manual review. The CodeBERT model (Transformer architecture) is applied to front-end code quality evaluation, breaking through the subjective limitations of traditional manual review, automatically learning code semantic and structural features, and realizing the automation and standardization of the review.

[0094] 2. Combine the changed code, comments in HTML / CSS / JavaScript to form a multi - language and multi - dimensional review basis, enabling the deep - learning model to capture cross - language related issues and learn the descriptive accuracy of comments on the code, avoiding the one - sidedness of a single language and single dimension, making up for the defect that traditional methods cannot handle multi - language integration problems, and enhancing the comprehensiveness and accuracy of code quality assessment.

[0095] In the above operation S102, the methods for structuring the changed code and changed comments are as follows:

[0096] Arrange the changed code linearly according to the original text structure and order of the changed code to obtain a changed code sequence;

[0097] Arrange the changed comments linearly according to the original text structure and order of the changed comments to obtain a changed comment sequence.

[0098] For the structuring of the changed code, take the HTML changed code as an example:

[0099]

[0100] <h1>Title< / h1>

[0101]

[0102] The linear arrangement strictly follows the original text structure and writing order of the code, including the tag nesting relationship (such as Package <h1>and text content ("title"), only remove the line breaks and spaces for layout, ensure the code logic structure unchanged, that is, the HTML change code sequence: [" ", " <h1>Title< / h1> ", " "].

[0103] If the user submitted code change record exists in the same front-end development language of multiple code, the multiple code is merged in a change code sequence (one front-end development language corresponds to a change code sequence). The order of the multiple code in the change code sequence is the order in the submission record, each code is structured according to the above method, and then spliced in order.

[0104] For the structured processing of change annotations, take the example of two HTML change annotations contained in the submission record:

[0105] <!-- Modify navigation bar structure -->

[0106] <!-- Optimize footer style -->

[0107] Linear arrangement strictly follows the original text structure and writing order of the annotation, including the annotation symbol <!-- --> and text content, ensure that the semantics of the annotation and the logical order at the time of submission are not changed, each annotation is kept as an independent element, and the text in the annotation is not split (such as "modify navigation bar structure" as a whole), that is, the HTML change annotation sequence: [" <!--modify navigation bar structure -->", " <!-- optimize footer style -->"].

[0108] The acquisition of CSS change code sequence is the same as the above HTML (that is, the structured processing of change code sequence of descriptive language is as described above), and for the structured processing of front-end development language of type structural language (that is, JavaScript), not only the acquisition of change code sequence and change annotation sequence needs to be carried out according to the above method, but also the rich structural features contained in the JavaScript code itself need to be further extracted to obtain the structure sequence, specifically:

[0109] First, parse the change code into an abstract syntax tree, perform pre-order, in-order and post-order traversal on the abstract syntax tree, obtain the corresponding pre-order sequence, in-order sequence and post-order sequence, and finally, splice the pre-order sequence, in-order sequence and post-order sequence to obtain the structure sequence of the change code.

[0110] JavaScript as a structural language, its logic robustness (such as function nesting, conditional statement structure) cannot be fully captured by linear text sequence. The structural sequence can be extracted to represent the syntax level and logical relationship of the code, such as function declaration, operator precedence, etc., so as to comprehensively evaluate the structural quality of the code.

[0111] The above pre-order traversal refers to: according to the order of root node → left subtree → right subtree, the syntax tree is traversed: the root node of the syntax tree is visited first, and then the child nodes are recursively traversed. It is suitable for extracting the statement order and top-level structure of the code, such as accessing the if condition judgment node first, and then accessing the execution statement node inside it.

[0112] The above in-order traversal refers to: according to the order of left subtree → root node → right subtree, the syntax tree is traversed: mainly used for parsing expression structure, such as accessing arithmetic expressions in the order of "left operand → operator → right operand", which can accurately reflect the operation priority (such as the in-order traversal of a + b × c can capture the operation order of × before +).

[0113] The above post-order traversal refers to: according to the order of left subtree → right subtree → root node, the syntax tree is traversed: used to handle the final calculation or resource release of the operator, such as traversing the function call node, processing the parameter expression first, and then processing the function call itself, to ensure the correctness of the logical execution order.

[0114] The three traversal methods capture the structural characteristics of the syntax tree from different dimensions. Pre-order traversal focuses on statement flow, in-order traversal parses expression logic, and post-order traversal handles execution order. The structure sequence formed by the combination of the three can fully represent the structural characteristics of JavaScript code.

[0115] In the operation S104, for a front-end development language of a descriptive language type, the change vector of the front-end development language is obtained in the following manner:

[0116] The change comment coding sequence and the change code coding sequence are spliced to obtain a comprehensive coding sequence of the front-end development language, and the comprehensive coding sequence includes, in sequence: a start mark, the change comment coding sequence, an interval mark, the change code coding sequence, and an end mark;

[0117] The comprehensive coding sequence is converted according to a preset algorithm to obtain the change vector.

[0118] The HTML change code coding sequence is: ["<div", " class", "=\"header\"", ">", " ", "< / h1> <h1>", "Title", "< / h1> ", " "], HTML changed comment coding sequence: ["<!--", "Modify", "navigation bar", "structure", "-->", "<!--", "Optimize", "footer", "style", "-->"] as an example, the combined coding sequence obtained after splicing is:

[0119] {[CLS],

[0120] ["<!--", "Modify", "navigation bar", "structure", "-->", "<!--", "Optimize", "footer", "style", "-->"],

[0121] [SEP],

[0122] ["<div", " class", "=\"header\"", ">", " ", " <h1>", "Title", "< / h1> ",""],

[0123] [EOS]

[0124] }, where [CLS] is the start token, [SEP] is the separator token, and [EOS] is the end token.

[0125] Using a preset algorithm (such as the Word2vec algorithm), each token in the comprehensive coding sequence is mapped to a vector to obtain a change vector. For example, in the above comprehensive coding sequence: the 1st token: [CLS] is mapped to the vector vec([CLS]), the 2nd token: "<!--" is mapped to the vector vec("<!--"), the 3rd token: "修改" is mapped to the vector vec("修改"), and so on. The change vector of the HTML can be obtained as follows:

[0127] vec([CLS]),

[0128] vec("<!--"), vec("修改"), vec("导航栏"), vec("结构"), vec("--->"),

[0129] vec("<!--"), vec("优化"), vec("footer"), vec("样式"), vec("--->"),

[0130] vec([SEP]),

[0131] vec("<div"), vec(" class"), vec("=\"header\""), vec(">"), vec(" "),

[0132] vec(" <h1>"), vec("Title"), vec("< / h1> "), vec(""),

[0133] vec([EOS])

[0135] For a front-end development language of structural language type, the method for obtaining the change vector of the front-end development language is as follows:

[0136] The change annotation coding sequence, the change code coding sequence, and the structure coding sequence are concatenated to obtain the comprehensive coding sequence of the front-end development language. The comprehensive coding sequence includes in sequence: a start marker, the change annotation coding sequence, an interval marker, the change code coding sequence, an interval marker, the structure coding sequence, and an end marker;

[0137] The comprehensive coding sequence is converted according to the preset algorithm to obtain a change vector.

[0138] ​​That is, for the JavaScript code, the structure coding sequence also needs to be spliced in the above order. The structure sequence of the JavaScript code is also coded according to the coding mode as described in operation S103 to obtain the structure coding sequence, which will not be described here.

[0139] The user-submitted code change record adopts the "comment + code" vector fusion mode for HTML, CSS, and JavaScript, so that the change data of different languages is processed in a unified feature space, facilitating subsequent splicing of multilingual features and code quality judgment. In particular, the change vector fusion code, comment, and structure feature of JavaScript can enable the deep learning model to simultaneously learn the "semantic meaning" and "structure specification" of the code, based on which the robustness and maintainability of the code can be comprehensively evaluated.

[0140] After obtaining the change vector of each front-end development language, the change vector can be input into a pre-trained deep learning model, such as the CodeBERT model (Transformer architecture) described above. The change vector is input into the model in the structure of [CLS]+comment+[SEP]+code+[EOS], and the multi-layer attention mechanism of the Transformer integrates the sequence information layer by layer:

[0141] The [CLS] mark is used to aggregate global features;

[0142] The [SEP] separates the comment and the code, helping the model to distinguish different types of data;

[0143] The output vector at the [EOS] position (the output vector corresponding to the end mark position, that is, the change feature) fuses the semantic information of the comment, the structure of the code, and the association information of the two, that is, the comprehensive feature representing the change vector.

[0144] In the present disclosure, the change features of each front-end development language are spliced, that is, the comprehensive feature of the changed code in the record submitted this time is obtained. Based on this, the quality of the front-end code of the target project is judged.

[0145] In one example, if the code quality of the target project does not meet the preset condition, for example, the threshold is 0.5, and the code quality of the target project is less than 0.5, then the review opinion can be generated according to the comprehensive feature output by the deep learning model.

[0146] In the above scheme, the change feature obtained by the deep learning model processing the change vector of each language is a comprehensive feature that fuses the code and the comment of the corresponding language, and the change feature contains information in multiple dimensions, for example:

[0147] The HTML change feature can contain the following dimensions:

[0148] Tag structure rationality: the value of this dimension can represent the normativity and logic of the use of tags in the HTML code;

[0149] Semantic tag usage rate: the value of this dimension can represent the use of semantic tags (such as <nav> 、 <header>a proportion of use of the JavaScript code;

[0150] Annotation consistency with code: the value of this dimension can represent the matching degree of the HTML change annotation and the actual code change content.

[0151] The CSS change feature can include the following dimensions:

[0152] Style selector efficiency: the value of this dimension can represent the complexity and performance optimization degree of the CSS selector, reflecting whether the selector locates the target element in an efficient way;

[0153] Style reuse rate: the value of this dimension can represent the frequency of reuse of CSS style rules, reflecting the ability of the code to improve reusability and maintainability through common classes and the like;

[0154] Annotation consistency with style: the value of this dimension can represent the matching degree of the CSS change annotation and the actual style rule, reflecting the accurate description ability of the annotation to the style logic.

[0155] The JavaScript change feature can include the following dimensions:

[0156] Exception handling integrity: the value of this dimension can represent the coverage degree of the exception handling mechanism (such as Promise.catch(), try-catch) in the JavaScript code, reflecting the robustness of the code in dealing with runtime exceptions;

[0157] Function structure rationality: the value of this dimension can represent the specification degree of the parameter design, logic nesting and return value processing of the JavaScript function, reflecting the understandability and maintainability of the function structure;

[0158] AST structure feature: the value of this dimension can represent the syntax structure and logical hierarchy extracted by the abstract syntax tree (AST) of the JavaScript code, reflecting the structural features and logical robustness of the code.

[0159] The comprehensive feature obtained by splicing the above three change features can include all the dimensions described above, and the above comprehensive feature can be detected according to a preset template to determine the abnormal dimensions, and the review opinions are output according to the template for the abnormal dimensions, at least including: abnormal reason, modification suggestion and the like.

[0160] In order to realize the front-end code review method described above, as shown in Figure 2 The present disclosure also provides a front-end code review device, which comprises:

[0161] An interaction module 10 is configured to obtain change code and change annotation of a front-end development language for a target project, the front-end development language including a descriptive language and a structural language, and output code quality of the target project.

[0162] A feature construction module 20 is configured to respectively perform structural processing on the change code and the change annotation to obtain a change code sequence and a change annotation sequence, the change code sequence and the change annotation sequence being linear text sequences; encode the change code sequence and the change annotation sequence to obtain a change code encoding sequence and a change annotation encoding sequence, the change code encoding sequence and the change annotation encoding sequence being sequences composed of word units; obtain a change vector of a corresponding front-end development language according to the change code encoding sequence and the change annotation encoding sequence; perform feature extraction on the change vector of each front-end development language through a pre-trained deep learning model to obtain a corresponding change feature; and splice the change features of all front-end development languages to obtain a comprehensive feature, the comprehensive feature including the following dimensions: label structure rationality, semantic label usage rate, annotation and code consistency, style selector efficiency, style reuse rate, annotation and style consistency, exception handling integrity, function structure rationality, and abstract syntax tree (AST) structure feature.

[0163] An evaluation module 30 is configured to determine the code quality of the target project based on the comprehensive feature through a preset algorithm.

[0164] In one example, when the change code and the change annotation are respectively processed, the feature construction module 20 is further configured to linearly arrange the change code according to an original text structure and order of the change code to obtain a change code sequence.

[0165] The change annotation is linearly arranged according to an original text structure and order of the change annotation to obtain a change annotation sequence.

[0166] When the change code of the front-end development language of the structural language type is processed, the feature construction module 20 is further configured to parse the change code into an abstract syntax tree, perform pre-order, in-order, and post-order traversal on the abstract syntax tree to obtain a corresponding pre-order sequence, in-order sequence, and post-order sequence, splice the pre-order sequence, in-order sequence, and post-order sequence to obtain a structure sequence of the change code, and encode the structure sequence to obtain a structure encoding sequence.

[0167] For the front-end development language of the type of the descriptive language, the feature construction module 20 is specifically configured to splice the change annotation coding sequence and the change code coding sequence to obtain a comprehensive coding sequence of the front-end development language, the comprehensive coding sequence comprising, in sequence, a start mark, the change annotation coding sequence, a separation mark, the change code coding sequence, and an end mark; and convert the comprehensive coding sequence according to a preset algorithm to obtain the change vector.

[0168] For the front-end development language of the type of the structural language, the feature construction module 20 is specifically configured to splice the change annotation coding sequence, the change code coding sequence, and the structural coding sequence to obtain a comprehensive coding sequence of the front-end development language, the comprehensive coding sequence comprising, in sequence, a start mark, the change annotation coding sequence, a separation mark, the change code coding sequence, a separation mark, the structural coding sequence, and an end mark; and convert the comprehensive coding sequence according to a preset algorithm to obtain the change vector.

[0169] The feature construction module 20 is specifically configured to process the change vector by using a pre-trained deep learning model to obtain an output vector corresponding to the position of the end mark as the change feature, the output vector being used to represent the comprehensive feature of the change vector.

[0170] If it is determined that the code quality of the target project does not meet the preset condition, the review module 30 is further configured to detect the comprehensive feature according to a preset template, determine an abnormal dimension, and output a review opinion according to the abnormal dimension.

[0171] Exemplarily, the present disclosure also provides an electronic device, comprising:

[0172] a processor;

[0173] a memory for storing executable instructions of the processor;

[0174] the processor is configured to read the executable instructions from the memory and execute the instructions to implement the front-end code review method.

[0175] Exemplarily, the present disclosure also provides a computer readable storage medium, the storage medium storing a computer program, the computer program being used to execute the front-end code review method.

[0176] In addition to the methods and devices described above, embodiments of the present application can also be a computer program product that includes computer program instructions that, when run by a processor, cause the processor to perform steps of the methods according to various embodiments of the present application described in the above "Exemplary Methods" section of the specification.

[0177] The computer program instructions can be written in any combination of one or more programming languages, including an object oriented programming language such as Java, C++, or the like, and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code can execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device and partly on a remote computing device or entirely on the remote computing device or server.

[0178] In addition, embodiments of the present application can also be a computer readable storage medium having stored thereon computer program instructions that, when run by a processor, cause the processor to perform steps of the methods according to various embodiments of the present application described in the above "Exemplary Methods" section of the specification.

[0179] The computer readable storage medium can be any combination of one or more computer readable media. The computer readable medium can be a computer readable signal medium or a computer readable storage medium. The computer readable storage medium can include, for example, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the above. More specific examples (a non-exhaustive list) of the computer readable storage medium include the following: an electrical connection having one or more wires, a portable disc, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or Flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0180] The above describes the basic principles of the present application in conjunction with specific embodiments, but it should be noted that the advantages, benefits, effects and the like mentioned in the present application are only examples and are not limiting, and these advantages, benefits, effects and the like cannot be considered as necessary for each embodiment of the present application. In addition, the above specific details are only for the purpose of example and understanding, and are not limiting, and the above details do not limit the present application to the above specific details.

[0181] The block diagrams of the devices, apparatuses, equipment, systems referred to in this application are only illustrative examples and are not intended to require or imply that the connection, arrangement, configuration must be as shown in the block diagrams. As those skilled in the art will recognize, these devices, apparatuses, equipment, systems can be connected, arranged, configured in any manner. Words such as "include", "comprise", "have", etc. are open-ended words that are to be interpreted in the context where they are used. They are not meant to be limiting. Words such as "or" and "and" are to be interpreted as having the same meaning as "and / or". Words such as "including" and "having" are to be interpreted as "including but not limited to". Words such as "or" and "and" are to be interpreted as having the same meaning as "and / or". Words such as "including" and "having" are to be interpreted as "including but not limited to". The word "or" as used in a phrase such as "A or B" means "A or B or both". As used herein, the term "if' can be construed to mean "when" or "upon" or "in response to the happening of" or "in response to the condition of". As used herein, the term "if' can be construed to mean "when" or "upon" or "in response to the happening of" or "in response to the condition of". As used herein, the term "such as" means "such as but not limited to".

[0182] It is also important to note that the devices, apparatuses, and methods of the present application can be embodied in a variety of forms without departing from the spirit or essential characteristics thereof. These and other variations thereof will become apparent to those skilled in the art from the foregoing description wherein it is understood that all changes, modifications, variations, additions, and sub-combinations are meant to be

[0183] The above description of disclosed aspects is given for illustrative purposes only and is not intended to limit the scope of the application. Various modifications to these aspects will be readily apparent to those skilled in the art, and the generic principles defined herein can be applied to other aspects without departing from the scope of the application. Thus, the present application is not intended to be limited to the aspects shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

[0184] The above description has been given for illustrative and descriptive purposes. Furthermore, this description is not intended to limit the embodiments of the present application to the forms disclosed herein. Although various example aspects and embodiments have been discussed above, those of ordinary skill in the art will appreciate certain variations, modifications, changes, additions and sub-combinations thereof.< / header> < / nav>

Claims

1. A method of reviewing front-end code, the method comprising: The method comprises: obtaining changed code and changed annotations of a front-end development language for a target project, the types of the front-end development language including a descriptive language and a structural language; the descriptive language includes HTML and CSS, and is used to carry a display of a user interface; the structural language includes JavaScript, and is used to implement a user interaction behavior; structurally processing the changed code and the changed annotations respectively to obtain corresponding changed code sequences and changed annotation sequences, the changed code sequences and the changed annotation sequences being linear text sequences; elements in the linear text sequences are arranged according to original text structures and writing orders of the changed code or the changed annotations; encoding the changed code sequences and the changed annotation sequences respectively to obtain changed code encoding sequences and changed annotation encoding sequences, the changed code encoding sequences and the changed annotation encoding sequences being sequences composed of word units; obtaining changed vectors of corresponding front-end development languages according to the changed code encoding sequences and the changed annotation encoding sequences; fusing vectors corresponding to the changed code and vectors corresponding to the changed annotations into the changed vectors; extracting features of the changed vectors of each front-end development language through a pre-trained deep learning model to obtain corresponding changed features; splicing the changed features of all the front-end development languages to obtain comprehensive features; determining, based on the comprehensive features, through a preset algorithm, code quality of the target project and outputting; the comprehensive features include the following dimensions: the HTML changed features include tag structure rationality, semantic tag usage rate and annotation and code consistency; the CSS changed features include style selector efficiency, style reuse rate and annotation and style consistency; the JavaScript changed features include exception handling integrity, function structure rationality and abstract syntax tree (AST) structure features.

2. The method of claim 1, wherein, The structurally processing the changed code and the changed annotations respectively comprises: linearly arranging the changed code according to original text structures and orders of the changed code to obtain changed code sequences; linearly arranging the changed annotations according to original text structures and orders of the changed annotations to obtain changed annotation sequences.

3. The method of claim 2, wherein, When the changed code of the front-end development language of the structural language type is structurally processed, the method further comprises: parsing the changed code into an abstract syntax tree; performing pre-order, in-order and post-order traversals on the abstract syntax tree to obtain corresponding pre-order sequences, in-order sequences and post-order sequences; splicing the pre-order sequences, the in-order sequences and the post-order sequences to obtain a structure sequence of the changed code; correspondingly, the method further comprises: encoding the structure sequence to obtain a structure encoding sequence.

4. The method of claim 2, wherein, For the front-end development language of the descriptive language type, obtaining the changed vector of the front-end development language comprises: The change annotation coding sequence and the change code coding sequence are spliced to obtain a comprehensive coding sequence of the front-end development language, and the comprehensive coding sequence sequentially includes a start mark, the change annotation coding sequence, a separation mark, the change code coding sequence, and an end mark; The comprehensive coding sequence is converted according to a preset algorithm to obtain the change vector.

5. The method of claim 3, wherein, For a front-end development language of a type of the structural language, a change vector of the front-end development language is obtained, including: The change annotation coding sequence, the change code coding sequence, and the structural coding sequence are spliced to obtain a comprehensive coding sequence of the front-end development language, and the comprehensive coding sequence sequentially includes a start mark, the change annotation coding sequence, a separation mark, the change code coding sequence, a separation mark, the structural coding sequence, and an end mark; The comprehensive coding sequence is converted according to a preset algorithm to obtain the change vector.

6. The method according to claim 4 or 5, characterized in that, The change vector of each front-end development language is subjected to feature extraction to obtain corresponding change features, including: The change vector is processed through a pre-trained deep learning model to obtain an output vector at a position corresponding to the end mark as the change feature, and the output vector is used to represent the comprehensive features of the change vector.

7. The method of claim 1, wherein, If it is determined that the code quality of the target project does not meet the preset condition, the method further includes: detecting the comprehensive features according to a preset template to determine an abnormal dimension, and outputting an evaluation opinion for the abnormal dimension according to the template.

8. A front-end code review device, characterized in that, Including: An interaction module is configured to obtain change code and change annotation of a front-end development language of a target project, and the type of the front-end development language includes a descriptive language and a structural language; and output the code quality of the target project; the descriptive language includes HTML and CSS, and is used to carry the display of a user interface; and the structural language includes JavaScript, and is used to implement user interaction behavior; A feature construction module is configured to structure the change code and the change annotation respectively to obtain corresponding change code sequences and change annotation sequences, the change code sequences and the change annotation sequences are linear text sequences, and elements in the linear text sequences are arranged according to the original text structure and writing order of the change code or the change annotation; the change code sequences and the change annotation sequences are encoded respectively to obtain change code coding sequences and change annotation coding sequences, the change code coding sequences and the change annotation coding sequences are sequences composed of word units; according to the change code coding sequences and the change annotation coding sequences of the same front-end development language, a change vector of the front-end development language is obtained, and the vector corresponding to the change code and the vector corresponding to the change annotation are fused into the change vector; The change vector of each front-end development language is feature extracted to obtain corresponding change features, and the change features of all front-end development languages are spliced to obtain comprehensive features; the comprehensive features include the following dimensions: the HTML change features include tag structure rationality, semantic tag usage rate, and annotation and code consistency; the CSS change features include style selector efficiency, style reuse rate, and annotation and style consistency; the JavaScript change features include exception handling integrity, function structure rationality, and abstract syntax tree (AST) structure features; The review module is configured to determine the code quality of the target project based on the comprehensive features by using a preset algorithm.

9. An electronic device, comprising: The method comprises the following steps: a processor; a memory for storing executable instructions of the processor; the processor is configured to read the executable instructions from the memory and execute the instructions to implement the front-end code review method according to any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The storage medium stores a computer program, and the computer program is configured to execute the front-end code review method according to any one of claims 1-7.

Images