CN117555587A - Project reconstruction method, device, equipment and medium based on AngullarJS framework - Google Patents
Project reconstruction method, device, equipment and medium based on AngullarJS framework Download PDFInfo
- Publication number
- CN117555587A CN117555587A CN202311340869.6A CN202311340869A CN117555587A CN 117555587 A CN117555587 A CN 117555587A CN 202311340869 A CN202311340869 A CN 202311340869A CN 117555587 A CN117555587 A CN 117555587A
- Authority
- CN
- China
- Prior art keywords
- code
- component
- translated
- data
- target frame
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 53
- 238000006243 chemical reaction Methods 0.000 claims abstract description 69
- 230000002452 interceptive effect Effects 0.000 claims abstract description 30
- 238000004590 computer program Methods 0.000 claims description 15
- 238000004806 packaging method and process Methods 0.000 claims description 12
- 238000004458 analytical method Methods 0.000 claims description 7
- 230000003993 interaction Effects 0.000 claims description 3
- 238000005538 encapsulation Methods 0.000 claims description 2
- 238000011161 development Methods 0.000 abstract description 9
- 230000006870 function Effects 0.000 description 20
- 230000008569 process Effects 0.000 description 15
- 238000004891 communication Methods 0.000 description 7
- 238000010586 diagram Methods 0.000 description 5
- 238000009877 rendering Methods 0.000 description 5
- 238000012545 processing Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 238000004422 calculation algorithm Methods 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- 238000013507 mapping Methods 0.000 description 2
- 238000013508 migration Methods 0.000 description 2
- 230000005012 migration Effects 0.000 description 2
- 238000012360 testing method Methods 0.000 description 2
- 238000012795 verification Methods 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 238000007405 data analysis Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 230000001788 irregular Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/72—Code refactoring
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Machine Translation (AREA)
Abstract
The application discloses a project reconstruction method, device, equipment and medium based on an AngullarJS framework, relates to the technical field of computers, and comprises the following steps: selecting a code file to be translated from an original project constructed based on an AngularJS framework by using a file selection instruction acquired from an interactive interface created by an electron tool; the node. Js tool reads the component code to be translated from the code file to be translated; code conversion is carried out on the component codes to be translated by utilizing a grammar parser to generate converted data, and the converted data is parsed and packaged to obtain the component codes of the target frame; the node. Js tool determines a target file corresponding to the component code of the target frame from the directory structure corresponding to the target frame, and writes the component code of the target frame into the target file to obtain an item constructed based on the target frame. The method and the device automatically convert the component codes in the original frame into the codes of other frames, and improve the development efficiency.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a project reconstruction method, device, equipment and medium based on an AngularJS framework.
Background
Three major responsive frameworks of AngullarJS, vue. Js, and reaction have long been used as the main framework in the front-end field in China for the last 10 years. With the development of ideas and technologies, the AngullarJS is slowly turned around due to the defects of overweight software application, difficult development and maintenance, lower interaction efficiency, too few users, too high learning cost and the like, so that some old projects developed by using the AngullarJS are required to be reconstructed into projects built by new frames meeting the requirements due to the lack of maintenance of developers, overweight application architecture, performance reaching bottleneck, ecological functions failing to meet the requirements and the like.
The use of many frames at the front end has common or similar characteristics: the components are used as functional main units, the components are interacted and nested, the states are managed and used, the life cycle of the components is called back, the data flow direction is bound, the three-party plug-ins and libraries are accessed and used, the pipeline, the instruction and the attribute functions of the template are realized, the variables and the constants are accessed through HTML (Hyper Text Markup Language ), the components are nested and transmitted in a pattern, and the like. In the project reconstruction process, the characteristics belong to basic functions in many scenes, code migration is completed only by converting the characteristics into corresponding frame grammar, and extra efforts are not required to carry out verification and test operations like business codes. Therefore, how to complete the reconstruction work of the component codes in the AngularJS project through a tool is a problem to be solved at present.
Disclosure of Invention
Accordingly, the present invention aims to provide a project reconstruction method, device, equipment and medium based on an angulnarjs frame, which can automatically convert component codes in the angulnarjs frame into codes of other frames, reduce manual operation, save working time and improve development efficiency. The specific scheme is as follows:
in a first aspect, the present application provides a project reconstruction method based on an angullarjs frame, including:
acquiring a file selection instruction through an interactive interface created based on an electron tool, and selecting a code file to be translated from an original project constructed based on an AngullarJS framework by using the file selection instruction through the electron tool;
reading a to-be-translated component code from the to-be-translated code file through a node. Js service tool;
code conversion is carried out on the component codes to be translated by utilizing a grammar parser to generate converted data, and the converted data is parsed and packaged to obtain the component codes of the target frame; the target frame comprises a vue.js frame or a reaction frame;
determining a target file corresponding to the component code of the target frame from a directory structure corresponding to the target frame through the node. Js service tool, and writing the component code of the target frame into the target file to obtain an item constructed based on the target frame; the directory structure corresponding to the target frame is a structure generated based on the directory structure of the original item.
Optionally, the transcoding the component code to be translated by using a syntax parser to generate translated data, and parsing and packaging the translated data to obtain the component code of the target framework, including:
code conversion is respectively carried out on script codes, template codes and style codes of the components to be translated by utilizing a grammar parser so as to generate converted script data, converted template data and converted style data;
analyzing the converted script data, the converted template data and the converted style data into analyzed script codes, analyzed template codes and analyzed style codes of the target frame respectively;
and packaging the parsed script code, the parsed template code and the parsed style code to obtain the component code of the target frame.
Optionally, transcoding the script code of the component to be translated using a syntax parser to generate the translated script data includes:
analyzing the script codes of the components to be translated by using a Babel grammar analyzer to generate an abstract grammar tree;
determining each component attribute corresponding to the component to be translated from a preset component data management center, traversing the abstract syntax tree, and performing code conversion on each node in the abstract syntax tree based on each component attribute to obtain converted script data of the target frame.
Optionally, transcoding the template code of the component to be translated using a syntax parser to generate translated template data includes:
analyzing the template code of the component to be translated by using an htmlParser grammar analysis tool to generate domTree data;
and performing code conversion on the domTree data to obtain converted template data of the target frame.
Optionally, transcoding the style code of the component to be translated using the syntax parser to generate the translated style data includes:
analyzing the style codes of the components to be translated by using a Bable grammar analyzer to generate style data in an abstract grammar tree format;
and transcoding the style data in the abstract syntax tree format to determine converted style data based on the converted pre-compiled language.
Optionally, the transcoding the component code to be translated with a syntax parser to generate translated data includes:
acquiring a custom code conversion rule through the interactive interface, and analyzing the custom code conversion rule through the electron tool to obtain an identifiable code conversion rule; the identifiable transcoding rules are rules for parsing the custom transcoding rules into a programming language;
The component code to be translated is transcoded with the syntax parser and based on the universal transcoding rules and the identifiable transcoding rules to generate translated data.
Optionally, after the parsing and packaging the converted data to obtain the component code of the target frame, the method further includes:
displaying the component codes of the target frame through the interaction interface, and editing the component codes of the target frame based on the editing instruction after the editing instruction of the component codes of the target frame is acquired, so as to obtain edited component codes;
and sending the edited component code acquired from the interactive interface to the node. Js service tool through the electron tool so that the node. Js service tool writes the edited component code into the corresponding target file.
In a second aspect, the present application provides an item reconstruction device based on an angullarjs frame, including:
the file selection module is used for acquiring a file selection instruction through an interactive interface created based on an electron tool, and selecting a code file to be translated from an original project constructed based on an AngullarJS framework by utilizing the file selection instruction through the electron tool;
The component code reading module is used for reading the component code to be translated from the code file to be translated through a node. Js service tool;
the code conversion module is used for carrying out code conversion on the component codes to be translated by utilizing a grammar parser to generate converted data, and carrying out parsing and encapsulation on the converted data so as to obtain the component codes of the target frame; the target frame comprises a vue.js frame or a reaction frame;
a code writing module, configured to determine, by using the node. Js service tool, a target file corresponding to a component code of the target frame from a directory structure corresponding to the target frame, and write the component code of the target frame into the target file, so as to obtain an item constructed based on the target frame; the directory structure corresponding to the target frame is a structure generated based on the directory structure of the original item.
In a third aspect, the present application provides an electronic device, including:
a memory for storing a computer program;
and the processor is used for executing the computer program to realize the project reconstruction method based on the Angust JS framework.
In a fourth aspect, the present application provides a computer readable storage medium for storing a computer program, where the computer program when executed by a processor implements the foregoing method for reconstructing an item based on an angullarjs frame.
In the application, a file selection instruction is acquired through an interactive interface created based on an electron tool, and a code file to be translated is selected from an original project built based on an AngullarJS framework by the electron tool by utilizing the file selection instruction; reading a to-be-translated component code from the to-be-translated code file through a node. Js service tool; code conversion is carried out on the component codes to be translated by utilizing a grammar parser to generate converted data, and the converted data is parsed and packaged to obtain the component codes of the target frame; the target frame comprises a vue.js frame or a reaction frame; determining a target file corresponding to the component code of the target frame from a directory structure corresponding to the target frame through the node. Js service tool, and writing the component code of the target frame into the target file to obtain an item constructed based on the target frame; the directory structure corresponding to the target frame is a structure generated based on the directory structure of the original item. Therefore, the electronic tool is adopted as the cross-platform desktop application program, so that users at different positions can execute the function of code conversion under different environments, and the electronic device can automatically convert component codes in the angular JS framework into codes of the vue.js framework or the compact framework and write the codes into target files in corresponding directory structures, thereby reducing manual operation, saving working time and improving development efficiency.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings that are required to be used in the embodiments or the description of the prior art will be briefly described below, and it is obvious that the drawings in the following description are only embodiments of the present invention, and that other drawings can be obtained according to the provided drawings without inventive effort for a person skilled in the art.
Fig. 1 is a flowchart of a project reconstruction method based on an angullarjs frame disclosed in the present application;
FIG. 2 is a schematic diagram of a component data management center disclosed herein;
fig. 3 is a project reconstruction flowchart based on an angullarjs frame disclosed in the present application;
fig. 4 is a schematic structural diagram of an item reconstruction device based on an angullarjs frame disclosed in the present application;
fig. 5 is a block diagram of an electronic device disclosed in the present application.
Detailed Description
The following description of the embodiments of the present invention will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present invention, but not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
The characteristics among frames in the project reconstruction process belong to basic functions in many scenes, code migration is completed only by converting the characteristics into corresponding frame grammar, and extra efforts are not required to carry out verification and test operations like business codes. Therefore, how to complete the reconstruction work of the component codes in the AngularJS project through a tool is a problem to be solved at present. Therefore, the project reconstruction method based on the AngullarJS framework can automatically convert component codes in the AngullarJS framework into codes of other frameworks, so that manual operation is reduced, working time is saved, and development efficiency is improved.
Referring to fig. 1, the embodiment of the invention discloses a project reconstruction method based on an angullarjs frame, which comprises the following steps:
and S11, acquiring a file selection instruction through an interactive interface created based on an electron tool, and selecting a code file to be translated from an original project constructed based on an AngullarJS framework by using the file selection instruction through the electron tool.
In this embodiment, an application service is started through a main process of an electronic tool, an interactive interface is created through a rendering process of the electronic tool, and a dialogs dialog box of the main process is called through communication between the main process and the rendering process of the electronic tool, so that a plurality of directories in an original project constructed based on an AngullarJS framework are displayed in a popup form. The user selects the code file to be transcoded from a plurality of catalogues displayed on the interactive interface, namely, a file selection instruction input by the user is acquired through a preset interface in the interactive interface, so that the corresponding code file to be translated is selected from the original project constructed based on the angular JS framework through the file selection instruction by using an electron tool.
Step S12, reading the to-be-translated component code from the to-be-translated code file through a node. Js service tool.
In this embodiment, the node. Js service tool obtains the code file to be translated from the electronic tool, and obtains the file structure of the code file to be translated through an fs (file system) module in the node. Js service tool, so as to form a directory file tree and display the directory file tree on an interactive interface created by the rendering process of the electronic tool, so that a user selects a component code to be transcoded according to the directory file tree, that is, reads a corresponding component code to be translated from the code file to be translated through the node. Js service tool. In addition, the method and the device support multi-process processing through the web worker (network working thread) of the electron tool, namely support conversion of a plurality of component codes at the same time, avoid single-thread operation, and therefore achieve batch conversion of the component codes and improve efficiency of project reconstruction.
Step S13, performing code conversion on the component codes to be translated by using a grammar parser to generate converted data, and parsing and packaging the converted data to obtain component codes of a target frame; the target frame includes a vue.js frame or a reaction frame.
In this embodiment, the code parsing capability of the syntax parser is utilized to create the corresponding universal transcoding rule according to the common points and different points between the irregular js frame and the vue. And defining a global data management center corresponding to the code file to be translated by using a Set and Map data structure combination mode, and recording global states, public functions, component information, a module manager and the like.
In this embodiment, the syntax parser is used to parse the entry file of the component to be translated, obtain the script code, the template code and the style code of the component to be translated through the entry attribute, and define the preset component data management center by using the Set and Map data structures. Taking code of the angullarjs frame as an example, as shown in fig. 2, the required frame API (Application Programming Interface ), component functions, component routes, component states, component events, lifecycle processes, sub-component references, DOM (Document Object Model ) references, module state manager, parent-child component communications, and other attributes are recorded.
In this embodiment, the script code, the template code, and the style code of the component to be translated are respectively transcoded by using the syntax parser to generate converted script data, converted template data, and converted style data; respectively analyzing the converted script data, the converted template data and the converted style data into analyzed script codes, analyzed template codes and analyzed style codes of the target frame; and packaging and combining the parsed script code, the parsed template code and the parsed style code to obtain the component code of the target frame. The target frame includes a vue.js frame or a reaction frame. Further, after obtaining the parsed script code, the parsed template code, and the parsed style code of the target framework, determining the component code style includes: determining whether a component to be translated is a functional component or a class component, displaying html codes as jsx language (grammar expansion of JavaScript) or a template compiling template and the like, and determining whether a component style is imported according to requirements or is imported in full quantity; and then packaging the parsed script code, the parsed template code and the parsed style code based on the component code style to obtain the component code of the target frame.
The method comprises the steps of transcoding script codes of a component to be translated by using a grammar parser to generate converted script data, and comprises the following steps: analyzing typescript/javascript script codes of the component to be translated by using a Babel grammar analyzer to generate script data jsastData in an abstract syntax tree format; determining each component attribute corresponding to the component to be translated from a preset component data management center, and traversing script data in an abstract syntax tree format to code each node in the abstract syntax tree based on each component attribute so as to obtain converted script data jsastData1 of the target frame. Then, the converted script data jsAstData1 of the target frame is parsed to generate parsed script code jsCode of the target frame.
Wherein transcoding the template code of the component to be translated using the syntax parser to generate translated template data comprises: analyzing the template code of the component to be translated by using an htmlParser grammar analysis tool to generate domTree data; and performing code conversion on the domTree data to obtain converted template data domTree1 of the target framework. And then analyzing the converted template data of the target frame to generate an analyzed template code of the target frame. Specifically, traversing a template code of a component to be translated, generating domTree data in a stack processing mode, and acquiring information such as a required label, attribute, node and the like; traversing domTree data to convert the grammar of the regular into the grammar of the vue.js/reaction frame through editing, deleting, replacing and other operations, thereby obtaining domTree data of the vue.js/reaction frame; parsing domTree data of the vue.js/act frame to generate html template codes of the target frame;
Wherein transcoding the style code of the component to be translated using the syntax parser to generate the translated style data comprises: analyzing the style codes of the components to be translated by using a Table grammar analyzer to generate style data cssAStData in an abstract syntax tree format; the style data in the abstract syntax tree format is transcoded to determine the converted style data cssAstData1 of the target frame based on the style pre-compiled language obtained after the conversion. And then analyzing the converted style data of the target frame to generate an analyzed style code scsscsscode of the target frame.
In this embodiment, transcoding the component code to be translated using a syntax parser to generate translated data includes: acquiring a custom code conversion rule through an interactive interface, and analyzing the custom code conversion rule through an electron tool to obtain an identifiable code conversion rule; the identifiable transcoding rules are rules for parsing the custom transcoding rules into a programming language; the component code to be translated is transcoded using a syntax parser and based on the generic transcoding rules and the identifiable transcoding rules to generate translated data. It can be understood that the user is supported to import the custom transcoding rule through the interactive interface created based on the rendering process in the electronic tool, the custom transcoding rule is parsed through the electronic tool, so as to obtain the transcoding rule which can be identified by the system, and the identifiable transcoding rule which is added by the user in a custom manner is stored in a closure manner, so that the functions of the tool are expanded by the user, and the use feeling of the user is improved. The component code to be translated is then transcoded using a syntax parser and based on the generic transcoding rules and the identifiable transcoding rules to generate translated data.
Step S14, determining a target file corresponding to the component code of the target frame from a directory structure corresponding to the target frame through the node. Js service tool, and writing the component code of the target frame into the target file to obtain an item constructed based on the target frame; the directory structure corresponding to the target frame is a structure generated based on the directory structure of the original item.
In this embodiment, a fs module built in a node. Js service tool generates a directory architecture corresponding to a vue. Js/reaction framework according to the directory architecture of an original item, where the original item is an item constructed based on an angullarjs framework. In the transcoding process, the position mapping of the attribute function between the source file of the AngularJS framework and the target file of the vue. Js/act framework can be recorded in advance, and when a user clicks the component code of the source file/target file through the interactive interface, the function position of the corresponding target file/source file can be quickly matched based on the recorded position mapping. That is, after generating the component code of the target frame, the node. Js service tool may quickly determine, from the directory structure corresponding to the target frame, a target file corresponding to the component code of the target frame based on the pre-recorded location map, and write the component code of the target frame into the target file to obtain the target item constructed based on the target frame.
In this embodiment, the component codes of the target frame are displayed through the interactive interface created based on the rendering process of the electron tool, so that the user browses and edits the component codes of the target frame, and if the user selects to edit and modify the component codes of the target frame, that is, after the interactive interface obtains the editing instruction for the component codes of the target frame, the component codes of the target frame are edited correspondingly based on the editing instruction, so as to obtain edited component codes; and sending the edited component codes acquired from the interactive interface to a node. Js service tool through an electron tool so that the node. Js service tool writes the edited component codes into corresponding target files.
In this embodiment, transcoding each node in the abstract syntax tree based on each component attribute to obtain the converted script data of the target frame includes: 1. recording a framework API and external function and component introduction in an ESModule mode; 2. obtaining basic information of a component Class to be translated, including a selector component name, template/template component template information and style/style components style information, and obtaining and processing link content of a single item or multiple items and recording and storing the link content in a character string form; 3. analyzing the attribute definition of the component Class to be translated, recording the attribute of the component data, and replacing the ast (abstract syntax tree ) node of the current attribute with an ast node conforming to the vue. Js/act framework syntax; 4. analyzing information such as incoming attribute, route, module state and the like of a component to be translated, recording the information as component data, and replacing a corresponding ast node with the ast node conforming to the vue. Js/act framework grammar; 5. analyzing function definition of the component Class to be translated, recording a function of the component data, and replacing an ast node definition statement of the current function with an ast node definition statement conforming to a vue.js/act framework grammar; 6. analyzing life cycle events of the component to be translated, recording life cycle api of the component data, and replacing the ast node definition statement of the current function with an ast node definition statement conforming to the vue. Js/act framework grammar; 7. according to the api, route, state and other information of the component data to be translated, adding a corresponding declared ast node in the initial part of the script code to complete the function introduction required by the corresponding framework; 8. traversing the this expression of the ast node, and replacing the original attribute, state and function call with the ast node in the calling form of the vue. Js/act framework; thereby converting the abstract syntax tree of the AngullarJS framework into code that the vue. Js/act framework can run.
Therefore, the electronic tool is adopted as the cross-platform desktop application program, so that users at different positions can execute the function of code conversion under different environments, and the electronic device can automatically convert component codes in the angular JS framework into codes of the vue.js framework or the compact framework and write the codes into target files in corresponding directory structures, thereby reducing manual operation, saving working time and improving development efficiency.
Referring to fig. 3, the embodiment of the invention discloses a project reconstruction method based on an angullarjs frame, which comprises the following steps:
creating an interactive interface based on an electron tool in advance, wherein a user selects a code file which is required to be transcoded from an AngularJS project code catalog displayed on the interactive interface, namely acquiring a file selection instruction through the interactive interface, and inquiring a code file to be translated from an original project constructed based on the AngularJS framework by utilizing the file selection instruction through the electron tool. And inquiring the code of the component to be translated from the code file to be translated through a node. Js service tool, and prefabricating corresponding universal code conversion rules according to the common points and different points between the AngullarJS framework and the target framework. And importing the custom code conversion rule by a user through an interactive interface, and analyzing the custom code conversion rule by an electron tool to obtain the code conversion rule available for the system.
And analyzing the entry file of the component to be translated by using a babel grammar analyzer, acquiring the code of the component to be translated through the entry attribute, and performing code conversion on the code of the component to be translated by using the babel grammar analyzer to generate intermediate data. Intermediate data is syntactically and functionally transcoded using a table syntax parser and based on generic transcoding rules and system-available transcoding rules to generate converted new data. And analyzing and packaging the converted new data to generate the component codes of the target frame.
And acquiring a generated code output catalog selected by a user through an interactive interface, namely, an output catalog of the target frame code, and creating a catalog framework corresponding to the target frame through an fs module built in a node. Js service tool according to the catalog framework of the original project, wherein the original project is a project constructed based on the AngullarJS frame. And determining a target file corresponding to the component code of the target frame from the directory structure corresponding to the target frame through a node. Js service tool, and writing the component code of the target frame into the target file to obtain an item constructed based on the target frame. It should be noted that, the application supports multi-process processing through a web worker (network working thread) of an electron tool, namely, supports conversion of a plurality of component codes at the same time, avoids single-thread operation, and therefore achieves batch conversion of the component codes and improves efficiency of project reconstruction.
Therefore, the electronic tool is adopted as the cross-platform desktop application program, so that users at different positions can execute the function of code conversion under different environments, and the electronic device can automatically convert component codes in the angular JS framework into codes of the vue.js framework or the compact framework and write the codes into target files in corresponding directory structures, thereby reducing manual operation, saving working time and improving development efficiency.
Referring to fig. 4, an embodiment of the present invention discloses an item reconstruction device based on an angullarjs frame, including:
the file selection module 11 is configured to obtain a file selection instruction through an interactive interface created based on an electron tool, and select a code file to be translated from an original project constructed based on an angullarjs frame by using the file selection instruction through the electron tool;
a component code reading module 12, configured to read a component code to be translated from the code file to be translated through a node. Js service tool;
a code conversion module 13, configured to perform code conversion on the component code to be translated by using a syntax parser to generate converted data, and parse and package the converted data to obtain a component code of a target framework; the target frame comprises a vue.js frame or a reaction frame;
A code writing module 14, configured to determine, by using the node. Js service tool, a target file corresponding to a component code of the target frame from a directory structure corresponding to the target frame, and write the component code of the target frame into the target file, so as to obtain an item constructed based on the target frame; the directory structure corresponding to the target frame is a structure generated based on the directory structure of the original item.
Therefore, the electronic tool is adopted as the cross-platform desktop application program, so that users at different positions can execute the function of code conversion under different environments, and the electronic device can automatically convert component codes in the angular JS framework into codes of the vue.js framework or the compact framework and write the codes into target files in corresponding directory structures, thereby reducing manual operation, saving working time and improving development efficiency.
In some embodiments, the transcoding module 13 comprises:
the component code conversion sub-module is used for respectively carrying out code conversion on script codes, template codes and style codes of the component to be translated by utilizing the grammar parser so as to generate converted script data, converted template data and converted style data;
The data analysis unit is used for respectively analyzing the converted script data, the converted template data and the converted style data into analyzed script codes, analyzed template codes and analyzed style codes of the target frame;
and the code packaging unit is used for packaging the parsed script code, the parsed template code and the parsed style code to obtain the component code of the target frame.
In some embodiments, the component transcoding sub-module comprises:
the script code analysis unit is used for analyzing the script code of the component to be translated by using a Babel grammar analyzer so as to generate an abstract grammar tree;
and the script data conversion unit is used for determining the component attributes corresponding to the component to be translated from a preset component data management center, traversing the abstract syntax tree, and performing code conversion on each node in the abstract syntax tree based on the component attributes to obtain converted script data of the target frame.
In some embodiments, the component transcoding sub-module comprises:
the template code analysis unit is used for analyzing the template code of the component to be translated by using an htmlParser grammar analysis tool so as to generate domTree data;
And the template data conversion unit is used for carrying out code conversion on the domTree data so as to obtain converted template data of the target frame.
In some embodiments, the component transcoding sub-module comprises:
a style code parsing unit, configured to parse the style code of the component to be translated by using a table syntax parser, so as to generate style data in an abstract syntax tree format;
and the style data conversion unit is used for carrying out code conversion on the style data in the abstract syntax tree format so as to determine converted style data based on the converted pre-compiled language.
In some embodiments, the transcoding module 13 comprises:
the conversion rule analysis unit is used for acquiring a custom code conversion rule through the interactive interface and analyzing the custom code conversion rule through the electron tool so as to acquire an identifiable code conversion rule; the identifiable transcoding rules are rules for parsing the custom transcoding rules into a programming language;
and the code conversion unit is used for utilizing the grammar parser and carrying out code conversion on the component code to be translated based on the universal code conversion rule and the identifiable code conversion rule so as to generate converted data.
In some specific embodiments, the project reconstruction device based on the angullarjs frame further includes:
the component code editing unit is used for displaying the component code of the target frame through the interactive interface, and editing the component code of the target frame based on the editing instruction after the editing instruction of the component code of the target frame is acquired, so as to obtain the edited component code;
and the component code writing unit is used for sending the edited component code acquired from the interactive interface to the node. Js service tool through the electron tool so that the node. Js service tool writes the edited component code into the corresponding target file.
Further, the embodiment of the present application further discloses an electronic device, and fig. 5 is a block diagram of the electronic device 20 according to an exemplary embodiment, where the content of the figure is not to be considered as any limitation on the scope of use of the present application.
Fig. 5 is a schematic structural diagram of an electronic device 20 according to an embodiment of the present application. The electronic device 20 may specifically include: at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input output interface 25, and a communication bus 26. The memory 22 is configured to store a computer program that is loaded and executed by the processor 21 to implement relevant steps in the project reconstruction method based on the AngularJS frame disclosed in any one of the foregoing embodiments. In addition, the electronic device 20 in the present embodiment may be specifically an electronic computer.
In this embodiment, the power supply 23 is configured to provide an operating voltage for each hardware device on the electronic device 20; the communication interface 24 can create a data transmission channel between the electronic device 20 and an external device, and the communication protocol to be followed is any communication protocol applicable to the technical solution of the present application, which is not specifically limited herein; the input/output interface 25 is used for acquiring external input data or outputting external output data, and the specific interface type thereof may be selected according to the specific application requirement, which is not limited herein.
The memory 22 may be a carrier for storing resources, such as a read-only memory, a random access memory, a magnetic disk, or an optical disk, and the resources stored thereon may include an operating system 221, a computer program 222, and the like, and the storage may be temporary storage or permanent storage.
The operating system 221 is used for managing and controlling various hardware devices on the electronic device 20 and computer programs 222, which may be Windows Server, netware, unix, linux, etc. The computer program 222 may further include a computer program that can be used to perform other specific tasks in addition to the computer program that can be used to perform the method of reconstructing an item based on the angullarjs frame, which is performed by the electronic device 20, as disclosed in any of the embodiments above.
Further, the application also discloses a computer readable storage medium for storing a computer program; the method for reconstructing the project based on the AngularJS framework is characterized in that the computer program is executed by a processor. For specific steps of the method, reference may be made to the corresponding contents disclosed in the foregoing embodiments, and no further description is given here.
In this specification, each embodiment is described in a progressive manner, and each embodiment is mainly described in a different point from other embodiments, so that the same or similar parts between the embodiments are referred to each other. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant points refer to the description of the method section.
Those of skill would further appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, computer software, or combinations of both, and that the various illustrative elements and steps are described above generally in terms of functionality in order to clearly illustrate the interchangeability of hardware and software. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the solution. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present application.
The steps of a method or algorithm described in connection with the embodiments disclosed herein may be embodied directly in hardware, in a software module executed by a processor, or in a combination of the two. The software modules may be disposed in Random Access Memory (RAM), memory, read Only Memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.
Finally, it is further noted that relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.
The foregoing has outlined the detailed description of the preferred embodiment of the present application, and the detailed description of the principles and embodiments of the present application has been provided herein by way of example only to facilitate the understanding of the method and core concepts of the present application; meanwhile, as those skilled in the art will have modifications in the specific embodiments and application scope in accordance with the ideas of the present application, the present description should not be construed as limiting the present application in view of the above.
Claims (10)
1. The project reconstruction method based on the AngullarJS framework is characterized by comprising the following steps of:
acquiring a file selection instruction through an interactive interface created based on an electron tool, and selecting a code file to be translated from an original project constructed based on an AngullarJS framework by using the file selection instruction through the electron tool;
reading a to-be-translated component code from the to-be-translated code file through a node. Js service tool;
code conversion is carried out on the component codes to be translated by utilizing a grammar parser to generate converted data, and the converted data is parsed and packaged to obtain the component codes of the target frame; the target frame comprises a vue.js frame or a reaction frame;
Determining a target file corresponding to the component code of the target frame from a directory structure corresponding to the target frame through the node. Js service tool, and writing the component code of the target frame into the target file to obtain an item constructed based on the target frame; the directory structure corresponding to the target frame is a structure generated based on the directory structure of the original item.
2. The method for reconstructing items based on an angullarjs frame as set forth in claim 1, wherein said transcoding the component code to be translated with a syntax parser to generate translated data, and parsing and packaging the translated data to obtain the component code of the target frame, comprises:
code conversion is respectively carried out on script codes, template codes and style codes of the components to be translated by utilizing a grammar parser so as to generate converted script data, converted template data and converted style data;
analyzing the converted script data, the converted template data and the converted style data into analyzed script codes, analyzed template codes and analyzed style codes of the target frame respectively;
And packaging the parsed script code, the parsed template code and the parsed style code to obtain the component code of the target frame.
3. The method of item reconstruction based on the angullarjs framework of claim 2, wherein transcoding script code of a component to be translated using a syntax parser to generate translated script data, comprises:
analyzing the script codes of the components to be translated by using a Babel grammar analyzer to generate an abstract grammar tree;
determining each component attribute corresponding to the component to be translated from a preset component data management center, traversing the abstract syntax tree, and performing code conversion on each node in the abstract syntax tree based on each component attribute to obtain converted script data of the target frame.
4. The method of item reconstruction based on the angullarjs framework of claim 2, wherein transcoding template code of a component to be translated using a syntax parser to generate translated template data, comprises:
analyzing the template code of the component to be translated by using an htmlParser grammar analysis tool to generate domTree data;
And performing code conversion on the domTree data to obtain converted template data of the target frame.
5. The method for reconstructing items based on the angullarjs framework according to claim 2, wherein transcoding the style code of the component to be translated using a syntax parser to generate translated style data comprises:
analyzing the style codes of the components to be translated by using a Bable grammar analyzer to generate style data in an abstract grammar tree format;
and transcoding the style data in the abstract syntax tree format to determine converted style data based on the converted pre-compiled language.
6. The method for reconstructing items based on the angullarjs framework according to claim 1, wherein the transcoding the component code to be translated using a syntax parser to generate translated data comprises:
acquiring a custom code conversion rule through the interactive interface, and analyzing the custom code conversion rule through the electron tool to obtain an identifiable code conversion rule; the identifiable transcoding rules are rules for parsing the custom transcoding rules into a programming language;
The component code to be translated is transcoded with the syntax parser and based on the universal transcoding rules and the identifiable transcoding rules to generate translated data.
7. The method for reconstructing items based on an AngularJS frame as claimed in any one of claims 1 to 6, wherein after said parsing and packaging said converted data to obtain component code of a target frame, further comprising:
displaying the component codes of the target frame through the interaction interface, and editing the component codes of the target frame based on the editing instruction after the editing instruction of the component codes of the target frame is acquired, so as to obtain edited component codes;
and sending the edited component code acquired from the interactive interface to the node. Js service tool through the electron tool so that the node. Js service tool writes the edited component code into the corresponding target file.
8. Project reconstruction device based on angular JS frame, characterized by comprising:
the file selection module is used for acquiring a file selection instruction through an interactive interface created based on an electron tool, and selecting a code file to be translated from an original project constructed based on an AngullarJS framework by utilizing the file selection instruction through the electron tool;
The component code reading module is used for reading the component code to be translated from the code file to be translated through a node. Js service tool;
the code conversion module is used for carrying out code conversion on the component codes to be translated by utilizing a grammar parser to generate converted data, and carrying out parsing and encapsulation on the converted data so as to obtain the component codes of the target frame; the target frame comprises a vue.js frame or a reaction frame;
a code writing module, configured to determine, by using the node. Js service tool, a target file corresponding to a component code of the target frame from a directory structure corresponding to the target frame, and write the component code of the target frame into the target file, so as to obtain an item constructed based on the target frame; the directory structure corresponding to the target frame is a structure generated based on the directory structure of the original item.
9. An electronic device, comprising:
a memory for storing a computer program;
a processor for executing the computer program to implement the method for reconstructing items based on the AngularJS frame as recited in any one of claims 1 to 7.
10. A computer-readable storage medium for storing a computer program which, when executed by a processor, implements the method for reconstructing items based on the angullarjs frame as claimed in any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311340869.6A CN117555587A (en) | 2023-10-17 | 2023-10-17 | Project reconstruction method, device, equipment and medium based on AngullarJS framework |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311340869.6A CN117555587A (en) | 2023-10-17 | 2023-10-17 | Project reconstruction method, device, equipment and medium based on AngullarJS framework |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117555587A true CN117555587A (en) | 2024-02-13 |
Family
ID=89819329
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311340869.6A Pending CN117555587A (en) | 2023-10-17 | 2023-10-17 | Project reconstruction method, device, equipment and medium based on AngullarJS framework |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117555587A (en) |
-
2023
- 2023-10-17 CN CN202311340869.6A patent/CN117555587A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111241454B (en) | Method, system and device for generating webpage codes | |
| US10417314B2 (en) | Systems and methods of a script generation engine | |
| CN111666526A (en) | Page generation method, device, equipment and storage medium | |
| CN105824787A (en) | Control method and system for dynamic configuration of HTML template | |
| CN113126990B (en) | Page development method, device, equipment and storage medium | |
| CN113031932B (en) | Project development method, apparatus, electronic device and storage medium | |
| CN115639980A (en) | Draggable front-end logic arrangement method and device for low-code platform | |
| CN108170409B (en) | Development method and system of WEB front-end control | |
| CN111831384A (en) | Language switching method and device, equipment and storage medium | |
| CN114564199A (en) | Method, device and equipment for generating use page and readable storage medium | |
| KR20120122959A (en) | Method and Device for Collecting Web Contents and Computer-readable Recording Medium for the same | |
| CN116301813B (en) | Low-code platform development method and system | |
| CN117234529A (en) | Method for generating API (application program interface) based on DSL (digital subscriber line) analytic resources | |
| CN116719523A (en) | Page rendering method and electronic device | |
| CN116755669A (en) | Low code development method and tool based on DSL language operation model | |
| CN116431155A (en) | Front-end application construction method, medium, device and computing equipment | |
| CN117555587A (en) | Project reconstruction method, device, equipment and medium based on AngullarJS framework | |
| CN113641594B (en) | Cross-terminal automatic testing method and related device | |
| CN116069303A (en) | Code generation method, device, equipment and storage medium | |
| JPH07182179A (en) | Object oriented data base managing device | |
| CN113961279A (en) | Page rendering method, device, server and storage medium | |
| CN112650492A (en) | Rendering method, system and related device of Web page | |
| CN112052012B (en) | XSLT and XSD-based code automatic generation method and equipment | |
| EP4336348A1 (en) | Iterative and interactive method for code conversion | |
| LEHRHUBER | Pdf support for qualitative research in the cloud |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |