CN110928549A - Method and device for re-editing front-end script program - Google Patents
Method and device for re-editing front-end script program Download PDFInfo
- Publication number
- CN110928549A CN110928549A CN201911135284.4A CN201911135284A CN110928549A CN 110928549 A CN110928549 A CN 110928549A CN 201911135284 A CN201911135284 A CN 201911135284A CN 110928549 A CN110928549 A CN 110928549A
- Authority
- CN
- China
- Prior art keywords
- module
- path
- format
- party dependent
- party
- 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.)
- Granted
Links
Images
Classifications
-
- 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
- G06F8/427—Parsing
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention provides a method and a device for re-editing a front-end script program, wherein the method comprises the following steps: extracting a text in a front-end script program to be re-edited, and converting the extracted text into a syntax tree structure object by using a script syntax parser; traversing each node in the syntax tree structure object, and acquiring the format of a module path of each third-party dependent module for each third-party dependent module traversed by the node; determining that the format of the module path of the third-party dependent module does not conform to the loading format of the browser, and updating the format of the module path of the third-party dependent module to the loading format conforming to the browser to obtain an updated loading format; updating the module path of the third-party dependent module according to the update loading format to obtain a module update path, and storing the dependent file under the module path of the third-party dependent module to the module update path; and generating a re-edited front-end script updating program according to the updated syntax tree structure object. The resource overhead of the browser can be reduced.
Description
Technical Field
The invention relates to the technical field of browser front-end development, in particular to a method and a device for re-editing a front-end script program.
Background
As the information contained in the web page becomes richer, a front-end script (JavaScript) program for constructing the web page becomes more complex. At present, in order to improve the development efficiency of the front-end JavaScript program, a modular development manner is generally adopted to reduce the complexity of editing, for example, the front-end JavaScript program is edited based on node. However, some modules in the edited front-end JavaScript program may depend on the third-party module, and the format of the module path of the third-party module may not be compatible with the format supported by the browser, so that in order to enable the edited front-end JavaScript program to be released to the browser for loading and forming a webpage for displaying, a loader needs to be set in the browser to analyze the dependent third-party module. Therefore, an additional loader needs to be introduced into the browser, extra resource overhead of the browser is caused, the third-party module needs to be called by the loader from a server corresponding to the third-party module, and the file under the module path corresponding to the dependent third-party module is analyzed, so that the webpage loading response time is long, especially when the number of the dependent third-party modules (called third-party dependent modules for short) is large, the browser resources need to be consumed, the analysis time is long, the displayed webpage has no response for a long time, and the user experience is influenced.
Disclosure of Invention
In view of the above, the present invention provides a method and an apparatus for re-editing a front-end script program to reduce the resource overhead of a browser.
In a first aspect, an embodiment of the present invention provides a method for re-editing a front-end script program, where the method includes:
extracting a text in a front-end script program to be re-edited, and converting the extracted text into a syntax tree structure object by using a script syntax parser;
traversing each node in the syntax tree structure object, and acquiring the format of a module path of each third-party dependent module for each third-party dependent module traversed by the node;
determining that the format of the module path of the third-party dependent module does not conform to the loading format of the browser, and updating the format of the module path of the third-party dependent module to conform to the loading format of the browser to obtain an updated loading format;
updating the module path of the third-party dependent module according to the update loading format to obtain a module update path, and storing the dependent file under the module path of the third-party dependent module to the module update path;
and generating a re-edited front-end script updating program according to the updated syntax tree structure object.
With reference to the first aspect, an embodiment of the present invention provides a first possible implementation manner of the first aspect, where the method further includes:
and if the format of the module path of the third-party dependent module cannot be obtained, deleting the module path of the third-party dependent module and the file stored under the module path from the node to which the third-party dependent module belongs.
With reference to the first aspect, an embodiment of the present invention provides a second possible implementation manner of the first aspect, where the method further includes:
traversing and obtaining the formats of the module path of the non-third-party dependent module and the module path of the non-third-party dependent module in the syntax tree structure object;
judging whether the module path of the non-third-party dependent module has a corresponding module path format of the non-third-party dependent module or not, and judging whether the module path format of the non-third-party dependent module has a corresponding module path of the non-third-party dependent module or not;
and if not, deleting the module paths of the non-third-party dependent modules without the corresponding module paths of the non-third-party dependent modules and the module paths of the non-third-party dependent modules without the corresponding module paths of the non-third-party dependent modules.
With reference to the first aspect, the first possible implementation manner of the first aspect, or the second possible implementation manner, an embodiment of the present invention provides a third possible implementation manner of the first aspect, where the method further includes:
issuing the re-edited front-end script updating program to the browser so that the browser analyzes the front-end script updating program and generates a document object model tree according to an analysis result;
rendering the document object model tree to obtain a rendering tree;
and calculating the position of each node in the rendering tree in a display screen, drawing according to the position, and generating and displaying a webpage.
In a second aspect, an embodiment of the present invention further provides an apparatus for re-editing a front-end script program, where the apparatus includes:
the grammar tree construction module is used for extracting texts in a front-end script program to be re-edited and converting the extracted texts into grammar tree structure objects by using a script grammar parser;
the format acquisition module is used for traversing each node in the syntax tree structure object and acquiring the format of a module path of each third-party dependent module for each third-party dependent module traversed by the node;
the format conversion module is used for determining that the format of the module path of the third-party dependent module does not conform to the loading format of the browser, and updating the format of the module path of the third-party dependent module to the loading format conforming to the browser to obtain an updated loading format;
the path updating module is used for updating the module path of the third-party dependent module according to the updating loading format to obtain a module updating path and storing the dependent file under the module path of the third-party dependent module to the module updating path;
and the reediting module is used for generating a reediting front-end script updating program according to the updated syntax tree structure object.
With reference to the second aspect, an embodiment of the present invention provides a first possible implementation manner of the second aspect, where the format obtaining module is further configured to:
if the format of the module path of the third-party dependent module cannot be obtained, informing the format conversion module;
the format conversion module is further configured to delete the module path of the third-party dependent module and the file stored under the module path from the node to which the third-party dependent module belongs.
With reference to the second aspect, an embodiment of the present invention provides a second possible implementation manner of the second aspect, where the format obtaining module is further configured to:
traversing and obtaining the formats of the module path of the non-third-party dependent module and the module path of the non-third-party dependent module in the syntax tree structure object;
the format conversion module is also used for judging whether the module path of the non-third-party dependent module has a corresponding module path format of the non-third-party dependent module or not and whether the module path format of the non-third-party dependent module has a corresponding module path of the non-third-party dependent module or not;
and if not, deleting the module paths of the non-third-party dependent modules without the corresponding module paths of the non-third-party dependent modules and the module paths of the non-third-party dependent modules without the corresponding module paths of the non-third-party dependent modules.
With reference to the second aspect, the first possible implementation manner of the second aspect, or the second possible implementation manner, an embodiment of the present invention provides a third possible implementation manner of the second aspect, where the apparatus further includes:
the issuing module is used for issuing the re-edited front-end script updating program to the browser so that the browser analyzes the front-end script updating program and generates a document object model tree according to an analysis result;
rendering the document object model tree to obtain a rendering tree;
and calculating the position of each node in the rendering tree in a display screen, drawing according to the position, and generating and displaying a webpage.
In a third aspect, an embodiment of the present application provides a computer device, which includes a memory, a processor, and a computer program stored on the memory and executable on the processor, and the processor implements the steps of the above method when executing the computer program.
In a fourth aspect, the present application provides a computer-readable storage medium, on which a computer program is stored, and the computer program, when executed by a processor, performs the steps of the method described above.
According to the method and the device for re-editing the front-end script program, provided by the embodiment of the invention, the text in the front-end script program to be re-edited is extracted, and the extracted text is converted into a grammar tree structure object by using a script grammar parser; traversing each node in the syntax tree structure object, and acquiring the format of a module path of each third-party dependent module for each third-party dependent module traversed by the node; determining that the format of the module path of the third-party dependent module does not conform to the loading format of the browser, and updating the format of the module path of the third-party dependent module to conform to the loading format of the browser to obtain an updated loading format; updating the module path of the third-party dependent module according to the update loading format to obtain a module update path, and storing the dependent file under the module path of the third-party dependent module to the module update path; and generating a re-edited front-end script updating program according to the updated syntax tree structure object. Therefore, format conversion is carried out on the format of the module path of the third-party dependent module which does not conform to the loading format which can be directly loaded by the browser in the front-end script program, a new module path is formed, and the dependent file referred by the third-party dependent module is stored in the converted new module path, so that an additional loader does not need to be introduced into the browser, and the resource overhead of the browser is reduced.
In order to make the aforementioned and other objects, features and advantages of the present invention comprehensible, preferred embodiments accompanied with figures are described in detail below.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings needed to be used in the embodiments will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present invention and therefore should not be considered as limiting the scope, and for those skilled in the art, other related drawings can be obtained according to the drawings without inventive efforts.
FIG. 1 is a flow chart illustrating a method for re-editing a front-end script program according to an embodiment of the present invention;
FIG. 2 is a schematic diagram illustrating an apparatus for re-editing a front-end script program according to an embodiment of the present invention;
fig. 3 is a schematic structural diagram of a computer device 300 according to an embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. The components of embodiments of the present invention generally described and illustrated in the figures herein may be arranged and designed in a wide variety of different configurations. Thus, the following detailed description of the embodiments of the present invention, presented in the figures, is not intended to limit the scope of the invention, as claimed, but is merely representative of selected embodiments of the invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments of the present invention without making any creative effort, shall fall within the protection scope of the present invention.
The embodiment of the invention provides a method and a device for re-editing a front-end script program, which are described by embodiments below.
Fig. 1 is a schematic flow chart illustrating a method for re-editing a front-end script program according to an embodiment of the present invention. As shown in fig. 1, the method includes:
in the embodiment of the present invention, the content of the front-end JavaScript program is read in a text manner, for example, for a JavaScript program written based on node.
index.js
module.js
node_modules/some_lib/xxx.js
node_modules/some_lib/yyy.js
import{m}from‘./module.js’；
import{xxx}from‘some_lib/xxx.js’；
Wherein, the some _ lib under the node _ modules directory is assumed to be a third-party dependent module.
import { m } from '/module. js' and import { xxx } from 'some _ lib/xxx. js' are index. js files, the relative path references of module. js files introduced through the module standard syntax, and the path references of the third party dependent modules node _ modules/some _ lib/xxx. js, respectively.
In the embodiment of the present invention, as an optional embodiment, the front-end JavaScript program may be applied to generate a HyperText Markup Language (HTML) web page, and may also be applied to generate a server-side web page including a HyperText Markup Language (SHTML), which is not limited in the embodiment of the present invention.
In the embodiment of the invention, the read text is converted into a syntax tree structure object through a JavaScript syntax parser. For the conversion of text into a syntax tree structure object by using a parser, reference is made to the related art documents, and the detailed description is omitted here.
in the embodiment of the invention, each node is traversed according to the syntax tree structure object, the third party dependent module used (quoted) by the node in the syntax tree structure object is obtained, and the format of the module path of each third party dependent module is analyzed. Wherein the module path is a storage path using a dependent file in a third party dependent module.
In the embodiment of the present invention, as an optional embodiment, by analyzing a syntax tree structure object corresponding to a part of text of the front-end JavaScript program, nodes using a third-party dependency module include:
node_modules
the corresponding module path of the third-party dependent module is as follows:
node_modules/some_lib/xxx.js
node_modules/some_lib/yyy.js
the module path node _ modules/sound _ lib/xxx.js is provided with a corresponding format: the import { xxx } from 'sound _ lib/xxx.js', the module path node _ modules/sound _ lib/yy.js is not provided with a corresponding format, that is, in the front-end javascript program, the xxx.js file under the module path node _ modules/sound _ lib/xxx.js is only needed to be used, and the yy.js file under the module path node _ modules/sound _ lib/yy.js is not needed to be used.
In the embodiment of the invention, for the non-third-party dependent module contained in the syntax tree structure object, because the format of the module path corresponding to the non-third-party dependent module conforms to the loading format of the browser and can be directly loaded by the browser, the module path corresponding to the non-third-party dependent module, the format of the module path and the non-dependent file under the module path are not re-edited.
In the embodiment of the invention, the nodes using the non-third-party dependent module comprise:
module.js
the corresponding module paths are:
module.js
the format of the module path is:
import{m}from‘./module.js’
in this embodiment of the present invention, as an optional embodiment, the method further includes:
and if the format of the module path of the third-party dependent module cannot be obtained, deleting the module path of the third-party dependent module and the file stored under the module path from the node to which the third-party dependent module belongs.
In the embodiment of the present invention, if the format of the module path of the third-party dependent module cannot be found in the node to which the third-party dependent module belongs, it is indicated that the file under the module path of the third-party dependent module is not applied to the webpage corresponding to the front-end javascript program, so that, in order to effectively compress the capacity of the front-end javascript program and reduce the resource overhead required for subsequently analyzing the front-end javascript program, the module path of the third-party dependent module and the file stored under the module path are deleted.
In this embodiment, as another optional embodiment, the method further includes:
traversing and obtaining the formats of the module path of the non-third-party dependent module and the module path of the non-third-party dependent module in the syntax tree structure object;
judging whether the module path of the non-third-party dependent module has a corresponding module path format of the non-third-party dependent module or not, and judging whether the module path format of the non-third-party dependent module has a corresponding module path of the non-third-party dependent module or not;
and if not, deleting the module paths of the non-third-party dependent modules without the corresponding module paths of the non-third-party dependent modules and the module paths of the non-third-party dependent modules without the corresponding module paths of the non-third-party dependent modules.
In the embodiment of the present invention, if an example is as follows:
index.js
module.js
module1.js
node_modules/some_lib/xxx.js
node_modules/some_lib/yyy.js
import{m}from‘./module.js’；
import{n}from‘./module2.js’；
import{xxx}from‘some_lib/xxx.js’；
then:
the acquired module path of the non-third-party dependent module comprises the following steps: module.js, module1.js
The format of the module path of the non-third party dependent module comprises: import { m } from '/module. js', import { n } from '/module 2. js'.
Module path module1.js of the non-third-party dependent module has no corresponding format of the module path of the non-third-party dependent module;
the format import { n } from '/module 2. js' of the module path of the non-third-party dependent module has no corresponding module path of the non-third-party dependent module.
Thus, module1.js and import { n } from '/module 2. js' are deleted.
103, determining that the format of the module path of the third-party dependent module does not conform to the loading format of the browser, and updating the format of the module path of the third-party dependent module to the loading format conforming to the browser to obtain an updated loading format;
in this embodiment of the present invention, as an optional embodiment, a loading format of the browser is: js', the format of the module path of the third party dependent module is: the browser can directly identify 'module.js', cannot identify 'some _ lib/xxx.js', and needs to convert the 'some _ lib/xxx.js' into a loading format which can be directly identified by the browser: import { xxx } from'/so _ lib/xxx.
In this embodiment, as an optional embodiment, the loading format of the browser includes one or more formats, and if the format of the module path of the third-party dependent module does not conform to any loading format of the browser, it is determined that the format of the module path of the third-party dependent module does not conform to the loading format of the browser.
In the embodiment of the present invention, after format conversion is performed, an updated loading format obtained after conversion is as follows:
import{xxx}from‘./some_lib/xxx.js’
104, updating the module path of the third-party dependent module according to an update loading format to obtain a module update path, and storing a dependent file under the module path of the third-party dependent module to the module update path;
in the embodiment of the invention, according to the update loading format: import { xxx } from '/so _ lib/xxx.js', the module path of the corresponding third-party dependent module needs to be: the node _ modules/the software _ lib/the xxx.js are updated to be software _ lib/xxx.js, meanwhile, the dependency file under the module path of the third-party dependency module is xxx.js, and is stored in the node _ modules/the software _ lib/, because the updated module path of the third-party dependency module (software _ lib) and the module.js are located in the same directory, the xxx.js needs to be stored in the software _ lib directory under the same directory as the module.js, and the syntax tree structure object is updated. Namely:
index.js
module.js
node_modules/some_lib/xxx.js
the updating is as follows:
index.js
module.js
some_lib/xxx.js
and 105, generating a re-edited front-end script updating program according to the updated syntax tree structure object.
In the embodiment of the invention, as an optional embodiment, the script syntax inverse parser is used for converting the updated syntax tree structure object into the text, and the re-edited front-end script updating program is generated according to the converted text.
The method for re-editing the front-end script program comprises the steps of extracting a text in the front-end script program to be re-edited, and converting the extracted text into a syntax tree structure object by using a script syntax parser; traversing each node in the syntax tree structure object, and acquiring the format of a module path of each third-party dependent module for each third-party dependent module traversed by the node; determining that the format of the module path of the third-party dependent module does not conform to the loading format of the browser, and updating the format of the module path of the third-party dependent module to conform to the loading format of the browser to obtain an updated loading format; updating the module path of the third-party dependent module according to the update loading format to obtain a module update path, and storing the dependent file under the module path of the third-party dependent module to the module update path; and generating a re-edited front-end script updating program according to the updated syntax tree structure object. Therefore, by acquiring the module path of the third-party dependent module in the front-end script program, if the format of the module path does not conform to the loading format which can be directly loaded by the browser, format conversion is carried out to convert the module path into the format which can originally support loading by the browser, a new module path is formed, and the dependent file referenced by the third-party dependent module is stored in the converted new module path until all the dependent files referenced by the third-party dependent module are processed. The format of the converted module path can be directly identified by the browser, so that an additional loader is not required to be introduced, and the additional resource overhead of the browser is reduced; furthermore, the browser has more resources to analyze the re-edited front-end script program, so that the analysis efficiency is improved, the display time of the webpage is shortened, and the response speed of the webpage is improved; in addition, the third-party module does not need to be called from a server corresponding to the third-party module, so that the webpage loading response time is effectively reduced, and the user experience is enhanced.
In this embodiment of the present invention, as an optional embodiment, the method further includes:
issuing the re-edited front-end script updating program to the browser so that the browser analyzes the front-end script updating program and generates a document object model tree according to an analysis result;
rendering the document object model tree to obtain a rendering tree;
and calculating the position of each node in the rendering tree in a display screen, drawing according to the position, and generating and displaying a webpage.
In the embodiment of the present invention, after receiving the published re-edited front-end script update program, the browser of the Web server parses the re-edited front-end script update program through a rendering engine in the browser, and generates a Document Object Model (DOM) tree. And creating a rendering tree based on the DOM tree, calculating the position of each node in the rendering tree in a display screen, drawing, generating and displaying a webpage, and realizing the loading access to the re-edited front-end script updating program.
Fig. 2 is a schematic structural diagram illustrating an apparatus for re-editing a front-end script program according to an embodiment of the present invention. As shown in fig. 2, the apparatus includes:
the syntax tree construction module 201 is used for extracting texts in a front-end script program to be re-edited and converting the extracted texts into syntax tree structure objects by using a script syntax parser;
in the embodiment of the invention, the content of the front-end JavaScript program is read out in a text mode, and the read text is converted into a syntax tree structure object through a JavaScript syntax parser.
A format obtaining module 202, configured to traverse each node in the syntax tree structure object, and obtain, for each third-party dependent module traversed by the node, a format of a module path of the third-party dependent module;
in the embodiment of the invention, each node is traversed according to the syntax tree structure object, the third party dependent module used by the node in the syntax tree structure object is obtained, and the format of the module path of each third party dependent module is analyzed. Wherein the module path is a storage path using a dependent file in a third party dependent module.
The format conversion module 203 is configured to determine that the format of the module path of the third-party dependent module does not conform to the loading format of the browser, and update the format of the module path of the third-party dependent module to the loading format conforming to the browser to obtain an updated loading format;
in this embodiment of the present invention, as an optional embodiment, a loading format of the browser is: js', the format of the module path of the third party dependent module is: import { xxx } from's _ some _ lib/xxx.js', browser can directly recognize '/module.js', can not recognize 'some _ lib/xxx.js', convert it into a loading format that browser can directly recognize: import { xxx } from'/so _ lib/xxx.
The path updating module 204 is configured to update the module path of the third-party dependent module according to an update loading format to obtain a module updating path, and store the dependent file under the module path of the third-party dependent module to the module updating path;
in the embodiment of the invention, according to the update loading format: import { xxx } from '/so _ lib/xxx.js', the module path of the corresponding third-party dependent module needs to be: and updating the node _ modules/the sound _ lib/xxx.js into the sound _ lib/xxx.js, and storing the xxx.js into a sound _ lib directory which is positioned in the same directory as the module.js.
And the re-editing module 205 is configured to generate a re-edited front-end script update program according to the updated syntax tree structure object.
In the embodiment of the invention, as an optional embodiment, the script syntax inverse parser is used for converting the updated syntax tree structure object into the text, and the re-edited front-end script updating program is generated according to the converted text.
In this embodiment of the present invention, as an optional embodiment, the format obtaining module 202 is further configured to:
if the format of the module path of the third-party dependent module cannot be obtained, the format conversion module 203 is notified;
the format conversion module 203 is further configured to delete the module path of the third-party dependent module and the file stored under the module path from the node to which the third-party dependent module belongs.
In this embodiment of the present invention, as another optional embodiment, the format obtaining module 202 is further configured to:
traversing and obtaining the formats of the module path of the non-third-party dependent module and the module path of the non-third-party dependent module in the syntax tree structure object;
the format conversion module 203 is further configured to determine whether the module path of the non-third-party dependent module has a corresponding module path format of the non-third-party dependent module, and whether the module path of the non-third-party dependent module has a corresponding module path of the non-third-party dependent module;
and if not, deleting the module paths of the non-third-party dependent modules without the corresponding module paths of the non-third-party dependent modules and the module paths of the non-third-party dependent modules without the corresponding module paths of the non-third-party dependent modules.
In this embodiment of the present invention, as an optional embodiment, the apparatus further includes:
a publishing module (not shown in the figure) for publishing the re-edited front-end script updating program to the browser so that the browser parses the front-end script updating program and generates a document object model tree according to a parsing result;
rendering the document object model tree to obtain a rendering tree;
and calculating the position of each node in the rendering tree in a display screen, drawing according to the position, and generating and displaying a webpage.
As shown in fig. 3, an embodiment of the present application provides a computer device 300, configured to execute the method for re-editing the front-end script program in fig. 1, where the device includes a memory 301, a processor 302, and a computer program stored in the memory 301 and executable on the processor 302, where the processor 302 implements the steps of the method for re-editing the front-end script program when executing the computer program.
Specifically, the memory 301 and the processor 302 can be general-purpose memories and processors, which are not limited to the specific embodiments, and the method for re-editing the front-end script program can be performed when the processor 302 runs the computer program stored in the memory 301.
Corresponding to the method for re-editing the front-end script program in fig. 1, an embodiment of the present application further provides a computer-readable storage medium having a computer program stored thereon, where the computer program is executed by a processor to perform the steps of the method for re-editing the front-end script program.
In particular, the storage medium can be a general-purpose storage medium, such as a removable disk, a hard disk, or the like, and the computer program on the storage medium can be executed when being executed to perform the method of re-editing the front-end script program.
In the embodiments provided in the present application, it should be understood that the disclosed system and method may be implemented in other ways. The above-described system embodiments are merely illustrative, and for example, the division of the units is only one logical functional division, and there may be other divisions in actual implementation, and for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection of systems or units through some communication interfaces, and may be in an electrical, mechanical or other form.
The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, functional units in the embodiments provided in the present application may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit.
The functions, if implemented in the form of software functional units and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present application or portions thereof that substantially contribute to the prior art may be embodied in the form of a software product stored in a storage medium and including instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present application. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus once an item is defined in one figure, it need not be further defined and explained in subsequent figures, and moreover, the terms "first", "second", "third", etc. are used merely to distinguish one description from another and are not to be construed as indicating or implying relative importance.
Finally, it should be noted that: the above-mentioned embodiments are only specific embodiments of the present application, and are used for illustrating the technical solutions of the present application, but not limiting the same, and the scope of the present application is not limited thereto, and although the present application is described in detail with reference to the foregoing embodiments, those skilled in the art should understand that: any person skilled in the art can modify or easily conceive the technical solutions described in the foregoing embodiments or equivalent substitutes for some technical features within the technical scope disclosed in the present application; such modifications, changes or substitutions do not depart from the spirit and scope of the present disclosure, which should be construed in light of the above teachings. Are intended to be covered by the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.
Claims (10)
1. A method of re-editing a front-end script program, comprising:
extracting a text in a front-end script program to be re-edited, and converting the extracted text into a syntax tree structure object by using a script syntax parser;
traversing each node in the syntax tree structure object, and acquiring the format of a module path of each third-party dependent module for each third-party dependent module traversed by the node;
determining that the format of the module path of the third-party dependent module does not conform to the loading format of the browser, and updating the format of the module path of the third-party dependent module to conform to the loading format of the browser to obtain an updated loading format;
updating the module path of the third-party dependent module according to the update loading format to obtain a module update path, and storing the dependent file under the module path of the third-party dependent module to the module update path;
and generating a re-edited front-end script updating program according to the updated syntax tree structure object.
2. The method of claim 1, further comprising:
and if the format of the module path of the third-party dependent module cannot be obtained, deleting the module path of the third-party dependent module and the file stored under the module path from the node to which the third-party dependent module belongs.
3. The method of claim 1, further comprising:
traversing and obtaining the formats of the module path of the non-third-party dependent module and the module path of the non-third-party dependent module in the syntax tree structure object;
judging whether the module path of the non-third-party dependent module has a corresponding module path format of the non-third-party dependent module or not, and judging whether the module path format of the non-third-party dependent module has a corresponding module path of the non-third-party dependent module or not;
and if not, deleting the module paths of the non-third-party dependent modules without the corresponding module paths of the non-third-party dependent modules and the module paths of the non-third-party dependent modules without the corresponding module paths of the non-third-party dependent modules.
4. The method according to any one of claims 1 to 3, further comprising:
issuing the re-edited front-end script updating program to the browser so that the browser analyzes the front-end script updating program and generates a document object model tree according to an analysis result;
rendering the document object model tree to obtain a rendering tree;
and calculating the position of each node in the rendering tree in a display screen, drawing according to the position, and generating and displaying a webpage.
5. An apparatus for re-editing a front-end script program, comprising:
the grammar tree construction module is used for extracting texts in a front-end script program to be re-edited and converting the extracted texts into grammar tree structure objects by using a script grammar parser;
the format acquisition module is used for traversing each node in the syntax tree structure object and acquiring the format of a module path of each third-party dependent module for each third-party dependent module traversed by the node;
the format conversion module is used for determining that the format of the module path of the third-party dependent module does not conform to the loading format of the browser, and updating the format of the module path of the third-party dependent module to the loading format conforming to the browser to obtain an updated loading format;
the path updating module is used for updating the module path of the third-party dependent module according to the updating loading format to obtain a module updating path and storing the dependent file under the module path of the third-party dependent module to the module updating path;
and the reediting module is used for generating a reediting front-end script updating program according to the updated syntax tree structure object.
6. The apparatus of claim 5, wherein the format obtaining module is further configured to:
if the format of the module path of the third-party dependent module cannot be obtained, informing the format conversion module;
the format conversion module is further configured to delete the module path of the third-party dependent module and the file stored under the module path from the node to which the third-party dependent module belongs.
7. The apparatus of claim 5, wherein the format obtaining module is further configured to:
traversing and obtaining the formats of the module path of the non-third-party dependent module and the module path of the non-third-party dependent module in the syntax tree structure object;
the format conversion module is also used for judging whether the module path of the non-third-party dependent module has a corresponding module path format of the non-third-party dependent module or not and whether the module path format of the non-third-party dependent module has a corresponding module path of the non-third-party dependent module or not;
and if not, deleting the module paths of the non-third-party dependent modules without the corresponding module paths of the non-third-party dependent modules and the module paths of the non-third-party dependent modules without the corresponding module paths of the non-third-party dependent modules.
8. The apparatus of any one of claims 5 to 7, further comprising:
the issuing module is used for issuing the re-edited front-end script updating program to the browser so that the browser analyzes the front-end script updating program and generates a document object model tree according to an analysis result;
rendering the document object model tree to obtain a rendering tree;
and calculating the position of each node in the rendering tree in a display screen, drawing according to the position, and generating and displaying a webpage.
9. An electronic device, comprising: a processor, a memory and a bus, the memory storing machine-readable instructions executable by the processor, the processor and the memory communicating over the bus when the electronic device is in operation, the machine-readable instructions when executed by the processor performing the steps of the method of re-editing a front-end script program as claimed in any one of claims 1 to 4.
10. A computer-readable storage medium, having stored thereon a computer program for performing, when executed by a processor, the steps of the method of re-editing a front-end script as claimed in any one of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911135284.4A CN110928549B (en) | 2019-11-19 | 2019-11-19 | Method and device for re-editing front-end script program |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911135284.4A CN110928549B (en) | 2019-11-19 | 2019-11-19 | Method and device for re-editing front-end script program |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110928549A true CN110928549A (en) | 2020-03-27 |
| CN110928549B CN110928549B (en) | 2023-03-21 |
Family
ID=69850313
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911135284.4A Active CN110928549B (en) | 2019-11-19 | 2019-11-19 | Method and device for re-editing front-end script program |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110928549B (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112269566A (en) * | 2020-11-03 | 2021-01-26 | 支付宝(杭州)信息技术有限公司 | Script generation processing method, device, equipment and system |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104268072A (en) * | 2014-09-03 | 2015-01-07 | 武汉烽火网络有限责任公司 | Graphical script editor and method for fast developing communication equipment testing script |
| CN104834595A (en) * | 2015-02-15 | 2015-08-12 | 网易（杭州）网络有限公司 | Visual automatic test method and system |
| US20150365359A1 (en) * | 2014-06-13 | 2015-12-17 | Russell Hasan | Html5-based message protocol |
| CN106503272A (en) * | 2016-12-15 | 2017-03-15 | 深圳Tcl数字技术有限公司 | Browsing device net page display packing and device |
| CN106796637A (en) * | 2014-10-14 | 2017-05-31 | 日本电信电话株式会社 | Analytical equipment, analysis method and analysis program |
-
2019
- 2019-11-19 CN CN201911135284.4A patent/CN110928549B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150365359A1 (en) * | 2014-06-13 | 2015-12-17 | Russell Hasan | Html5-based message protocol |
| CN104268072A (en) * | 2014-09-03 | 2015-01-07 | 武汉烽火网络有限责任公司 | Graphical script editor and method for fast developing communication equipment testing script |
| CN106796637A (en) * | 2014-10-14 | 2017-05-31 | 日本电信电话株式会社 | Analytical equipment, analysis method and analysis program |
| CN104834595A (en) * | 2015-02-15 | 2015-08-12 | 网易（杭州）网络有限公司 | Visual automatic test method and system |
| CN106503272A (en) * | 2016-12-15 | 2017-03-15 | 深圳Tcl数字技术有限公司 | Browsing device net page display packing and device |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112269566A (en) * | 2020-11-03 | 2021-01-26 | 支付宝(杭州)信息技术有限公司 | Script generation processing method, device, equipment and system |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110928549B (en) | 2023-03-21 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110968325B (en) | Applet conversion method and device | |
| CN111045678A (en) | Method, device and equipment for executing dynamic code on page and storage medium | |
| KR20150079867A (en) | Html5-protocol-based webpage presentation method and device | |
| CN106293675B (en) | System static resource loading method and device | |
| CN112416363B (en) | Method and device for generating front-end and back-end CRUD codes | |
| CN110244941B (en) | Task development method and device, electronic equipment and computer readable storage medium | |
| KR20090035933A (en) | Method and apparatus for editing web document | |
| CN108170409B (en) | Development method and system of WEB front-end control | |
| CN110888645A (en) | Method, device and storage medium for converting into small program | |
| CN112527291A (en) | Webpage generation method and device, electronic equipment and storage medium | |
| CN111913705A (en) | JavaScript template realization method based on difference update algorithm | |
| CN114153459A (en) | Interface document generation method and device | |
| CN110928549B (en) | Method and device for re-editing front-end script program | |
| CN111273903B (en) | Webpage making method and device, computer equipment and computer storage medium | |
| CN108664511B (en) | Method and device for acquiring webpage information | |
| CN112699642B (en) | Index extraction method and device for complex medical texts, medium and electronic equipment | |
| CN111783482A (en) | Text translation method and device, computer equipment and storage medium | |
| CN112800078A (en) | Lightweight text labeling method, system, equipment and storage medium based on javascript | |
| CN112394930A (en) | Method, electronic device, and medium for automatically constructing front-end interface | |
| CN113934959A (en) | Program preview method and device, computer equipment and storage medium | |
| CN116009863B (en) | Front-end page rendering method, device and storage medium | |
| CN114154092B (en) | Method for translating web pages and related product | |
| CN117112021B (en) | Route configuration generation method, device, equipment and computer readable storage medium | |
| CN116931921A (en) | Page source code generation method and device | |
| CN114675833A (en) | Automatic generation method and device of attribute declaration code based on iOS |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |