CN111190594B - Document generation method and device of Vue component - Google Patents
Document generation method and device of Vue component Download PDFInfo
- Publication number
- CN111190594B CN111190594B CN201911340856.2A CN201911340856A CN111190594B CN 111190594 B CN111190594 B CN 111190594B CN 201911340856 A CN201911340856 A CN 201911340856A CN 111190594 B CN111190594 B CN 111190594B
- Authority
- CN
- China
- Prior art keywords
- vue component
- character
- ast
- source code
- character string
- 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.)
- Active
Links
Classifications
-
- 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/38—Creation or generation of source code for implementing user interfaces
-
- 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
-
- 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/73—Program documentation
-
- 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)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Library & Information Science (AREA)
- Stored Programmes (AREA)
Abstract
The application discloses a document generation method and device of a Vue component, wherein the method comprises the following steps: acquiring a source code file of a Vue component, wherein the Vue component is an abstract unit for forming a page view; analyzing the source code file to generate a corresponding abstract syntax tree AST; traversing each tree node in the AST; and filling node contents of the tree nodes in a description block of a preset template document according to the node types of the tree nodes to generate a description document of the Vue component, wherein the description document is used for recording attribute information and interaction relations of all objects in the Vue component. The method and the device solve the technical problem that the description document of the Vue component cannot be automatically generated in the related technology, and improve the output efficiency of the description document.
Description
Technical Field
The application relates to the field of computers, in particular to a document generation method and device of a Vue component.
Background
In the related art, vue is a set of progressive JavaScript frames for building user interfaces, used for developing user interfaces. After a developer writes a Vue component, a corresponding document needs to be written for the component, so that other developers know how to use the component.
In the related art, writing a document to a Vue component is done manually by a developer, which wastes energy and increases maintenance costs.
In view of the above problems in the related art, no effective solution has been found yet.
Disclosure of Invention
In order to solve the technical problem that the description document of the Vue component cannot be automatically generated in the related art, the embodiment of the application provides a document generation method and device of the Vue component.
According to an embodiment of the present application, there is provided a document generation method of a Vue component, including: acquiring a source code file of a Vue component, wherein the Vue component is an abstract unit for forming a page view; analyzing the source code file to generate a corresponding abstract syntax tree AST; traversing each tree node in the AST; and filling node contents of the tree nodes in a description block of a preset template document according to the node types of the tree nodes to generate a description document of the Vue component, wherein the description document is used for recording attribute information and interaction relations of all objects in the Vue component.
Optionally, parsing the source code file to generate a corresponding AST includes: reading the character strings in the source code file; identifying character features of the character string; and generating the AST of the Vue component according to the character string and the character characteristics.
Optionally, generating the AST of the Vue component according to the character string and the character feature includes: generating a Token sequence based on character features, wherein the Token sequence comprises a plurality of character strings in the source code file; and constructing the AST of the source code file from top to bottom according to the Token sequence, wherein each character string in the Token sequence corresponds to a tree node.
Optionally, generating the AST of the Vue component according to the character string and the character feature includes: respectively performing lexical analysis on a plurality of character strings in the source code file based on character features to generate Token sequences; and carrying out grammar analysis on the Token sequence, and converting the Token of each character string into a tree expression so as to generate the AST of the source code file.
Optionally, identifying the character feature of the character string includes at least one of: identifying a tips attribute of the character string; identifying a character identifier of the character string; identifying annotation information of the character string; the type of the string is identified.
Optionally, filling the node content of the tree node in the description block of the preset template document according to the node type of the tree node includes: matching a target description block according to the node type of the tree node, wherein the target description block comprises one of the following components: props, events, slots, methods, the Props, the Events, the Slots being application programming interface API types of functions in the Vue component, the Methods being call types between Methods in the Vue component; and filling node contents of the tree nodes in the target description block.
Optionally, after generating the description document of the Vue component according to the AST, the method further includes: and after setting the association relation between the Vue component and the description document, uploading the Vue component to a JavaScript component library.
According to another embodiment of the present application, there is provided a document generating apparatus of a Vue component including: the acquisition module is used for acquiring a source code file of a Vue component, wherein the Vue component is an abstract unit for forming a page view; the analysis module is used for analyzing the source code file and generating a corresponding abstract syntax tree AST; the traversing module is used for traversing each tree node in the AST; the filling module is used for filling the node content of the tree node in a description block of a preset template document according to the node type of the tree node so as to generate a description document of the Vue component, wherein the description document is used for recording attribute information and interaction relations of all objects in the Vue component.
Optionally, the parsing module is specifically configured to: reading the character strings in the source code file; identifying character features of the character string; and generating the AST of the Vue component according to the character string and the character characteristics.
Optionally, the parsing module is configured to, when generating an AST of the Vue component according to the character string and the character feature, specifically: generating a Token sequence based on character features, wherein the Token sequence comprises a plurality of character strings in the source code file; and constructing the AST of the source code file from top to bottom according to the Token sequence, wherein each character string in the Token sequence corresponds to a tree node.
Optionally, the parsing module is configured to, when generating an AST of the Vue component according to the character string and the character feature, specifically: respectively performing lexical analysis on a plurality of character strings in the source code file based on character features to generate Token sequences; and carrying out grammar analysis on the Token sequence, and converting the Token of each character string into a tree expression so as to generate the AST of the source code file.
Optionally, the parsing module is configured to identify character features of the character string, and specifically configured to at least one of: identifying a tips attribute of the character string; identifying a character identifier of the character string; identifying annotation information of the character string; the type of the string is identified.
Optionally, the filling module is specifically configured to: matching a target description block according to the node type of the tree node, wherein the target description block comprises one of the following components: props, events, slots, methods, the Props, the Events, the Slots being application programming interface API types of functions in the Vue component, the Methods being call types between Methods in the Vue component; and filling node contents of the tree nodes in the target description block.
Optionally, the apparatus further includes: and the uploading module is used for uploading the Vue component to a JavaScript component library after setting the association relation between the Vue component and the description document after the filling module generates the description document of the Vue component according to the AST.
According to a further embodiment of the application, there is also provided a storage medium having stored therein a computer program, wherein the computer program is arranged to perform the steps of any of the method embodiments described above when run.
According to a further embodiment of the application, there is also provided an electronic device comprising a memory having stored therein a computer program and a processor arranged to run the computer program to perform the steps of any of the method embodiments described above.
According to the scheme of the embodiment, the source code file of the Vue component is obtained, then the source code file is analyzed to generate a corresponding abstract syntax tree AST, finally the description document of the Vue component is generated according to the AST, the description document of the Vue component is generated based on the AST, the description document can be automatically generated through static analysis of the code content, the technical problem that the description document of the Vue component cannot be automatically generated in the related technology is solved, and the output efficiency of the description document is improved.
The technical scheme of the application is further described in detail through the drawings and the embodiments.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments of the application and together with the description, serve to explain the principles of the application.
The application may be more clearly understood from the following detailed description taken in conjunction with the accompanying drawings, in which:
FIG. 1 is a block diagram of the hardware architecture of a document generation computer of a Vue component in accordance with an embodiment of the present application;
FIG. 2 is a flow chart of a method of document generation of a Vue component according to an embodiment of the application;
FIG. 3 is a schematic illustration of an AST in an embodiment of the application;
FIG. 4 is a block diagram of the structure of a document generating apparatus of a Vue component according to an embodiment of the present application;
FIG. 5 is a block diagram of the structure of a document generating apparatus of a Vue component in one embodiment of the application.
Detailed Description
Various exemplary embodiments of the present application will now be described in detail with reference to the accompanying drawings. It should be noted that: the relative arrangement of the components and steps, numerical expressions and numerical values set forth in these embodiments do not limit the scope of the present application unless it is specifically stated otherwise.
Meanwhile, it should be understood that the sizes of the respective parts shown in the drawings are not drawn in actual scale for convenience of description.
The following description of at least one exemplary embodiment is merely exemplary in nature and is in no way intended to limit the application, its application, or uses.
Techniques, methods, and apparatus known to one of ordinary skill in the relevant art may not be discussed in detail, but are intended to be part of the specification where appropriate.
It should be noted that: like reference numerals and letters denote like items in the following figures, and thus once an item is defined in one figure, no further discussion thereof is necessary in subsequent figures.
Embodiments of the application are operational with numerous other general purpose or special purpose computing system environments or configurations. Examples of well known computing systems, environments, and/or configurations that may be suitable for use with the computer system/server include, but are not limited to: personal computer systems, server computer systems, thin clients, thick clients, hand-held or laptop devices, microprocessor-based systems, set-top boxes, programmable consumer electronics, network personal computers, minicomputer systems, mainframe computer systems, and distributed cloud computing technology environments that include any of the above systems, and the like.
A computer system/server may be described in the general context of computer-system-executable instructions, such as program modules, being executed by a computer system. Generally, program modules may include routines, programs, objects, components, logic, data structures, etc., that perform particular tasks or implement particular abstract data types. The computer system/server may be implemented in a distributed cloud computing environment in which tasks are performed by remote processing devices that are linked through a communications network. In a distributed cloud computing environment, program modules may be located in both local and remote computing system storage media including memory storage devices.
The method according to the first embodiment of the present application may be implemented in a mobile terminal, a computer, a server, or a similar computing device. Taking a computer as an example, fig. 1 is a block diagram of a hardware structure of a document generating computer of a Vue component according to an embodiment of the present application. As shown in fig. 1, the computer 10 may include one or more (only one is shown in fig. 1) processors 102 (the processor 102 may include, but is not limited to, a microprocessor MCU or a processing device such as a programmable logic device FPGA) and a memory 104 for storing data, and optionally, a transmission device 106 for communication functions and an input-output device 108. It will be appreciated by those of ordinary skill in the art that the configuration shown in FIG. 1 is merely illustrative and is not intended to limit the configuration of the computer described above. For example, computer 10 may also include more or fewer components than shown in FIG. 1, or have a different configuration than shown in FIG. 1.
The memory 104 may be used to store computer programs, such as software programs of application software and modules, such as computer programs corresponding to the document generation method of the Vue component in the embodiment of the present application, and the processor 102 executes the computer programs stored in the memory 104 to perform various functional applications and data processing, that is, implement the above-mentioned methods. Memory 104 may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some examples, memory 104 may further include memory located remotely from processor 102, which may be connected to computer 10 via a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.
The transmission means 106 is arranged to receive or transmit data via a network. Specific examples of the network described above may include a wireless network provided by a communications provider of computer 10. In one example, the transmission device 106 includes a network adapter (Network Interface Controller, simply referred to as NIC) that can connect to other network devices through a base station to communicate with the internet. In one example, the transmission device 106 may be a Radio Frequency (RF) module, which is used to communicate with the internet wirelessly.
In this embodiment, a method for generating a document of a Vue component is provided, and fig. 2 is a flowchart of a method for generating a document of a Vue component according to an embodiment of the present application, as shown in fig. 2, where the flowchart includes the following steps:
step S202, acquiring a source code file of a Vue component, wherein the Vue component is an abstract unit for forming a page view;
the Vue of this embodiment is a set of progressive JavaScript frames for constructing a user interface, the Vue is designed to be applied layer by layer from bottom to top, the Vue component is an abstract unit defined by the Vue, and the view layer page of the software is assembled by at least one Vue component.
Step S204, analyzing the source code file to generate a corresponding abstract syntax tree (Abstract Syntax Tree, AST);
the abstract syntax tree in this embodiment can be applied to all types of programming languages for abstractly expressing the logical relations of the source code syntax structure.
Step S206, traversing each tree node in AST;
step S208, filling node contents of the tree nodes in a description block of a preset template document according to the node types of the tree nodes to generate a description document of the Vue component, wherein the description document is used for recording attribute information and interaction relations of all objects in the Vue component.
The description document in this embodiment is a descriptive document of a source code file for specifically explaining and explaining the types, the scopes, and the interaction relations among the objects (instantiations of classes) and the like of the respective objects in the source code.
Through the steps, the source code file of the Vue component is obtained, then the source code file is analyzed to generate a corresponding abstract syntax tree AST, finally, each tree node in the AST is traversed and node contents are filled, the description document of the Vue component is generated based on the AST, the description document can be automatically generated through static analysis of the code contents, the technical problem that the description document of the Vue component cannot be automatically generated in the related technology is solved, and the output efficiency of the description document is improved.
The AST of this embodiment is a tree representation of an abstract syntax structure of a source code, and is used to describe a logical relationship between sentences of the source code, where each node on the tree represents a structure in the source code, and each AST node (tree node) corresponds to a source code item. Fig. 3 is a schematic diagram of an AST according to an embodiment of the present application, where the source code is:
in this embodiment, parsing the source code file to generate a corresponding AST includes:
s11, reading character strings in a source code file;
the present embodiment can read the character string in the source code file in a recursive manner.
S12, recognizing character characteristics of the character string;
the character features of the present embodiment are used to describe attribute information and associated information of the character string, and the character features of the identification character string may be, but are not limited to: identifying a props attribute of the character string, wherein the props attribute is used for describing a data transmission direction between a parent component and a child component; identifying a character identifier of the character string; annotation information identifying the character string; the type of the character string is identified.
S13, generating AST of the Vue component according to the character string and the character characteristics.
The present embodiment may generate an AST in various manners, and in one implementation of the present embodiment, generating an AST of a Vue component according to a character string and character features includes: generating a Token sequence based on the character features, wherein the Token sequence comprises a plurality of character strings in a source code file; constructing an AST of a source code file from top to bottom according to a Token sequence, wherein each character string in the Token sequence corresponds to a tree node.
The Token of this embodiment is a word obtained by similarly segmenting a sentence of a source code of a Vue component, and the Token sequence is a word sequence composed of a plurality of words, and the word is a character string and is the minimum unit constituting the source code.
In this embodiment, the top-down AST construction process includes two kinds, one is a recursive subroutine method, and the other is an LL analysis method (a compiling method of top-down analysis). When constructed using LL analysis, token sequences are performed in left to right order and a leftmost derivation is made in the process, and the incoming Token sequences are analyzed and matched from left to right.
In another implementation of this embodiment, generating an AST of a Vue component from a string and character features includes: respectively performing lexical analysis on a plurality of character strings in the source code file based on character features to generate Token sequences; and analyzing the Token sequence, and converting the Token of each character string into a tree expression to generate the AST of the source code file.
In lexical analysis, which is to read in a source program (which may be considered as a long string of characters) and "cut" into small segments (each segment being a lexical element token), each element being of specific significance, e.g. representing a particular keyword, or representing a number, the character stream constituting the source code is first read in and organized into a sequence of meaningful lexicons (lexemes) based on character features, and lexical elements (token) are generated for each lexicon.
In the lexical analysis process, the character string codes are read and then combined into individual tokens according to a predetermined rule, and at the same time, the contents such as blank symbols, comments and the like can be optionally removed, and finally, the whole code is segmented into a token sequence (one-dimensional array). In the process of grammar analysis, the tokens analyzed by the vocabulary are converted into the expression form of the tree, optionally, the grammar can be verified, if the grammar has errors, grammar errors are thrown, and when the tree is generated, unnecessary identifiers of the tokens (such as incomplete brackets) are correspondingly deleted, so that the AST of the embodiment is possibly not completely matched with the source code.
The Vue component of this embodiment differs from other frameworks of JavaScript in that the API (Application Programming Interface ) of the Vue component consists of tips, events and Slots, including specific methods attributes (which can be called each other in a functional form between methods), where tips allows the external environment to pass data to the component, events allows the component to trigger side effects (additional Events) of the external environment, and Slots allow the external environment to combine additional content in the component. Therefore, corresponding description blocks can be formed in the description document aiming at the Props, events, slots and Methods in the Vue component, and the functions and the implementation principle of the Vue component can be clearly described by extracting the data transmission mode and the data transmission object, the function call relation and the like of the Vue component.
In this embodiment, filling the node content of the tree node in the description block of the preset template document according to the node type of the tree node includes: matching the target description block according to the node type of the tree node, wherein the target description block comprises one of the following: props, events, slots, methods, the Props, the Events, the Slots being application programming interface API types of functions in the Vue component, the Methods being call types between Methods in the Vue component; the node content of the tree node is filled in the target description block. In addition, description blocks such as attributes and the like can be further included, and the description blocks are described below: tips, the manner in which data is transferred from a parent component to a child component; slots in the code script are divided into anonymous slots, named slots and scope slots; events are custom Events in the code script; methods are user events in code scripts. Methods correspond to functions (functions) in the Vue component, which are blocks of javascript code that can be executed, predefined by javascript program definitions or javascript implementations, which can have actual parameters or formal parameters specifying one or more values to be used by this function to perform the computation, and can also return values to represent the result of the computation. Methods are javascript functions called by objects.
In one example, the source code is as follows:
the data structure of the AST obtained by analysis is as follows:
the description document obtained according to the AST mapping includes four description blocks (pros, events, slots, methods), the codes are as follows:
#MyComponent
This is a description of the component
##Props
<！--@vuese:MyComponent:props:start-->
|Name|Description|Type|Required|Default|
|---|---|---|---|---|
|name|The name of the form,up to 8characters|`String`/`Number`|`true`|-|
<！--@vuese:MyComponent:props:end-->
##Events
<！--@vuese:MyComponent:events:start-->
|Event Name|Description|Parameters|
|---|---|---|
|onclear|Fire when the form is cleared|The argument is a boolean value representing xxx|
<！--@vuese:MyComponent:events:end-->
##Slots
<！--@vuese:MyComponent:slots:start-->
|Name|Description|Default Slot Content|
|---|---|---|
|header|Form header|`<th>title</th>`|
<！--@vuese:MyComponent:slots:end-->
##Methods
<！--@vuese:MyComponent:methods:start-->
|Method|Description|Parameters|
|---|---|---|
|clear|Used to manually clear the form|-|
<！--@vuese:MyComponent:methods:end-->。
the scheme of the embodiment can be applied to a Vue component of JavaScript, and can also be applied to Per.js files, safe.js files and the like under the condition of no contradiction.
In one implementation of this embodiment, after generating the description document of the Vue component according to the AST, the method further includes: after the association relation between the Vue component and the description document is set, uploading the Vue component to a JavaScript component library.
When a user invokes a Vue component in the JavaScript component library, the associated description document can be searched through the association relation search.
From the description of the above embodiments, it will be clear to a person skilled in the art that the method according to the above embodiments may be implemented by means of software plus the necessary general hardware platform, but of course also by means of hardware, but in many cases the former is a preferred embodiment. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the prior art in the form of a software product stored in a storage medium (e.g. ROM/RAM, magnetic disk, optical disk) comprising instructions for causing a terminal device (which may be a mobile phone, a computer, a server, or a network device, etc.) to perform the method according to the embodiments of the present application.
The embodiment also provides a device for generating a document of the Vue component, which is used for implementing the above embodiment and the preferred implementation manner, and is not described in detail. As used below, the term "module" may be a combination of software and/or hardware that implements a predetermined function. While the means described in the following embodiments are preferably implemented in software, implementation in hardware, or a combination of software and hardware, is also possible and contemplated.
FIG. 4 is a block diagram of a document generation apparatus of a Vue component according to an embodiment of the present application, as shown in FIG. 4, the apparatus comprising: the system comprises an acquisition module 40, a parsing module 42, a traversal module 44, a population module 46, wherein,
an obtaining module 40, configured to obtain a source code file of a Vue component, where the Vue component is an abstract unit that forms a page view;
the parsing module 42 is configured to parse the source code file to generate a corresponding abstract syntax tree AST;
a traversing module 44, configured to traverse each tree node in the AST;
and the filling module 46 is configured to fill node contents of the tree node in a description block of a preset template document according to a node type of the tree node, so as to generate a description document of the Vue component, where the description document is used to record attribute information and interaction relations of each object in the Vue component.
Optionally, the parsing module is specifically configured to: reading the character strings in the source code file; identifying character features of the character string; and generating the AST of the Vue component according to the character string and the character characteristics.
Optionally, the parsing module is configured to, when generating an AST of the Vue component according to the character string and the character feature, specifically: generating a Token sequence based on character features, wherein the Token sequence comprises a plurality of character strings in the source code file; and constructing the AST of the source code file from top to bottom according to the Token sequence, wherein each character string in the Token sequence corresponds to a tree node.
Optionally, the parsing module is configured to, when generating an AST of the Vue component according to the character string and the character feature, specifically: respectively performing lexical analysis on a plurality of character strings in the source code file based on character features to generate Token sequences; and carrying out grammar analysis on the Token sequence, and converting the Token of each character string into a tree expression so as to generate the AST of the source code file.
Optionally, the parsing module is configured to identify character features of the character string, and specifically configured to at least one of: identifying a tips attribute of the character string; identifying a character identifier of the character string; identifying annotation information of the character string; the type of the string is identified.
Optionally, the filling module is specifically configured to: matching a target description block according to the node type of the tree node, wherein the target description block comprises one of the following components: props, events, slots, methods, the Props, the Events, the Slots being application programming interface API types of functions in the Vue component, the Methods being call types between Methods in the Vue component; and filling node contents of the tree nodes in the target description block.
FIG. 5 is a block diagram of a document generation apparatus of a Vue component in one embodiment of the application, as shown in FIG. 5, the apparatus comprising: the device comprises an acquisition module 40, an analysis module 42, a traversing module 44, a filling module 46 and an uploading module 50, wherein the uploading module 50 is used for uploading the Vue component to a JavaScript component library after setting the association relation between the Vue component and the description document after the filling module generates the description document of the Vue component according to the AST.
It should be noted that each of the above modules may be implemented by software or hardware, and for the latter, it may be implemented by, but not limited to: the modules are all located in the same processor; alternatively, the above modules may be located in different processors in any combination.
An embodiment of the application also provides a storage medium having a computer program stored therein, wherein the computer program is arranged to perform the steps of any of the method embodiments described above when run.
Alternatively, in the present embodiment, the above-described storage medium may be configured to store a computer program for performing the steps of:
s1, acquiring a source code file of a Vue component, wherein the Vue component is an abstract unit for forming a page view;
s2, analyzing the source code file to generate a corresponding abstract syntax tree AST;
s3, traversing each tree node in the AST;
and S4, filling node contents of the tree nodes in a description block of a preset template document according to the node types of the tree nodes to generate a description document of the Vue component, wherein the description document is used for recording attribute information and interaction relations of all objects in the Vue component.
Alternatively, in the present embodiment, the storage medium may include, but is not limited to: a usb disk, a Read-Only Memory (ROM), a random access Memory (Random Access Memory, RAM), a removable hard disk, a magnetic disk, or an optical disk, or other various media capable of storing a computer program.
An embodiment of the application also provides an electronic device comprising a memory having stored therein a computer program and a processor arranged to run the computer program to perform the steps of any of the method embodiments described above.
Optionally, the electronic apparatus may further include a transmission device and an input/output device, where the transmission device is connected to the processor, and the input/output device is connected to the processor.
Alternatively, in the present embodiment, the above-described processor may be configured to execute the following steps by a computer program:
s1, acquiring a source code file of a Vue component, wherein the Vue component is an abstract unit for forming a page view;
s2, analyzing the source code file to generate a corresponding abstract syntax tree AST;
s3, traversing each tree node in the AST;
and S4, filling node contents of the tree nodes in a description block of a preset template document according to the node types of the tree nodes to generate a description document of the Vue component, wherein the description document is used for recording attribute information and interaction relations of all objects in the Vue component.
Alternatively, specific examples in this embodiment may refer to examples described in the foregoing embodiments and optional implementations, and this embodiment is not described herein.
In this specification, each embodiment is described in a progressive manner, and each embodiment is mainly described in a different manner from other embodiments, so that the same or similar parts between the embodiments are mutually referred to. For system embodiments, the description is relatively simple as it essentially corresponds to method embodiments, and reference should be made to the description of method embodiments for relevant points.
The method and system of the present application may be implemented in a number of ways. For example, the methods and systems of the present application may be implemented by software, hardware, firmware, or any combination of software, hardware, firmware. The above-described sequence of steps for the method is for illustration only, and the steps of the method of the present application are not limited to the sequence specifically described above unless specifically stated otherwise. Furthermore, in some embodiments, the present application may also be embodied as programs recorded in a recording medium, the programs including machine-readable instructions for implementing the methods according to the present application. Thus, the present application also covers a recording medium storing a program for executing the method according to the present application.
The description of the present application has been presented for purposes of illustration and description, and is not intended to be exhaustive or limited to the application in the form disclosed. Many modifications and variations will be apparent to those of ordinary skill in the art. The embodiments were chosen and described in order to best explain the principles of the application and the practical application, and to enable others of ordinary skill in the art to understand the application for various embodiments with various modifications as are suited to the particular use contemplated.
Claims (8)
1. A document generation method of a Vue component, comprising:
acquiring a source code file of a Vue component, wherein the Vue component is an abstract unit for forming a page view;
analyzing the source code file to generate a corresponding abstract syntax tree AST;
traversing each tree node in the AST;
filling node contents of tree nodes in a description block of a preset template document according to node types of the tree nodes to generate a description document of the Vue component, wherein the description document is used for recording attribute information and interaction relations of all objects in the Vue component;
the parsing the source code file, generating a corresponding abstract syntax tree AST, includes:
reading the character strings in the source code file;
identifying character features of the character string, wherein identifying character features of the character string comprises at least one of:
identifying a tips attribute of the character string;
identifying a character identifier of the character string;
identifying annotation information of the character string;
identifying the type of the character string;
generating an AST of the Vue component according to the character string and the character characteristic;
wherein the generating the AST of the Vue component according to the character string and the character feature comprises:
generating a Token sequence based on the character features, wherein the Token sequence comprises a plurality of character strings in the source code file;
and constructing the AST of the source code file from top to bottom according to the Token sequence, wherein each character string in the Token sequence corresponds to a tree node.
2. The method of claim 1, wherein generating an AST of the Vue component from the string and the character feature comprises:
respectively performing lexical analysis on a plurality of character strings in the source code file based on the character features to generate Token sequences;
and carrying out grammar analysis on the Token sequence, and converting the Token of each character string into a tree expression so as to generate the AST of the source code file.
3. The method of claim 1, wherein populating node content of the tree node in a description block of a preset template document according to node type of the tree node comprises:
matching a target description block according to the node type of the tree node, wherein the target description block comprises one of the following components: props, events, slots, methods, the Props, the Events, the Slots being application programming interface API types of functions in the Vue component, the Methods being call types between Methods in the Vue component;
and filling node contents of the tree nodes in the target description block.
4. The method of claim 1, wherein after generating the description document of the Vue component according to the AST, the method further comprises:
and after setting the association relation between the Vue component and the description document, uploading the Vue component to a JavaScript component library.
5. A document generation apparatus of a Vue component, comprising:
the acquisition module is used for acquiring a source code file of a Vue component, wherein the Vue component is an abstract unit for forming a page view;
the analysis module is used for analyzing the source code file and generating a corresponding abstract syntax tree AST;
the traversing module is used for traversing each tree node in the AST;
the filling module is used for filling node contents of the tree nodes in a description block of a preset template document according to the node types of the tree nodes so as to generate a description document of the Vue component, wherein the description document is used for recording attribute information and interaction relations of all objects in the Vue component;
the analysis module is specifically configured to: reading the character strings in the source code file; identifying character features of the character string; generating an AST of the Vue component according to the character string and the character characteristic;
the parsing module is configured to, when generating an AST of the Vue component according to the character string and the character feature, specifically: generating a Token sequence based on character features, wherein the Token sequence comprises a plurality of character strings in the source code file; constructing an AST of the source code file from top to bottom according to the Token sequence, wherein each character string in the Token sequence corresponds to a tree node;
the parsing module is used for identifying character features of the character string, and is specifically used for at least one of the following: identifying a tips attribute of the character string; identifying a character identifier of the character string; identifying annotation information of the character string; the type of the string is identified.
6. The apparatus of claim 5, wherein the parsing module is configured to, when generating an AST of the Vue component according to the character string and the character feature, specifically:
respectively performing lexical analysis on a plurality of character strings in the source code file based on character features to generate Token sequences;
and carrying out grammar analysis on the Token sequence, and converting the Token of each character string into a tree expression so as to generate the AST of the source code file.
7. The device according to claim 5, characterized in that said filling module is in particular adapted to:
matching a target description block according to the node type of the tree node, wherein the target description block comprises one of the following components: props, events, slots, methods, the Props, the Events, the Slots being application programming interface API types of functions in the Vue component, the Methods being call types between Methods in the Vue component;
and filling node contents of the tree nodes in the target description block.
8. The apparatus of claim 5, wherein the apparatus further comprises:
and the uploading module is used for uploading the Vue component to a JavaScript component library after setting the association relation between the Vue component and the description document after the filling module generates the description document of the Vue component according to the AST.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911340856.2A CN111190594B (en) | 2019-12-23 | 2019-12-23 | Document generation method and device of Vue component |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911340856.2A CN111190594B (en) | 2019-12-23 | 2019-12-23 | Document generation method and device of Vue component |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111190594A CN111190594A (en) | 2020-05-22 |
| CN111190594B true CN111190594B (en) | 2023-09-22 |
Family
ID=70710140
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911340856.2A Active CN111190594B (en) | 2019-12-23 | 2019-12-23 | Document generation method and device of Vue component |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111190594B (en) |
Families Citing this family (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112256644B (en) * | 2020-10-20 | 2024-05-24 | 抖音视界有限公司 | Information processing method, device and computer storage medium |
| CN112417338B (en) * | 2020-11-30 | 2022-12-20 | 北京博瑞彤芸科技股份有限公司 | Page adaptation method, system and equipment |
| CN112612470B (en) * | 2021-01-05 | 2022-04-22 | 北京城市网邻信息技术有限公司 | User interface file generation method and device |
| CN113050935A (en) * | 2021-03-17 | 2021-06-29 | 平安普惠企业管理有限公司 | Method and device for generating mixed object, computing equipment and computer readable storage medium |
| CN113126990B (en) * | 2021-04-22 | 2023-09-29 | 北京京东振世信息技术有限公司 | Page development method, device, equipment and storage medium |
| CN113282681B (en) * | 2021-05-17 | 2022-08-26 | 国电南瑞科技股份有限公司 | Description method, analysis method and device for multi-source heterogeneous data |
| CN114201236A (en) * | 2021-12-14 | 2022-03-18 | 平安壹钱包电子商务有限公司 | AST-based component configuration method, device, equipment and medium |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| BE665969A (en) * | 1964-06-25 | 1965-10-18 | ||
| EP3425496A1 (en) * | 2017-07-07 | 2019-01-09 | Beijing Xiaomi Mobile Software Co., Ltd. | Method and device for supporting multi-framework syntax |
| CN109375922A (en) * | 2018-09-26 | 2019-02-22 | 深圳壹账通智能科技有限公司 | A kind of automatic generation method and terminal device of interface document |
| CN110187885A (en) * | 2019-06-10 | 2019-08-30 | 合肥本源量子计算科技有限责任公司 | A kind of the intermediate code generation method and device of the compiling of quantum program |
| CN110308930A (en) * | 2019-06-18 | 2019-10-08 | 广州华多网络科技有限公司 | Interface document generation method, device, computer equipment and storage medium |
-
2019
- 2019-12-23 CN CN201911340856.2A patent/CN111190594B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| BE665969A (en) * | 1964-06-25 | 1965-10-18 | ||
| EP3425496A1 (en) * | 2017-07-07 | 2019-01-09 | Beijing Xiaomi Mobile Software Co., Ltd. | Method and device for supporting multi-framework syntax |
| CN109375922A (en) * | 2018-09-26 | 2019-02-22 | 深圳壹账通智能科技有限公司 | A kind of automatic generation method and terminal device of interface document |
| CN110187885A (en) * | 2019-06-10 | 2019-08-30 | 合肥本源量子计算科技有限责任公司 | A kind of the intermediate code generation method and device of the compiling of quantum program |
| CN110308930A (en) * | 2019-06-18 | 2019-10-08 | 广州华多网络科技有限公司 | Interface document generation method, device, computer equipment and storage medium |
Non-Patent Citations (2)
| Title |
|---|
| 《High performance parallel computing of flows in complex geometries》;Laurent Y. M. Gicquel;《Comptes Rendus Mécanique》;第104页-第124页 * |
| 《一种改进的基于抽象语法树的软件源代码 比对算法》;刘楠;《信息网络安全》(第第1期期);第38页-第42页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111190594A (en) | 2020-05-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111190594B (en) | Document generation method and device of Vue component | |
| US11334692B2 (en) | Extracting a knowledge graph from program source code | |
| CN106970820B (en) | Code storage method and code storage device | |
| CN111209004B (en) | Code conversion method and device | |
| US10122380B2 (en) | Compression of javascript object notation data using structure information | |
| US9342301B2 (en) | Converting and input script to a natural language description | |
| US9424003B1 (en) | Schema-less system output object parser and code generator | |
| KR20180122017A (en) | Efficient state machine for real-time data flow programming | |
| CN111045678A (en) | Method, device and equipment for executing dynamic code on page and storage medium | |
| US9311058B2 (en) | Jabba language | |
| CN111176650B (en) | Parser generation method, search method, server, and storage medium | |
| CN107402798B (en) | Method and apparatus for converting sequencing scripts to reuse JCL in different coding environments | |
| CN112540862A (en) | Interface document data generation method, device, equipment and storage medium | |
| CN110543297A (en) | method and apparatus for generating source code | |
| CN114895908B (en) | Web application expression-based implementation method, system, equipment and storage medium | |
| CN116483850A (en) | Data processing method, device, equipment and medium | |
| CN110716953A (en) | SQL statement automatic generation method, device, equipment and readable storage medium | |
| KR20120070713A (en) | Method for indexing natural language and mathematical formula, apparatus and computer-readable recording medium with program therefor | |
| CN111898762B (en) | Deep learning model catalog creation | |
| CN111507079B (en) | Multi-language document generation method, system and equipment | |
| CN114528218A (en) | Test program generation method, test program generation device, storage medium, and electronic device | |
| CN109992293B (en) | Method and device for assembling Android system component version information | |
| KR102374034B1 (en) | Apparatus for generating seed file and method thereof | |
| CN113821211B (en) | Command parsing method and device, storage medium and computer equipment | |
| CN110618809B (en) | Front-end webpage input constraint extraction method and device |
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 | ||
| CB02 | Change of applicant information |
Address after: 100102 201 / F, block C, 2 lizezhong 2nd Road, Chaoyang District, Beijing Applicant after: Beijing Shuidi Technology Group Co.,Ltd. Address before: Room 4103, room 101, floor 1, building 2, No. 208, Lize Zhongyuan, Chaoyang District, Beijing 100102 Applicant before: Beijing Health Home Technology Co.,Ltd. |
|
| CB02 | Change of applicant information | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |