阅读说明：本技术 一种web前端代码转换方法 (Web front-end code conversion method ) 是由 李海超 王志强 王红艳 郭旭东 周益周 于 2021-07-07 设计创作，主要内容包括：本发明涉及一种web前端代码转换方法,属于计算机网络技术领域。本发明可以快速的根据原有软件前端框架重新构建新的软件前端框架,将需要转换的前端文件提交后,根据旧有框架在可转换的新框架中选择需要转换的框架,转换成功后即可获取新的前端文件。本发明涉及多种框架之间的转换,使已有系统、已有功能可复用机率大大提升；异常记录可总结前端代码不规范各类情况,为前端技术规范提供参考；代码转换可获取新的规范前端代码,可检测原有代码是否规范,并为原有代码优化提供参考。(The invention relates to a web front-end code conversion method, and belongs to the technical field of computer networks. The invention can quickly reconstruct a new software front-end framework according to the original software front-end framework, after the front-end file to be converted is submitted, the framework to be converted is selected from the convertible new framework according to the original framework, and the new front-end file can be obtained after the conversion is successful. The invention relates to the conversion among a plurality of frames, which greatly improves the reusability probability of the existing system and the existing functions; the exception records can summarize various conditions of the non-standard front-end codes and provide reference for the technical specification of the front end; the code conversion can acquire a new standard front-end code, can detect whether the original code is standard or not, and provides reference for the optimization of the original code.)

1. A web front-end transcoding method, comprising the steps of:

s1 selection frame

After inputting a front-end project file, selecting the name of the existing frame, and selecting a new frame to be converted according to the frame which can be converted by the existing frame;

s2, code detection and specification

Detecting codes before frame conversion, detecting whether a frame of an input file is a selected existing frame according to frame configuration information of the input file, detecting whether the frame of the input file meets a corresponding standard according to a code specification standard, formatting the codes if the frame of the input file does not meet the corresponding standard, and performing the next step after the codes are specified;

s3, code conversion

After code detection and specification, code conversion is carried out, and the code is converted into a selected code with a new frame format;

s4, output file

When no abnormity occurs in code conversion, the method enters the stage, and the output file is a new front-end frame file;

s5, outputting failure reason and solution

And after the code conversion is abnormal and the code conversion operation is finished, the stage is entered, the abnormity occurring in the conversion process and the corresponding solution are prompted, and research personnel can operate according to the solution and then input the file again for frame conversion.

2. The web front end transcoding method of claim 1, wherein the step S1 is preceded by a basic step S0, the basic step S0 comprising the steps of:

s01, researching a common software framework of the front-end project;

s02, determining whether the two frames can be converted with each other according to the grammar document information of each two frames, and recording;

s03, setting grammar code specification standard for each frame according to the grammar document information of the frame;

s04, setting a file structure required by each frame according to the information required by the configuration of each frame;

s05, setting the AST format of abstract syntax tree needed by each frame according to the syntax file information of the frame;

s06, developing corresponding abstract syntax tree format conversion functions for the two frames which can be converted with each other;

s07, developing a corresponding abstract syntax tree decompiling function file for each frame;

and S08, performing file structure corresponding relation investigation and recording on the two frames capable of being converted mutually.

3. The web front-end transcoding method of claim 2, wherein the step S06 specifically comprises the steps of:

s061, traversing the abstract syntax tree by using a traversal method of Javascript, and extracting definition attribute information;

s062, processing attribute information in different formats, and converting life cycle and component state information according to the format of the new abstract syntax tree;

s063, splicing the processed information according to the format of the new abstract syntax tree, and finally obtaining the new abstract syntax tree.

4. The web front end transcoding method of claim 3, wherein the defining attribute information comprises: attribute value, attribute type, default value.

5. The web front-end transcoding method of any of claims 2 to 4, wherein the selecting a new framework to be transformed according to the existing framework transformable framework in step S1 specifically comprises: the existing frames that can be converted are shown according to the result of the basic step S02, from which a new frame that wants to be converted is selected.

6. The web front-end transcoding method of any one of claims 2 to 4, wherein the step S2 of detecting whether the frame of the input file conforms to the corresponding standard according to the code specification standard specifically comprises: it is detected whether the frame of the input file meets the corresponding standard according to the code specification standard set in the basic step S03.

7. The web front-end transcoding method of any of claims 2-4, wherein the formatting code in step S2 specifically comprises: the code is formatted using an esint code formatting tool.

8. The web front-end transcoding method of any of claims 2-4, wherein the step S3 specifically comprises the steps of:

