CN113220295A - Method, system and computer readable storage medium for dynamic expansion of front end component - Google Patents
Method, system and computer readable storage medium for dynamic expansion of front end component Download PDFInfo
- Publication number
- CN113220295A CN113220295A CN202110464243.0A CN202110464243A CN113220295A CN 113220295 A CN113220295 A CN 113220295A CN 202110464243 A CN202110464243 A CN 202110464243A CN 113220295 A CN113220295 A CN 113220295A
- Authority
- CN
- China
- Prior art keywords
- component
- page
- components
- loading
- source code
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 38
- 238000009877 rendering Methods 0.000 claims abstract description 14
- 238000004806 packaging method and process Methods 0.000 claims abstract description 10
- 230000000694 effects Effects 0.000 claims description 12
- 238000004590 computer program Methods 0.000 claims description 3
- 238000012856 packing Methods 0.000 claims description 2
- 238000011161 development Methods 0.000 abstract description 8
- 238000010586 diagram Methods 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 238000004519 manufacturing process Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 230000000712 assembly Effects 0.000 description 1
- 238000000429 assembly Methods 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000012858 packaging process Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 230000001360 synchronised effect Effects 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/44—Encoding
Abstract
The invention belongs to the field of software technology development, and discloses a method and a system for dynamically expanding a front-end component, wherein the method comprises the following steps: packaging the source codes of the compiled components and uploading the source codes to a component library for storage; selecting corresponding components from a component library according to the created page, and configuring component parameters; analyzing a page loading request initiated by a client station to acquire a component type and a component source code required by the page loading; meanwhile, according to the layout of the front-end page, required components are loaded to the corresponding area to present the rendering content. According to the method and the system for dynamically expanding the front-end component, the front-end component is independently packaged and developed, the components and the expansion components can be flexibly switched in a project, the loading performance of large single-page application can be improved under a configured scene, the page loading efficiency is accelerated, and the user experience is greatly improved.
Description
Technical Field
The invention belongs to the field of software technology development, and particularly relates to a method and a system for dynamic expansion of a front-end component.
Background
The existing single-page applications are generated by directly packaging the front end after development, the page codes and attributes of the single-page applications are fixed after deployment, and expansion cannot be flexibly realized according to service change, especially in a configuration report project, the content cannot be quickly expanded due to the fact that the content is fixed in the form, and a third party cannot add expansion components and content.
Therefore, how to improve the extensibility and loading efficiency of the page in the front-end page is a problem that needs to be solved urgently at present.
Disclosure of Invention
In view of the above-mentioned drawbacks in the prior art, an object of the present invention is to provide a method and a system for dynamically expanding a front-end component, which can implement flexible switching between components and expansion components in a project by independently packaging and developing the front-end component, and can further improve the loading performance of a large-scale single-page application, accelerate page loading efficiency, and improve user experience in a configured scenario.
In a first aspect of the present invention, a method for dynamic extension of a front-end component is provided, where the method includes:
packaging the source codes of the compiled components and uploading the source codes to a component library for storage;
selecting corresponding components from a component library according to the created page, and configuring component parameters;
analyzing a page loading request initiated by a client station to acquire a component type and a component source code required by the page loading; meanwhile, according to the layout of the front-end page, required components are loaded to the corresponding area to present the rendering content.
Furthermore, the resource data of the front-end page application program is divided into blocks, and the component source codes corresponding to different components are loaded on the resource data of each block respectively.
Further, a component loading module is built in the front-end page, and the component loading module acquires component resources from a server according to the configured components, loads the component resources into the front-end page, and runs the component.
Further, the component loading module is based on a UMD modular design.
Further, the components loaded by the component loading module comprise page built-in components and/or custom components.
Further, the configuration process of the component includes: creating a page and performing layout configuration of the page; selecting corresponding components according to the page layout; configuring the attribute parameters and the effect parameters of the components, and saving the page configuration.
Furthermore, after the source code of the compiled component is packaged, the source code is uploaded to the component library after being compressed and obfuscated.
In another aspect of the present invention, a system for dynamic expansion of a front-end component is provided, the system comprising:
the component creating module is used for packaging and compiling the source codes of the components and uploading the source codes to the component library for storage;
the component configuration module is used for selecting corresponding components from the component library according to the created page and configuring component parameters;
the component loading module is used for analyzing a page loading request initiated by a client station so as to acquire a component type and a component source code required by the page loading; meanwhile, according to the layout of the front-end page, required components are loaded to the corresponding area to present the rendering content.
Further, the component loading module comprises a built-in page component and/or a custom component.
The third invention of the present invention further provides a computer-readable storage medium, on which a computer program is stored, wherein the computer program, when executed by a processor, implements the operation steps of the method of any one of the preceding first aspects.
Compared with the prior art, the method, the system and the computer readable storage medium for the dynamic expansion of the front-end component provided by the invention achieve the following technical effects:
1. the invention independently packs and develops the front-end components, can flexibly switch the components in a project, expands the components in real time, can replace different components to load and render in a page through configuration, can realize independent development and release of the components to the original application, expands the front-end code logic to the maximum degree of freedom, and more quickly meets the change requirement of the service.
2. According to the invention, each component is independently loaded, so that the parallel capability can be improved, the page loading efficiency can be improved, the calculation performance consumption of the client can be saved, and the loading time of the client can be shortened.
3. The assembly is an encapsulated independent assembly, and the assembly can be moved and replaced, is convenient to use and has higher convenience.
4. After the component expansion and the website configuration are changed, the page attribute can be immediately effective, and the updated page content is displayed.
5. The method can be reused for different front-end page development projects, is suitable for front-end sites of all single-page applications, can be supported by a cross-frame, is not limited by the existing front-end frame, and improves user experience in a configured page scene.
Drawings
Fig. 1 is a flow chart of a method for dynamic expansion of a front-end component in an embodiment of the invention.
FIG. 2 is a flow diagram illustrating component loading in an embodiment of the invention.
Fig. 3 is a schematic structural diagram of a system for dynamic expansion of a front-end component in an embodiment of the present invention.
Detailed Description
Reference will now be made in detail to embodiments of the present invention, examples of which are illustrated in the accompanying drawings. Wherein the embodiments described below with reference to the drawings are illustrative and intended to be illustrative of the present invention and are not to be construed as limiting the present invention.
Fig. 1 is a flow diagram of a method for dynamic expansion of a front-end component according to an embodiment of the invention.
Referring to fig. 1, a method for dynamic expansion of a front-end component includes the steps of:
s1, packaging the source code of the compiling component and uploading the source code to a component library for storage;
in step S1, the creation of a component is performed, which specifically includes the following processes:
and S11, creating different assemblies in a scaffold mode according to the assembly development template.
And step S12, locally developing and debugging the effect of each component, and after the debugging is finished and passed, performing the following packaging process.
And step S13, packing the source code of the compiled component, and compressing and obfuscating the source code to improve the transmission performance of the component code.
And step S14, submitting the uploaded and packaged components to a component library for storage, wherein the components stored in the component library comprise a plurality of components 1-n and wait for calling. The packaging is an independent component, so that various single-page applications can be accessed conveniently, the use is convenient, and the production is put into production.
And step S2, selecting corresponding components from the component library according to the created page, and configuring component parameters.
In step S2, component configuration is performed, which specifically includes the following processes:
step S21, when the configuration process starts, a page is created;
step S22, performing layout configuration of the page, including configuring data such as the position of the component area in the page, the size of each component area, the shape of the component area and the like, and selecting a corresponding component from the component library to the area corresponding to the page after the layout configuration of the page is completed; the page layout can be customized and dynamically adjusted, and different effects can be flexibly and variously presented.
Step S23, configuring an attribute field of the component and an effect field of a page of the component, wherein the attribute field of the component mainly refers to parameters of the component, including width, height, color, style attributes and the like, the page effect field of the component mainly refers to effect data rendered by the page, different components can be rendered into the page by configuring and modifying the attribute field of the component and related parameters of the page effect field, so that different rendering effects can be displayed, the component can be replaced in a pluggable mode in real time, and efficient expansion capability is realized for front-end application of the configured page.
And step S24, saving the configuration of the current page assembly, storing relevant data in real time, and ending the assembly configuration process.
And storing the configuration data of the current page component, including the attribute field, the page effect field and other data of the component into a component library.
Step S3, analyzing the page loading request initiated by the client site to obtain the component type and the component source code required by the page loading; meanwhile, according to the layout of the front-end page, required components are loaded to the corresponding area to present the rendering content.
In step S3, the loading and rendering of the component are performed, which specifically includes the following processes:
step S31, the client site initiates a page loading request, parses the component conditions required by the page according to the page loading request, including the component type, the component size, and other component configuration data, and obtains a component source code.
And step S32, loading the components to the corresponding areas according to the page layout to present the content.
In the component loading process, a component loading module is arranged in a front-end page, the component loading module acquires component resources from a server according to components configured in a page area and loads and runs the component resources into the page, wherein the components are independent js files constructed by using a construction tool, and umd introduction modes are supported. Based on umd modular loading technology, components can be loaded into pages after they are fetched from a server. CommonJS is a synchronous loading module and is mainly used at a server; AMD is an asynchronous loading module, mainly used for browser side. The umd (universal Module definition) specification is similar to syntax compatible with common js and AMD, and is equivalent to a combination of AMD and common js (service end modular specification), so that the Module can be called by both the AMD syntax and the common syntax, and the universality is high.
The front-end modules are executed in the client, so that the modules need to be loaded into a browser page in an incremental mode, and two modes are commonly used at present for loading and transmitting the modules, wherein one mode is that each module file is requested independently, and the other mode is that all the modules are packaged into a file and then requested only once. Obviously, each module initiates a separate request, which results in excessive request times and slow application starting speed; and requesting to load all modules at once results in wasted traffic and slow initialization process. Both of these approaches are not good solutions, and the present invention uses block transmission to perform loading as needed. In the front-end application program, the resource data of the front-end page application program is divided into blocks, and the component source codes corresponding to different components are loaded on the resource data of each block respectively, so that the modules are updated in an incremental mode only when some modules are actually used, and the modules are loaded as required. In addition, to simplify operations, the present invention defines components as factory functions defined by asynchronous parsing components, the pages trigger factory functions when a component needs to be rendered, and the results are cached for future re-rendering.
In the component loading level, the component loading module comprises a built-in component and two self-defined components, wherein codes of the built-in component are implanted into a project in the component development process, the built-in component is developed, debugged, packaged and released along with the project and runs in a seamless connection mode, the built-in component is mainly used for rendering a page basic framework and the component loading module, the self-defined component is the component capability expanded after the project is built, the development, debugging and releasing and running processes are still carried out, but the basic environment of the self-defined component has some changes and needs to be restrained by the current environment so as to be connected with the project, and the self-defined component can realize expansion loading and rendering through the component loading module and the page basic framework. By setting the user-defined component, the page component can be uploaded and expanded, the expansibility and diversity of the page are increased, and the change of the service can be met more quickly.
And step S33, after the internal processing code logic of the component finishes the data request and the rendering of the component, the page can be displayed.
According to the method for dynamically expanding the front-end component, different components can be replaced and rendered in the page through configuration, the page component can be independently loaded into the page, on one hand, the components can be flexibly replaced, dynamic expansion of the front-end component is achieved, code logic is flexibly expanded, and on the other hand, the parallel capability and the page loading performance can be improved.
Referring to fig. 3, another embodiment of the present application further provides a system for dynamic expansion of a front-end component, where the system includes:
the component creating module is used for packaging and compiling the source codes of the components and uploading the source codes to the component library for storage;
the component configuration module is used for selecting corresponding components from the component library according to the created page and configuring component parameters;
the component loading module is used for analyzing a page loading request initiated by a client station so as to acquire a component type and a component source code required by the page loading; meanwhile, according to the layout of the front-end page, required components are loaded to the corresponding area to present the rendering content. In addition, the component loading module can load built-in components and also can load custom components.
When the component is rendered, the component is rendered according to the default configuration, and then the rendering effect can be changed according to the modification of the configuration parameters. Specifically, the component loading module is built in the page, corresponding component resources are obtained from the server to the page to be reloaded and operated according to the configured components and based on the UMD modular loading technology, access is flexible, and loading efficiency can be improved.
The system for dynamically expanding the front-end component disclosed by the embodiment provides a pluggable component module for large single-page applications, and has efficient expansion capability for front-end applications of configured pages.
For the system in the embodiment of the present application, please refer to the method in the embodiment, which is not described herein.
In addition, an embodiment of the present application further provides a non-transitory computer-readable storage medium storing computer instructions, which cause the computer to execute the method for dynamically expanding a front-end component provided in the embodiment shown in fig. 1 to fig. 2 of the present application.
The non-transitory computer readable storage medium described above may take any combination of one or more computer readable media. The computer readable medium may be a computer readable signal medium or a computer readable storage medium. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples (a non-exhaustive list) of the computer readable storage medium would include the following: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a Read Only Memory (ROM), an Erasable Programmable Read Only Memory (EPROM), a flash Memory, an optical fiber, a portable compact disc Read Only Memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.
The foregoing description shows and describes several preferred embodiments of the invention, but as aforementioned, it is to be understood that the invention is not limited to the forms disclosed herein, but is not to be construed as excluding other embodiments and is capable of use in various other combinations, modifications, and environments and is capable of changes within the scope of the inventive concept as expressed herein, commensurate with the above teachings, or the skill or knowledge of the relevant art. And that modifications and variations may be effected by those skilled in the art without departing from the spirit and scope of the invention as defined by the appended claims.
Claims (10)
1. A method for dynamic expansion of a front-end component, the method comprising:
packaging the source codes of the compiled components and uploading the source codes to a component library for storage;
selecting corresponding components from a component library according to the created page, and configuring component parameters;
analyzing a page loading request initiated by a client station to acquire a component type and a component source code required by the page loading; meanwhile, according to the layout of the front-end page, required components are loaded to the corresponding area to present the rendering content.
2. The method according to claim 1, wherein the resource data of the front-end page application is divided into blocks, and the resource data of each block corresponds to the component source code required for loading different components.
3. The method for front-end component dynamic extension according to claim 2, wherein a component loading module is built in the front-end page, and the component loading module obtains corresponding component resources from a server to load and run in the front-end page according to different configured components.
4. The method according to claim 3, wherein the component loading module is designed based on UMD modularization.
5. The method for front-end component dynamic extension according to claim 4, wherein the components loaded by the component loading module include in-page components and/or custom components.
6. The method for front-end component dynamic expansion according to claim 1, wherein the configuration process of the component comprises:
creating a page and performing layout configuration of the page;
selecting corresponding components according to the page layout;
configuring the attribute parameters and the effect parameters of the components, and saving the current page configuration.
7. The method for front-end component dynamic extension according to claim 1, wherein after packing the source code of the compiled component, the source code is uploaded to the component library after being compressed and obfuscated.
8. A system for dynamic expansion of a front-end component, the system comprising:
the component creating module is used for packaging and compiling the source codes of the components and uploading the source codes to the component library for storage;
the component configuration module is used for selecting corresponding components from the component library according to the created page and configuring component parameters;
the component loading module is used for analyzing a page loading request initiated by a client station so as to acquire a component type and a component source code required by the page loading; meanwhile, according to the layout of the front-end page, required components are loaded to the corresponding area to present the rendering content.
9. The front-end component dynamic extension system of claim 8, wherein the component loading module comprises a built-in-page component and/or a custom component.
10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the operational steps of the method of one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110464243.0A CN113220295A (en) | 2021-04-26 | 2021-04-26 | Method, system and computer readable storage medium for dynamic expansion of front end component |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110464243.0A CN113220295A (en) | 2021-04-26 | 2021-04-26 | Method, system and computer readable storage medium for dynamic expansion of front end component |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113220295A true CN113220295A (en) | 2021-08-06 |
Family
ID=77089468
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110464243.0A Pending CN113220295A (en) | 2021-04-26 | 2021-04-26 | Method, system and computer readable storage medium for dynamic expansion of front end component |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113220295A (en) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113742615A (en) * | 2021-09-13 | 2021-12-03 | 国泰君安证券股份有限公司 | System, method and device for realizing dynamic data component application, processor and computer readable storage medium thereof |
| CN114003307A (en) * | 2021-10-28 | 2022-02-01 | 平安普惠企业管理有限公司 | Dynamic component loading registration method, device, equipment and medium based on UMD mode |
| CN114546534A (en) * | 2022-02-28 | 2022-05-27 | 百果园技术(新加坡)有限公司 | Application page starting method, device, equipment and medium |
| CN116578295A (en) * | 2023-05-04 | 2023-08-11 | 谷云科技(广州)有限责任公司 | Component dynamic expansion system based on micro-service architecture |
| CN116974527A (en) * | 2023-09-18 | 2023-10-31 | 浩鲸云计算科技股份有限公司 | Pluggable page expansion method and system based on low-code front-end component |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107577515A (en) * | 2017-10-10 | 2018-01-12 | 北京小度信息科技有限公司 | Extended method, device, electronic equipment and the storage medium of visualization component |
| CN111045655A (en) * | 2019-12-18 | 2020-04-21 | 广州市百果园信息技术有限公司 | Page rendering method and device, rendering server and storage medium |
| CN112130856A (en) * | 2020-09-29 | 2020-12-25 | 重庆紫光华山智安科技有限公司 | Method, system, medium and terminal for generating front-end visual interface with strong expansibility |
-
2021
- 2021-04-26 CN CN202110464243.0A patent/CN113220295A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107577515A (en) * | 2017-10-10 | 2018-01-12 | 北京小度信息科技有限公司 | Extended method, device, electronic equipment and the storage medium of visualization component |
| CN111045655A (en) * | 2019-12-18 | 2020-04-21 | 广州市百果园信息技术有限公司 | Page rendering method and device, rendering server and storage medium |
| CN112130856A (en) * | 2020-09-29 | 2020-12-25 | 重庆紫光华山智安科技有限公司 | Method, system, medium and terminal for generating front-end visual interface with strong expansibility |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113742615A (en) * | 2021-09-13 | 2021-12-03 | 国泰君安证券股份有限公司 | System, method and device for realizing dynamic data component application, processor and computer readable storage medium thereof |
| CN114003307A (en) * | 2021-10-28 | 2022-02-01 | 平安普惠企业管理有限公司 | Dynamic component loading registration method, device, equipment and medium based on UMD mode |
| CN114546534A (en) * | 2022-02-28 | 2022-05-27 | 百果园技术(新加坡)有限公司 | Application page starting method, device, equipment and medium |
| CN114546534B (en) * | 2022-02-28 | 2023-11-24 | 百果园技术(新加坡)有限公司 | Application page starting method, device, equipment and medium |
| CN116578295A (en) * | 2023-05-04 | 2023-08-11 | 谷云科技(广州)有限责任公司 | Component dynamic expansion system based on micro-service architecture |
| CN116578295B (en) * | 2023-05-04 | 2023-11-10 | 谷云科技(广州)有限责任公司 | Component dynamic expansion system based on micro-service architecture |
| CN116974527A (en) * | 2023-09-18 | 2023-10-31 | 浩鲸云计算科技股份有限公司 | Pluggable page expansion method and system based on low-code front-end component |
| CN116974527B (en) * | 2023-09-18 | 2023-12-15 | 浩鲸云计算科技股份有限公司 | Pluggable page expansion method and system based on low-code front-end component |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113220295A (en) | Method, system and computer readable storage medium for dynamic expansion of front end component | |
| US20210216700A1 (en) | Information Processing Method and System | |
| CN108345531B (en) | Test method, device and system | |
| EP2437524A1 (en) | M2m service platform and work method thereof | |
| CN109766099B (en) | Front-end source code compiling method and device, storage medium and computer equipment | |
| CN106155749B (en) | Monitoring plug-in extension method and device | |
| CN107479868B (en) | Interface loading method, device and equipment | |
| CN104954894A (en) | Video traffic guiding method and device as well as electronic equipment | |
| CN103488517A (en) | PHP code compiling method and device and PHP code running method and device | |
| CN106201562A (en) | A kind of page switching method and device | |
| CN112306503A (en) | Front-end resource packaging method and device, computer equipment and storage medium | |
| CN112631566A (en) | Code generation method and device, storage medium and electronic equipment | |
| CN109508193B (en) | Application deployment and operation method, device, terminal equipment and medium | |
| CN110012003B (en) | Cloud application screen capturing method and device | |
| CN107566519B (en) | Code operation method and device, server and server cluster | |
| CN116485995A (en) | Modeling method based on assembled building components, intelligent terminal and storage medium | |
| CN115292169A (en) | UI automation test method and system | |
| CN114090070A (en) | Application program installation package file processing method and electronic equipment | |
| CN103488527A (en) | PHP (hypertext preprocessor) API (application programing interface) calling method, related equipment and system | |
| CN110465093B (en) | Method and device for analyzing inclusion redundant resources based on Unity | |
| CN113656152A (en) | Local simulation method, system, medium and electronic device based on container cloud environment | |
| CN113805854A (en) | Method, system and device for realizing Hook of application layer based on Linux system and storage medium | |
| CN112925715A (en) | Application debugging method and device of mobile terminal | |
| CN105516295A (en) | Network request processing method and device | |
| CN112685494A (en) | Data visualization method, device, equipment and 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 |