CN111625236A - Front-end development method and device based on componentization, electronic equipment and storage medium - Google Patents
Front-end development method and device based on componentization, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN111625236A CN111625236A CN202010361300.8A CN202010361300A CN111625236A CN 111625236 A CN111625236 A CN 111625236A CN 202010361300 A CN202010361300 A CN 202010361300A CN 111625236 A CN111625236 A CN 111625236A
- Authority
- CN
- China
- Prior art keywords
- view
- data
- frame
- data stream
- document
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000011161 development Methods 0.000 title claims abstract description 47
- 238000000034 method Methods 0.000 title claims abstract description 39
- 238000012544 monitoring process Methods 0.000 claims abstract description 53
- 238000004458 analytical method Methods 0.000 claims abstract description 18
- 238000012545 processing Methods 0.000 claims abstract description 12
- 238000004806 packaging method and process Methods 0.000 claims abstract description 7
- 230000008859 change Effects 0.000 claims description 24
- 238000007781 pre-processing Methods 0.000 claims description 6
- 238000004590 computer program Methods 0.000 claims description 5
- 230000001960 triggered effect Effects 0.000 claims description 4
- 230000008569 process Effects 0.000 claims description 3
- 239000000126 substance Substances 0.000 claims 1
- 230000006870 function Effects 0.000 description 14
- 230000010354 integration Effects 0.000 description 6
- 238000007726 management method Methods 0.000 description 5
- 238000010586 diagram Methods 0.000 description 4
- 238000005538 encapsulation Methods 0.000 description 4
- 230000007246 mechanism Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 238000010411 cooking Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000008676 import Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 239000002245 particle Substances 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
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
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)
- Document Processing Apparatus (AREA)
Abstract
The invention relates to the technical field of software development, and discloses a front-end development method based on componentization, which comprises the following steps: acquiring a frame of a front-end component, performing semantic declaration on the frame, packaging the frame after the semantic declaration, and performing label creation on the packaged frame to obtain a standard frame; receiving a data stream input by a user, monitoring the data stream by using the standard frame to obtain data item changes in the data stream, and generating a monitoring data set; carrying out view analysis on the document template in the standard frame to obtain a document view; and executing binding processing of the data and the view of the front-end page according to the monitoring data set and the document view. The invention also provides a front-end development device based on modularization, electronic equipment and a computer readable storage medium. The invention can realize the improvement of the front-end development based on componentization. The invention also relates to a blockchain technique, the listening data set being stored in a blockchain.
Description
Technical Field
The present invention relates to the field of software development technologies, and in particular, to a method and an apparatus for front-end development based on componentization, an electronic device, and a computer-readable storage medium.
Background
The front-end development based on componentization refers to splitting the front-end page into smaller particles so that a user can maintain all functions of the front-end page more conveniently. For example, for a front-end search page, the search bar may serve as one component, the search result list may serve as one component, or even the search bar may be formed by splitting multiple components.
Currently, there are three common implementation modes for front-end development based on componentization: the method adopts a rear-end template; the mode II is directly realized by JS at a browser end; and the third mode is to utilize a construction tool to realize the front-end development based on componentization. However, the first mode needs to be maintained in HTML, which is equivalent to intrusive source code content change, and is not beneficial to maintenance of a rear-end front-end component, CSS files of the second pair of front-end components cannot be managed, real componentization cannot be realized, and the third mode needs to excessively depend on a third-party tool, so that a large amount of development cost is brought.
In summary, the current front-end development based on componentization mainly has the following two defects: the first is that the development cost of the front-end components is large; secondly, the developed front-end component is low in maintainability.
Disclosure of Invention
The invention provides a method and a device for front-end development based on modularization, electronic equipment and a computer readable storage medium, and mainly aims to reduce the development cost of a front-end component and improve the maintainability of the front-end component.
In order to achieve the above object, the invention provides a front-end development method based on componentization, which comprises the following steps:
acquiring a frame of a front-end component, performing semantic declaration on the frame, packaging the frame after the semantic declaration, and performing label creation on the packaged frame to obtain a standard frame;
receiving a data stream input by a user, monitoring the data stream by using the standard frame to obtain data item changes in the data stream, and generating a monitoring data set;
carrying out view analysis on the document template in the standard frame to obtain a document view;
and executing binding processing of the data and the view of the front-end page according to the monitoring data set and the document view.
Optionally, the monitoring the data stream by using the standard framework to obtain the data item change in the data stream includes:
the data stream is obtained through a preset method, key fields of the data stream are traversed, attributes of the key fields are identified, and updated values of the attributes are recorded through preset instance objects, wherein the updated values are changes of data items in the data stream.
Optionally, the performing view analysis on the document template in the standard frame to obtain a document view includes:
converting the document template into an abstract syntax tree by using a template analyzer, and creating a view node in the abstract syntax tree;
identifying father nodes and root nodes of all elements in the document template, and establishing corresponding relation marks between the father nodes and the root nodes;
and leading the father node and the child nodes into the view nodes according to the identification to obtain the document view.
Optionally, the template parser comprises: an HTML parser, a text parser, and a filter parser.
Optionally, the monitoring data set is stored in a block chain, and the executing binding processing of the data and the view of the front-end page according to the monitoring data set and the document view includes:
if the data in the monitoring data set changes, updating of the document view is automatically triggered, and if the data in the monitoring data set does not change, the document view does not change.
In order to solve the above problem, the present invention further provides a front-end development apparatus based on componentization, the apparatus comprising:
the preprocessing module is used for acquiring a frame of a front-end component, performing semantic declaration on the frame, packaging the frame after the semantic declaration, and performing label creation on the packaged frame to obtain a standard frame;
the monitoring module is used for receiving a data stream input by a user, monitoring the data stream by using the standard frame to obtain data item changes in the data stream and generate monitoring data;
the analysis module is used for carrying out view analysis on the document template in the standard frame to obtain a document view;
and the execution module is used for executing the binding processing of the data and the view of the front-end page according to the monitoring data set and the document view.
Optionally, the monitoring the data stream by using the standard framework to obtain the data item change in the data stream includes:
the data stream is obtained through a preset method, key fields of the data stream are traversed, attributes of the key fields are identified, and updated values of the attributes are recorded through preset instance objects, wherein the updated values are changes of data items in the data stream.
Optionally, the performing view analysis on the document template in the standard frame to obtain a document view includes:
converting the document template into an abstract syntax tree by using a template analyzer, and creating a view node in the abstract syntax tree;
identifying father nodes and root nodes of all elements in the document template, and establishing corresponding relation marks between the father nodes and the root nodes;
and leading the father node and the child nodes into the view nodes according to the identification to obtain the document view.
In order to solve the above problem, the present invention also provides an electronic device, including:
a memory storing at least one instruction; and
a processor executing instructions stored in the memory to implement any of the componentization-based front-end development methods described above.
In order to solve the above problem, the present invention further provides a computer-readable storage medium, in which at least one instruction is stored, and the at least one instruction is executed by a processor in an electronic device to implement the method for front-end development based on componentization according to any one of the above.
According to the embodiment of the invention, the standard frame is generated by acquiring the frame of the front-end component and preprocessing the frame, so that the universality of the generated standard frame and the high availability of all the front-end components are ensured; receiving a data stream input by a user, monitoring the data stream by using the standard framework to obtain data item changes in the data stream, generating a monitoring data set, and monitoring data changes to realize the function that a front-end component can automatically subscribe data change items; the document template in the standard frame is subjected to view analysis to obtain a document view, and the change state of a subsequent user data stream can be clearly displayed, so that the maintainability of a front-end component is efficiently realized; and finally, binding the data and the view of the front-end page according to the monitoring data set and the document view, and establishing an association relation between the view and the data, wherein once the data is changed, the view is immediately updated, so that the efficiency of front-end development based on componentization is improved, and the development cost of a front-end component is reduced.
Drawings
Fig. 1 is a schematic flowchart of a front-end development method based on componentization according to an embodiment of the present invention;
fig. 2 is a block diagram of a front-end development device based on componentization according to an embodiment of the present invention;
fig. 3 is a schematic internal structural diagram of an electronic device implementing a componentization-based front-end development method according to an embodiment of the present invention;
the implementation, functional features and advantages of the objects of the present invention will be further explained with reference to the accompanying drawings.
Detailed Description
It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
The invention provides a front-end development method based on modularization. Fig. 1 is a schematic flow chart of a front-end development method based on componentization according to an embodiment of the present invention. The method may be performed by an apparatus, which may be implemented by software and/or hardware.
In this embodiment, the method for front-end development based on componentization includes:
s1, obtaining a frame of the front-end component, performing semantic declaration on the frame, packaging the frame after the semantic declaration, and performing label creation on the packaged frame to obtain a standard frame.
Preferably, the framework of the front-end component according to the embodiment of the present invention may be Web Components, which is a new standard front-end component framework defined by W3C, and provides the front-end developer with the capability of extending browser tags, so that the front-end component can be freely customized, the modular development of the front-end component can be better performed, and the productivity of the front-end developer is completely liberated. The Web Components include: the system comprises a template element module, an HTML Import module, a Shadow DOM module, a custom element module and a decorator module.
Further, the semantic declaring of the frame refers to the semantic specification of the frame, i.e. strictly performed according to the W3C standard. The semantic specification is used for standardizing a front-end developer to enable the front-end developer to realize the function of a front-end page with a correct label, and is used for enabling the content of the front-end page to be more structured to facilitate a browser to analyze a search engine.
Further, the encapsulating the semantic declared framework encapsulates tags of template element modules in Web Components, where the tags of the template element modules include: head tags, body tags, div tags, and the like. Preferably, the embodiment of the invention realizes the label encapsulation of the template element module through the JavaScript script code, and reduces the label obtaining time of each component at the subsequent front end based on the label encapsulation of the template element module.
Further, the embodiment of the present invention creates a label for the frame to be packaged based on different user requirements. For example, for a front-end search bar component, labels that may be created include: href tag, frame tag, and a tag, etc. Preferably, the embodiment of the present invention creates the label through a sublime code compiler, so as to obtain the standard framework.
According to the embodiment of the invention, the semantic specification is carried out on the framework with front-end group pricing by adopting the standard of W3C, so that the universality of the standard framework and the high availability of all front-end components are ensured.
S2, receiving a data stream input by a user, monitoring the data stream by using the standard framework, obtaining the data item change in the data stream, and generating a monitoring data set. It is emphasized that the snoop data sets may also be stored in nodes of a block chain in order to further ensure privacy and security of the snoop data sets.
In this embodiment of the present invention, the data stream input by the user includes a point data type and a range data type, for example, the range data type may be: a, inputting a book list in a front-end retrieval page by a user, and B, inputting a commodity list in the front-end retrieval page by the user; the point data types may be: the book list in the user retrieval front-end page of the A user can be history books, travel books, cooking books and the like, so the invention monitors the data stream by using the standard framework, obtains the data item change in the data stream and generates the monitoring data set so as to realize the accurate positioning of the user requirement and realize the quick response of the user requirement by using the standard front-end framework.
In detail, the listening to the data stream using the standard framework includes:
acquiring the data stream through a vm.initdate method of the HTML inport module, traversing key fields of the data stream, calling an object.defineProperty method to identify attributes of the key fields, and recording updated values of the attributes by using an object instance object, wherein the updated values are changes of data items in the data stream, so that the monitoring data set is generated according to the changes of the data items.
In the above embodiment, by monitoring the change of the data, the function that the front-end component can automatically subscribe the data change item is realized.
And S3, carrying out view analysis on the document template in the standard frame to obtain a document view.
In the preferred embodiment of the present invention, the document template refers to a standard document object element-based scheme template. Before the document template is subjected to view parsing, in the embodiment of the present invention, the picture of the front-end page is not loaded, the audio is not played, meanwhile, the document template may be placed at any position of the front-end code, such as head, body or framset, and the document template can safely appear at a position where the HTML parser does not allow to appear, and can serve as a child node of any content model.
Preferably, the performing view analysis on the document template in the standard framework according to the embodiment of the present invention includes:
the document template is converted into an Abstract Syntax Tree (AST) by using a parser, view nodes are created in the Abstract Syntax Tree, father nodes and root nodes of all elements in the document template are identified by using a hook function start, identifiers of corresponding relations between the father nodes and the root nodes are established, and the father nodes and the child nodes are led into the view nodes according to the identifiers, so that the document view is obtained.
Wherein the AST refers to an abstract representation of a source code syntax structure, and the template parser comprises: an HTML parser, a text parser, and a filter parser.
Based on the above implementation, the embodiment of the present invention parses the document template of the standard framework into the document view, so as to clearly show the change state of the subsequent user data stream, and efficiently implement the maintainability of the front-end component.
And S4, executing binding processing of the data and the view of the front-end page according to the monitoring data set and the document view.
In at least one embodiment of the present invention, the monitored data set and the document view are integrated through a watch monitoring mechanism, that is, the corresponding monitored data set is subscribed through the document view to obtain an integration result, and the data and view binding of the front-end page is realized according to the integration result.
In detail, the performing, according to the integration result, the data and view binding of the front-end page includes:
if the data in the monitoring data set changes, updating of the document view is automatically triggered, and if the data in the monitoring data set does not change, the document view does not change.
Based on the above embodiment, the view and the data are associated, and once the data changes, the view is updated immediately, so that the efficiency of front-end development based on componentization is improved.
Fig. 2 is a functional block diagram of a front-end development apparatus based on componentization according to the present invention.
The front-end development device 100 based on modularization can be installed in electronic equipment. According to the realized functions, the front-end development device based on componentization can comprise a preprocessing module 101, a monitoring module 102, a resolving module 103 and an executing module 104. A module according to the present invention, which may also be referred to as a unit, refers to a series of computer program segments that can be executed by a processor of an electronic device and that can perform a fixed function, and that are stored in a memory of the electronic device.
In the present embodiment, the functions regarding the respective modules/units are as follows:
the preprocessing module 101 is configured to obtain a frame of a front-end component, perform semantic declaration on the frame, encapsulate the frame after the semantic declaration, and create a label for the encapsulated frame to obtain a standard frame;
the monitoring module 102 is configured to receive a data stream input by a user, monitor the data stream by using the standard framework, obtain a data item change in the data stream, and generate monitoring data;
the analysis module 103 is configured to perform view analysis on the document template in the standard frame to obtain a document view;
the execution module 104 is configured to execute a binding process of the data and the view of the front-end page according to the monitored data set and the document view.
In detail, the specific implementation steps of each module of the front-end development device based on componentization are as follows:
the preprocessing module 101 obtains a frame of a front-end component, makes a semantic declaration on the frame, encapsulates the frame after the semantic declaration, and creates a label on the encapsulated frame to obtain a standard frame.
Preferably, the framework of the front-end component according to the embodiment of the present invention may be Web Components, which is a new standard front-end component framework defined by W3C, and provides the front-end developer with the capability of extending browser tags, so that the front-end component can be freely customized, the modular development of the front-end component can be better performed, and the productivity of the front-end developer is completely liberated. The Web Components include: the system comprises a template element module, an HTML Import module, a Shadow DOM module, a custom element module and a decorator module.
Further, the semantic declaring of the frame refers to the semantic specification of the frame, i.e. strictly performed according to the W3C standard. The semantic specification is used for standardizing a front-end developer to enable the front-end developer to realize the function of a front-end page with a correct label, and is used for enabling the content of the front-end page to be more structured to facilitate a browser to analyze a search engine.
Further, the encapsulating the semantic declared framework encapsulates tags of template element modules in Web Components, where the tags of the template element modules include: head tags, body tags, div tags, and the like. Preferably, the embodiment of the invention realizes the label encapsulation of the template element module through the JavaScript script code, and reduces the label obtaining time of each component at the subsequent front end based on the label encapsulation of the template element module.
Further, the embodiment of the present invention creates a label for the frame to be packaged based on different user requirements. For example, for a front-end search bar component, labels that may be created include: href tag, frame tag, and a tag, etc. Preferably, the embodiment of the present invention creates the label through a sublime code compiler, so as to obtain the standard framework.
According to the embodiment of the invention, the semantic specification is carried out on the framework with front-end group pricing by adopting the standard of W3C, so that the universality of the standard framework and the high availability of all front-end components are ensured.
The monitoring module 102 receives a data stream input by a user, monitors the data stream by using the standard framework, obtains a data item change in the data stream, and generates monitoring data.
In this embodiment of the present invention, the data stream input by the user includes a point data type and a range data type, for example, the range data type may be: a, inputting a book list in a front-end retrieval page by a user, and B, inputting a commodity list in the front-end retrieval page by the user; the point data types may be: the book list in the user retrieval front-end page of the A user can be history books, travel books, cooking books and the like, so the invention monitors the data stream by using the standard framework, obtains the data item change in the data stream and generates the monitoring data set so as to realize the accurate positioning of the user requirement and realize the quick response of the user requirement by using the standard front-end framework.
In detail, the listening to the data stream using the standard framework includes:
acquiring the data stream through a vm.initdate method of the HTML inport module, traversing key fields of the data stream, calling an object.defineProperty method to identify attributes of the key fields, and recording updated values of the attributes by using an object instance object, wherein the updated values are changes of data items in the data stream, so that the monitoring data set is generated according to the changes of the data items. It is emphasized that the snoop data sets may also be stored in nodes of a block chain in order to further ensure privacy and security of the snoop data sets.
In the above embodiment, by monitoring the change of the data, the function that the front-end component can automatically subscribe the data change item is realized.
The analysis module 103 performs view analysis on the document template in the standard frame to obtain a document view.
In the preferred embodiment of the present invention, the document template refers to a standard document object element-based scheme template. Before the document template is subjected to view parsing, in the embodiment of the present invention, the picture of the front-end page is not loaded, the audio is not played, meanwhile, the document template may be placed at any position of the front-end code, such as head, body or framset, and the document template can safely appear at a position where the HTML parser does not allow to appear, and can serve as a child node of any content model.
Preferably, the performing view analysis on the document template in the standard framework according to the embodiment of the present invention includes:
the document template is converted into an Abstract Syntax Tree (AST) by using a parser, view nodes are created in the Abstract Syntax Tree, father nodes and root nodes of all elements in the document template are identified by using a hook function start, identifiers of corresponding relations between the father nodes and the root nodes are established, and the father nodes and the child nodes are led into the view nodes according to the identifiers, so that the document view is obtained.
Wherein the AST refers to an abstract representation of a source code syntax structure, and the template parser comprises: an HTML parser, a text parser, and a filter parser.
Based on the above implementation, the embodiment of the present invention parses the document template of the standard framework into the document view, so as to clearly show the change state of the subsequent user data stream, and efficiently implement the maintainability of the front-end component.
The execution module 104 executes binding processing of data and view of a front-end page according to the monitoring data set and the document view.
In at least one embodiment of the present invention, the monitored data set and the document view are integrated through a watch monitoring mechanism, that is, the corresponding monitored data set is subscribed through the document view to obtain an integration result, and the data and view binding of the front-end page is realized according to the integration result.
In detail, the performing, according to the integration result, the data and view binding of the front-end page includes:
if the data in the monitoring data set changes, updating of the document view is automatically triggered, and if the data in the monitoring data set does not change, the document view does not change.
Based on the above embodiment, the view and the data are associated, and once the data changes, the view is updated immediately, so that the efficiency of front-end development based on componentization is improved.
Fig. 3 is a schematic structural diagram of an electronic device implementing the method based on modular front-end development according to the present invention.
The electronic device 1 may comprise a processor 10, a memory 11 and a bus, and may further comprise a computer program, such as a componentized front-end development-based program 12, stored in the memory 11 and executable on the processor 10.
The memory 11 includes at least one type of readable storage medium, which includes flash memory, removable hard disk, multimedia card, card-type memory (e.g., SD or DX memory, etc.), magnetic memory, magnetic disk, optical disk, etc. The memory 11 may in some embodiments be an internal storage unit of the electronic device 1, such as a removable hard disk of the electronic device 1. The memory 11 may also be an external storage device of the electronic device 1 in other embodiments, such as a plug-in mobile hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like, which are provided on the electronic device 1. Further, the memory 11 may also include both an internal storage unit and an external storage device of the electronic device 1. The memory 11 may be used not only to store application software installed in the electronic device 1 and various types of data, such as codes based on a componentized front-end development program, but also to temporarily store data that has been output or is to be output.
The processor 10 may be composed of an integrated circuit in some embodiments, for example, a single packaged integrated circuit, or may be composed of a plurality of integrated circuits packaged with the same or different functions, including one or more Central Processing Units (CPUs), microprocessors, digital Processing chips, graphics processors, and combinations of various control chips. The processor 10 is a Control Unit (Control Unit) of the electronic device, connects various components of the electronic device by using various interfaces and lines, and executes various functions and processes data of the electronic device 1 by running or executing programs or modules (e.g., component-based front-end development programs, etc.) stored in the memory 11 and calling data stored in the memory 11.
The bus may be a Peripheral Component Interconnect (PCI) bus, an Extended Industry Standard Architecture (EISA) bus, or the like. The bus may be divided into an address bus, a data bus, a control bus, etc. The bus is arranged to enable connection communication between the memory 11 and at least one processor 10 or the like.
Fig. 3 shows only an electronic device with components, and it will be understood by those skilled in the art that the structure shown in fig. 3 does not constitute a limitation of the electronic device 1, and may comprise fewer or more components than those shown, or some components may be combined, or a different arrangement of components.
For example, although not shown, the electronic device 1 may further include a power supply (such as a battery) for supplying power to each component, and preferably, the power supply may be logically connected to the at least one processor 10 through a power management device, so as to implement functions of charge management, discharge management, power consumption management, and the like through the power management device. The power supply may also include any component of one or more dc or ac power sources, recharging devices, power failure detection circuitry, power converters or inverters, power status indicators, and the like. The electronic device 1 may further include various sensors, a bluetooth module, a Wi-Fi module, and the like, which are not described herein again.
Further, the electronic device 1 may further include a network interface, and optionally, the network interface may include a wired interface and/or a wireless interface (such as a WI-FI interface, a bluetooth interface, etc.), which are generally used for establishing a communication connection between the electronic device 1 and other electronic devices.
Optionally, the electronic device 1 may further comprise a user interface, which may be a Display (Display), an input unit (such as a Keyboard), and optionally a standard wired interface, a wireless interface. Alternatively, in some embodiments, the display may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, an OLED (Organic Light-Emitting Diode) touch device, or the like. The display, which may also be referred to as a display screen or display unit, is suitable for displaying information processed in the electronic device 1 and for displaying a visualized user interface, among other things.
It is to be understood that the described embodiments are for purposes of illustration only and that the scope of the appended claims is not limited to such structures.
The front-end development program 12 based on componentization stored in the memory 11 of the electronic device 1 is a combination of a plurality of instructions, which when executed in the processor 10, can realize:
acquiring a frame of a front-end component, performing semantic declaration on the frame, packaging the frame after the semantic declaration, and performing label creation on the packaged frame to obtain a standard frame;
receiving a data stream input by a user, monitoring the data stream by using the standard frame to obtain data item changes in the data stream, and generating a monitoring data set;
carrying out view analysis on the document template in the standard frame to obtain a document view;
and executing binding processing of the data and the view of the front-end page according to the monitoring data set and the document view.
Specifically, the specific implementation method of the processor 10 for the instruction may refer to the description of the relevant steps in the embodiment corresponding to fig. 1, which is not described herein again.
The block chain is a novel application mode of computer technologies such as distributed data storage, point-to-point transmission, a consensus mechanism, an encryption algorithm and the like. A block chain (Blockchain), which is essentially a decentralized database, is a series of data blocks associated by using a cryptographic method, and each data block contains information of a batch of network transactions, so as to verify the validity (anti-counterfeiting) of the information and generate a next block. The blockchain may include a blockchain underlying platform, a platform product service layer, an application service layer, and the like.
Further, the integrated modules/units of the electronic device 1, if implemented in the form of software functional units and sold or used as separate products, may be stored in a computer readable storage medium. The computer-readable medium may include: any entity or device capable of carrying said computer program code, recording medium, U-disk, removable hard disk, magnetic disk, optical disk, computer Memory, Read-Only Memory (ROM).
In the embodiments provided in the present invention, it should be understood that the disclosed apparatus, device and method can be implemented in other ways. For example, the above-described apparatus embodiments are merely illustrative, and for example, the division of the modules is only one logical functional division, and other divisions may be realized in practice.
The modules described as separate parts may or may not be physically separate, and parts displayed as modules 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 modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment.
In addition, functional modules in the embodiments of the present invention 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 integrated unit can be realized in a form of hardware, or in a form of hardware plus a software functional module.
It will be evident to those skilled in the art that the invention is not limited to the details of the foregoing illustrative embodiments, and that the present invention may be embodied in other specific forms without departing from the spirit or essential attributes thereof.
The present embodiments are therefore to be considered in all respects as illustrative and not restrictive, the scope of the invention being indicated by the appended claims rather than by the foregoing description, and all changes which come within the meaning and range of equivalency of the claims are therefore intended to be embraced therein. Any reference signs in the claims shall not be construed as limiting the claim concerned.
Furthermore, it is obvious that the word "comprising" does not exclude other elements or steps, and the singular does not exclude the plural. A plurality of units or means recited in the system claims may also be implemented by one unit or means in software or hardware. The terms second, etc. are used to denote names, but not any particular order.
Finally, it should be noted that the above embodiments are only for illustrating the technical solutions of the present invention and not for limiting, and although the present invention is described in detail with reference to the preferred embodiments, it should be understood by those skilled in the art that modifications or equivalent substitutions may be made on the technical solutions of the present invention without departing from the spirit and scope of the technical solutions of the present invention.
Claims (10)
1. A componentization-based front-end development method, the method comprising:
acquiring a frame of a front-end component, performing semantic declaration on the frame, packaging the frame after the semantic declaration, and performing label creation on the packaged frame to obtain a standard frame;
receiving a data stream input by a user, monitoring the data stream by using the standard frame to obtain data item changes in the data stream, and generating a monitoring data set;
carrying out view analysis on the document template in the standard frame to obtain a document view;
and executing binding processing of the data and the view of the front-end page according to the monitoring data set and the document view.
2. The componentization-based front-end development method of claim 1, wherein the listening to the data stream using the standard framework for data item changes in the data stream comprises:
the data stream is obtained through a preset method, key fields of the data stream are traversed, attributes of the key fields are identified, and updated values of the attributes are recorded through preset instance objects, wherein the updated values are changes of data items in the data stream.
3. The componentization-based front-end development method of claim 1, wherein the view parsing of the document template in the standard framework to obtain a document view comprises:
converting the document template into an abstract syntax tree by using a template analyzer, and creating a view node in the abstract syntax tree;
identifying father nodes and root nodes of all elements in the document template, and establishing corresponding relation marks between the father nodes and the root nodes;
and leading the father node and the child nodes into the view nodes according to the identification to obtain the document view.
4. The componentization-based front-end development method of claim 3, wherein the template parser comprises: an HTML parser, a text parser, and a filter parser.
5. The componentization-based front-end development method according to any one of claims 1 to 4, wherein the listening data set is stored in a blockchain, and the executing of the binding process of the data and the view of the front-end page according to the listening data set and the document view comprises:
if the data in the monitoring data set changes, updating of the document view is automatically triggered, and if the data in the monitoring data set does not change, the document view does not change.
6. An apparatus for componentization-based front-end development, the apparatus comprising:
the preprocessing module is used for acquiring a frame of a front-end component, performing semantic declaration on the frame, packaging the frame after the semantic declaration, and performing label creation on the packaged frame to obtain a standard frame;
the monitoring module is used for receiving a data stream input by a user, monitoring the data stream by using the standard frame to obtain data item changes in the data stream and generate monitoring data;
the analysis module is used for carrying out view analysis on the document template in the standard frame to obtain a document view;
and the execution module is used for executing the binding processing of the data and the view of the front-end page according to the monitoring data set and the document view.
7. The componentization-based front-end development apparatus of claim 6, wherein the listening to the data stream using the standard framework for data item changes in the data stream comprises:
the data stream is obtained through a preset method, key fields of the data stream are traversed, attributes of the key fields are identified, and updated values of the attributes are recorded through preset instance objects, wherein the updated values are changes of data items in the data stream.
8. The componentization-based front-end development apparatus of claim 6, wherein view parsing the document template in the standard framework to obtain a document view comprises:
converting the document template into an abstract syntax tree by using a template analyzer, and creating a view node in the abstract syntax tree;
identifying father nodes and root nodes of all elements in the document template, and establishing corresponding relation marks between the father nodes and the root nodes;
and leading the father node and the child nodes into the view nodes according to the identification to obtain the document view.
9. An electronic device, characterized in that the electronic device comprises:
at least one processor; and the number of the first and second groups,
a memory communicatively coupled to the at least one processor; wherein the content of the first and second substances,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the componentized front-end development method of any of claims 1 to 5.
10. A computer-readable storage medium, storing a computer program, wherein the computer program, when executed by a processor, implements the componentization-based front-end development method of any of claims 1 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010361300.8A CN111625236A (en) | 2020-04-30 | 2020-04-30 | Front-end development method and device based on componentization, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010361300.8A CN111625236A (en) | 2020-04-30 | 2020-04-30 | Front-end development method and device based on componentization, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111625236A true CN111625236A (en) | 2020-09-04 |
Family
ID=72258886
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010361300.8A Pending CN111625236A (en) | 2020-04-30 | 2020-04-30 | Front-end development method and device based on componentization, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111625236A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113296758A (en) * | 2021-03-15 | 2021-08-24 | 上海爱数信息技术股份有限公司 | Front-end component library construction method and device and storage medium |
| CN115658046A (en) * | 2022-12-13 | 2023-01-31 | 中国人民解放军国防科技大学 | Method and device for developing modularized UI (user interface) interaction component based on Web technology |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107885497A (en) * | 2017-11-08 | 2018-04-06 | 北京锐安科技有限公司 | A kind of webpage front-end method for exhibiting data and device based on form framework |
| CN108052365A (en) * | 2017-12-19 | 2018-05-18 | 深圳市四格互联信息技术有限公司 | The component generation method and device of user interface |
| CN108874389A (en) * | 2018-06-27 | 2018-11-23 | 中国建设银行股份有限公司 | front end page development framework |
| US20190130047A1 (en) * | 2017-10-31 | 2019-05-02 | Microsoft Technology Licensing, Llc | Centralized client-side component for retrieving remote content items |
-
2020
- 2020-04-30 CN CN202010361300.8A patent/CN111625236A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20190130047A1 (en) * | 2017-10-31 | 2019-05-02 | Microsoft Technology Licensing, Llc | Centralized client-side component for retrieving remote content items |
| CN107885497A (en) * | 2017-11-08 | 2018-04-06 | 北京锐安科技有限公司 | A kind of webpage front-end method for exhibiting data and device based on form framework |
| CN108052365A (en) * | 2017-12-19 | 2018-05-18 | 深圳市四格互联信息技术有限公司 | The component generation method and device of user interface |
| CN108874389A (en) * | 2018-06-27 | 2018-11-23 | 中国建设银行股份有限公司 | front end page development framework |
Non-Patent Citations (1)
| Title |
|---|
| 黄江宁;: "基于Web components标准的前端工程组件化的改进研究", 电子技术与软件工程, no. 22, 23 November 2016 (2016-11-23), pages 26 - 27 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113296758A (en) * | 2021-03-15 | 2021-08-24 | 上海爱数信息技术股份有限公司 | Front-end component library construction method and device and storage medium |
| CN115658046A (en) * | 2022-12-13 | 2023-01-31 | 中国人民解放军国防科技大学 | Method and device for developing modularized UI (user interface) interaction component based on Web technology |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111428451B (en) | Text online editing method and device, electronic equipment and storage medium | |
| CN115048111B (en) | Code generation method, device, equipment and medium based on metadata | |
| CN113918361A (en) | Terminal control method, device, equipment and medium based on Internet of things rule engine | |
| CN114020256A (en) | Front-end page generation method, device and equipment and readable storage medium | |
| CN111897856A (en) | Supervision message generation method and device, electronic equipment and readable storage medium | |
| CN112486490A (en) | Front-end code packaging method and device, electronic equipment and storage medium | |
| CN111625236A (en) | Front-end development method and device based on componentization, electronic equipment and storage medium | |
| CN113158634A (en) | Batch data reporting method, device, equipment and computer readable storage medium | |
| CN114707474A (en) | Report generation method and device, electronic equipment and computer readable storage medium | |
| CN115202639A (en) | Code generation method, device, equipment and storage medium based on custom module | |
| CN114169303A (en) | Method, device, equipment and medium for editing table based on vue.js | |
| CN113886204A (en) | User behavior data collection method and device, electronic equipment and readable storage medium | |
| CN114816371B (en) | Message processing method, device, equipment and medium | |
| CN115129753A (en) | Data blood relationship analysis method and device, electronic equipment and storage medium | |
| CN115033489A (en) | Code resource detection method and device, electronic equipment and storage medium | |
| CN113687827A (en) | Data list generation method, device and equipment based on widget and storage medium | |
| CN112527443A (en) | Prompt box display method and device, electronic equipment and computer readable storage medium | |
| CN114185522A (en) | Page theme customizing method and device, electronic equipment and storage medium | |
| CN111859452A (en) | Page information checking method, device and equipment and computer readable storage medium | |
| CN113065086A (en) | Webpage text extraction method and device, electronic equipment and storage medium | |
| CN113485711A (en) | Task triggering method and device based on dependency relationship, electronic equipment and medium | |
| CN113051171A (en) | Interface test method, device, equipment and storage medium | |
| CN111680204A (en) | Data acquisition method, data acquisition device and computer readable storage medium | |
| CN112667244A (en) | Data verification method and device, electronic equipment and computer readable storage medium | |
| CN111400190A (en) | Automatic test flow generation method and device and computer readable storage medium |
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 |