s31, for the project file passing the process of S2 "code detection and specification", firstly extracting the directory structure of the project file by the FileSystemObject object method of Javascript, and creating the corresponding structure file of the selected new frame according to the file structure required by the frame set in the basic step S04 and saving the corresponding relation of the new frame file structure according to the file structure corresponding relation between the new frame and the old frame recorded in the basic step S08;

s32, analyzing the project file by using an analyzer, and finally generating an abstract syntax tree;

s33, the abstract syntax tree is recast, and the abstract syntax tree is converted into a format required by the new frame according to the abstract syntax tree format required by the new frame set in the basic step S05 and the abstract syntax tree format conversion function developed in the basic step S06;

s34, using the abstract syntax tree decompilation function of the basic step S07 to decompilate the recast abstract syntax tree into the code of the new frame;

s35, beautifying the code of the new frame by a code formatting tool and then outputting a code file;

s36, placing the files output by the step S35 under the folders corresponding to the new frames according to the corresponding relation of the new and old frame file structures in the step S31;

and S37, recording the abnormality when any one of the operations is abnormal, judging whether the next step can be carried out or not, if so, continuing the next step, and if not, stopping the module operation and entering the stage S5.

9. The web front end transcoding method of claim 8, wherein the parser is a babylon parser.

10. The web front-end transcoding method of claim 8, wherein the code formatting tool used in the step S35 is preter-eslin t.

Technical Field

The invention belongs to the technical field of computer networks, and particularly relates to a web front-end code conversion method.

Background

In recent years, as technology is updated and iterated frequently, an original web front-end framework cannot meet new development requirements, and conversion and upgrading of the web front-end framework occur at present. In the traditional front-end architecture conversion and upgrade, research and development personnel need to re-transcribe new codes or update new characteristics by referring to corresponding frame documents, and the research and development personnel need to spend a great deal of time and energy, so that a more concise and labor-saving web front-end conversion method is needed.

Disclosure of Invention

Technical problem to be solved

The technical problem to be solved by the invention is how to provide a web front-end code conversion method so as to solve the problem that research and development personnel need to spend a lot of time and energy when a web front-end framework is converted and upgraded.

(II) technical scheme

In order to solve the above technical problem, the present invention provides a web front-end transcoding method, which includes the following steps:

s1 selection frame

After inputting a front-end project file, selecting the name of the existing frame, and selecting a new frame to be converted according to the frame which can be converted by the existing frame;

s2, code detection and specification

Detecting codes before frame conversion, detecting whether a frame of an input file is a selected existing frame according to frame configuration information of the input file, detecting whether the frame of the input file meets a corresponding standard according to a code specification standard, formatting the codes if the frame of the input file does not meet the corresponding standard, and performing the next step after the codes are specified;

s3, code conversion

After code detection and specification, code conversion is carried out, and the code is converted into a selected code with a new frame format;

s4, output file

When no abnormity occurs in code conversion, the method enters the stage, and the output file is a new front-end frame file;

s5, outputting failure reason and solution

And after the code conversion is abnormal and the code conversion operation is finished, the stage is entered, the abnormity occurring in the conversion process and the corresponding solution are prompted, and research personnel can operate according to the solution and then input the file again for frame conversion.

Further, the step S1 is preceded by a basic step S0, and the basic step S0 includes the following steps:

s01, researching a common software framework of the front-end project;

s02, determining whether the two frames can be converted with each other according to the grammar document information of each two frames, and recording;

s03, setting grammar code specification standard for each frame according to the grammar document information of the frame;

s04, setting a file structure required by each frame according to the information required by the configuration of each frame;

s05, setting the AST format of abstract syntax tree needed by each frame according to the syntax file information of the frame;

s06, developing corresponding abstract syntax tree format conversion functions for the two frames which can be converted with each other;

s07, developing a corresponding abstract syntax tree decompiling function file for each frame;

and S08, performing file structure corresponding relation investigation and recording on the two frames capable of being converted mutually.

Further, the step S06 specifically includes the following steps:

s061, traversing the abstract syntax tree by using a traversal method of Javascript, and extracting definition attribute information;

s062, processing attribute information in different formats, and converting life cycle and component state information according to the format of the new abstract syntax tree;

s063, splicing the processed information according to the format of the new abstract syntax tree, and finally obtaining the new abstract syntax tree.

Further, the defining attribute information includes: attribute value, attribute type, default value.

Further, the step S1 of selecting a new frame to be converted according to the existing frame that can be converted specifically includes: the existing frames that can be converted are shown according to the result of the basic step S02, from which a new frame that wants to be converted is selected.

Further, the step S2 of detecting whether the frame of the input file meets the corresponding standard according to the code specification standard specifically includes: it is detected whether the frame of the input file meets the corresponding standard according to the code specification standard set in the basic step S03.

Further, the formatting the code in step S2 specifically includes: the code is formatted using an esint code formatting tool.

Further, the step S3 specifically includes the following steps:

s31, for the project file passing the process of S2 "code detection and specification", firstly extracting the directory structure of the project file by the FileSystemObject object method of Javascript, and creating the corresponding structure file of the selected new frame according to the file structure required by the frame set in the basic step S04 and saving the corresponding relation of the new frame file structure according to the file structure corresponding relation between the new frame and the old frame recorded in the basic step S08;

s32, analyzing the project file by using an analyzer, and finally generating an abstract syntax tree;

s33, the abstract syntax tree is recast, and the abstract syntax tree is converted into a format required by the new frame according to the abstract syntax tree format required by the new frame set in the basic step S05 and the abstract syntax tree format conversion function developed in the basic step S06;

s34, using the abstract syntax tree decompilation function of the basic step S07 to decompilate the recast abstract syntax tree into the code of the new frame;

s35, beautifying the code of the new frame by a code formatting tool and then outputting a code file;

s36, placing the files output by the step S35 under the folders corresponding to the new frames according to the corresponding relation of the new and old frame file structures in the step S31;

and S37, recording the abnormality when any one of the operations is abnormal, judging whether the next step can be carried out or not, if so, continuing the next step, and if not, stopping the module operation and entering the stage S5.

Further, the resolver is a babylon resolver.

Further, the code formatting tool used in step S35 is preter-eslint.

(III) advantageous effects

Compared with the prior front-end code conversion technology, the invention has more universality and also has the following advantages:

(1) the invention relates to the conversion among a plurality of frames, which greatly improves the reusability probability of the existing system and the existing functions;

(2) the exception records can summarize various conditions of the non-standard front-end codes and provide reference for the technical specification of the front end;

(3) the code conversion can acquire a new standard front-end code, can detect whether the original code is standard or not, and provides reference for the optimization of the original code.

Drawings

FIG. 1 is a functional flow diagram of the basic step 6 of the present invention;

FIG. 2 is a system architecture of the present invention;

FIG. 3 is a flow chart of the transcoding operation of the present invention.

Detailed Description

In order to make the objects, contents and advantages of the present invention clearer, the following detailed description of the embodiments of the present invention will be made in conjunction with the accompanying drawings and examples.

In order to solve the above problems, the present invention provides a method for converting a web front-end code, which can quickly reconstruct a new software front-end framework according to an original software front-end framework. For example, Vue (a Web application framework that creates a single page application) and React (an open source JavaScript library that renders data as an HTML view) can be translated into each other, and Vue2 (a version of Vue framework) can be upgraded to Vue3 (an upgraded version of Vue2 framework, which is a big difference from Vue 2). After the front-end file needing to be converted is submitted, the frame needing to be converted is selected from the convertible new frames according to the old frame, and the new front-end file can be obtained after the conversion is successful.

The invention needs to go through the basic step S0 in the creation process, and the basic step S0 comprises the following steps:

s01, researching a common software framework of the front-end project;

s02, determining whether the two frames can be converted with each other according to the information such as grammar documents of every two frames, and recording;

s03, setting grammar code specification standard for each frame according to the information such as grammar document of the frame;

s04, setting a file structure required by each frame according to information required by the configuration of each frame and the like;

s05, setting Abstract Syntax Tree (AST for short) format required by each frame according to information such as Syntax document of the frame;

s06, developing corresponding abstract syntax tree format conversion functions for the two frames which can be converted with each other;

s07, developing a corresponding abstract syntax tree decompiling function file for each frame;

and S08, performing file structure corresponding relation investigation and recording on the two frames capable of being converted mutually.

The function flow of the basic step S06 can be decomposed into the following steps:

s061, traversing the abstract syntax tree by using a traversal method of Javascript and the like, and extracting information such as attribute values, attribute types and default values of defined attributes;

s062, processing attribute values in different formats, and converting information such as a life cycle, a component state and the like according to the format of the new abstract syntax tree;

s063, splicing the processed information according to the format of the new abstract syntax tree, and finally obtaining the new abstract syntax tree.

The system architecture of the present invention is as follows, and the architecture comprises the following steps:

s1 selection frame

After the front-end project file is input, the name of the existing frame is selected, the convertible frame of the existing frame can be displayed according to the investigation result of the basic step S02, and the new frame to be converted is selected.

S2, code detection and specification

Before the frame conversion, the codes need to be detected, whether the frame of the input file is the selected existing frame is detected according to the frame configuration information of the input file, whether the frame of the input file meets the corresponding standard is detected according to the code specification standard set in the basic step S03, if the frame of the input file is not standard, the codes can be formatted by using code formatting tools such as eslin, and the next step can be carried out after the codes are specified.

S3, code conversion

And after code detection and specification, code conversion is carried out, and the code is converted into the selected code with the new frame format.

The module is the key point of the invention, and the module structure and the operation steps are as follows:

after the code detection and specification of block S2, the method will proceed with the following steps:

s31, for the project files passing through the process of code detection and specification of the module S2, firstly extracting the directory structure of the project files by methods such as the FileSystemObject object of Javascript (having the function of accessing the file system of the computer), and creating the corresponding structure files of the selected new frame according to the file structure required by the frame set in the basic step S04 and saving the corresponding relation of the file structures of the new frame and the old frame according to the corresponding relation of the file structures between the new frame and the old frame recorded in the basic step S08;

s32, then, a parser, such as a babylon parser (a JavaScript parser used in babel), is used for parsing the project file, and finally, an abstract syntax tree is generated;

s33, the abstract syntax tree is recast, and the abstract syntax tree is converted into a format required by the new frame according to the abstract syntax tree format required by the new frame set in the basic step S05 and the abstract syntax tree format conversion function developed in the basic step S06;

s34, using the abstract syntax tree decompilation function of the basic step S07 to decompilate the recast abstract syntax tree into the code of the new frame;

s35, beautifying the code of the new frame by a code formatting tool such as preter-eslin and then outputting a code file;

s36, placing the files output by the step S35 under the folders corresponding to the new frames according to the corresponding relation of the new and old frame file structures in the step S31;

and S37, if any one of the operations is abnormal, recording the abnormality, and judging whether the next step can be carried out or not, if yes, continuing the next step, and if not, stopping the module operation and entering a stage S5.

S4, output file

When no exception occurs in code conversion, the method enters the stage, and the output file is the new front-end frame file.

S5, outputting failure reason and solution

And after the code conversion is abnormal and the code conversion operation is finished, the stage is entered, the abnormity occurring in the conversion process and the corresponding solution are prompted, and research personnel can operate according to the solution and then input the file again for frame conversion.

Taking the front-end conversion fact frame as an Vue frame as an example, the typical usage flow described in the present invention includes the following steps:

(1) after the front-end project file is input, firstly, selecting a frame, selecting an React frame by an original frame, selecting a Vue frame from corresponding convertible frames given according to the investigation result of the basic step S02, and carrying out the next step;

(2) after the frame is selected, code detection is needed, whether the frame of the input file is a fact frame is detected according to frame configuration information of the input file, whether the frame of the input file meets a corresponding standard is detected according to a code specification standard set in a basic step S03, the frame of the input file is normalized through formatting tools such as eslint and the like under the condition of non-conformity, and then the next step is carried out, and if the frame meets the standard, the next step is directly carried out;

(3) after code detection and specification, code conversion is carried out, and the code is converted into a selected code with a new frame format, and specific operation is described below;

(4) if the conversion is successful, outputting the converted file after successful prompt;

(5) if the conversion fails, outputting the failure reason and the related solution, and after the solution is solved, performing the re-input conversion again and re-entering the step (1).

Wherein the step (3) is to be specifically subjected to the following operations:

extracting a directory structure of an original React frame project file by methods such as a FileSystemObject object of Javascript, generating a new project file with a frame of Vue according to a file structure required by the frame set in a basic step S04, and storing a corresponding relation between the React and a file structure of a Vue frame according to a corresponding relation of the file structures between the new frame and the old frame recorded in the basic step S08;

analyzing the project file of the original React frame by using an analyzer such as a babylon, and analyzing to generate an abstract syntax tree;

thirdly, the abstract syntax tree is recast, and is converted into a format required by a Vue frame according to an abstract syntax tree format required by the Vue frame set in the basic step S05 and an abstract syntax tree format conversion function developed in the basic step S06;

reverse compiling the recast abstract syntax tree into Vue frame code by using the abstract syntax tree decompilation function of the basic step S07;

beautifying the code through code formatting tools such as preter-eslin;

sixthly, according to the correspondence between the saved fact and the file structure of the Vue frame in the operation of the step (3), putting the output file under the folder corresponding to the Vue frame project;

and (c) recording the abnormality when any one of the operations is abnormal, judging whether the next step can be carried out or not, if so, continuing the next step, and if not, stopping the step (3), switching to a conversion failure stage, and entering the step (5).

The above description is only a preferred embodiment of the present invention, and it should be noted that, for those skilled in the art, several modifications and variations can be made without departing from the technical principle of the present invention, and these modifications and variations should also be regarded as the protection scope of the present invention.