CN110531983A - A kind of on-demand packaging method of front end page based on entry building - Google Patents
A kind of on-demand packaging method of front end page based on entry building Download PDFInfo
- Publication number
- CN110531983A CN110531983A CN201910728259.0A CN201910728259A CN110531983A CN 110531983 A CN110531983 A CN 110531983A CN 201910728259 A CN201910728259 A CN 201910728259A CN 110531983 A CN110531983 A CN 110531983A
- Authority
- CN
- China
- Prior art keywords
- component
- routing
- packaged
- sub
- 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.)
- Withdrawn
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/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/44—Encoding
- G06F8/447—Target code generation
-
- 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/71—Version control; Configuration management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Data Exchanges In Wide-Area Networks (AREA)
Abstract
The present invention relates to WEB development technique fields, and in particular to a kind of on-demand packaging method of front end page based on entry building.Method of the present invention is that the mark whether being packaged added in the corresponding module for being packaged entry file；The control being packaged on demand is carried out according to mark in the component that routing URL is directed toward, finally whether is shown according to the code module that mark content determination component is related to.The disparity items that the present invention may be implemented to share identical code module bodies is packaged different subfiles on demand；The front end page that can be used for entry building is packaged on demand.
Description
Technical field
The present invention relates to WEB development technique fields, and in particular to it is a kind of based on entry building front end page beat on demand
Packet method.
Background technique
Currently, front end page component packaging technique passes through entry file, tree-like retrospect dependent file, the dependence that will acquire
It is packaged together, transcode is exported.
Existing entry building application in, be easy to appear multiple projects share identical code module bodies while
The case where quoting different code module branch；Sub-component associated with entry file can be all packaged together at this time, so that turning
Translating the code directory come includes the relevant sub-component of institute.There is packings for the code structure scheme of aforementioned conventional entry building
As a result the problems such as exposure of code redundancy or non-project correlative code.For this reason, it may be necessary to propose that a kind of satisfaction shares identical code
The method that the disparity items of module bodies is packaged different subfiles on demand.
Summary of the invention
It is real the technical problem to be solved by the present invention is to provide a kind of on-demand packaging method of front end page based on entry building
The disparity items for now sharing identical code module bodies is packaged different subfiles on demand.
The technical solution that the present invention solves aforementioned technical problem is:
The method is that the mark whether being packaged added in the corresponding module for being packaged entry file；Route what URL was directed toward
The control being packaged on demand is carried out in component according to mark, finally whether is opened up according to the code module that mark content determination component is related to
Show.
Entry file, that is, the routing file, including routed path, routing title, routing metamessage, routing URL；Institute
The addition packing stated is identified as configuration routing metamessage.
The mark whether being packaged in the corresponding module addition for being packaged entry file comprises the concrete steps that:
Corresponding routing file is found, one Boolean type of addition in the routing metamessage of wherein respective modules is passed through
Parameter is set as true/false, in this, as whether being packaged the foundation of the module.
Carrying out the control being packaged on demand according to mark in the component that the routing URL is directed toward is that the page passes through road when being packaged
By configuration item as entrance, trace relevant sub-component from the component that every routing URL is directed toward, realize in packing process
Upon carries out judgement filtering in pointed assembly module.
The control specific steps being packaged on demand are carried out in the component that the routing URL is directed toward according to mark: defining one
Method for dynamic registration sub-component；According to mark content, judge whether associated component is registered；Then according to routing
The acquisition methods of metamessage object value obtain the configured ident value of institute and are judged, if result is true, are passed to registration
Required parameter is associated sub-component registration, and is defaulted as needing to be packaged.
When defining a method for being used for dynamic registration sub-component, carried out using the promise constructed fuction of es6 grammer different
Step executes processing, captures to abnormal.
When whether the code module being related to according to mark content determination component shows, associated sub-component is drawn
Enter in<template>, judges parameter $ route.meta.isPackageAaComponent to certainly by v-if in its outer layer
It is fixed whether to show association sub-component code；If value is true, then to its code module after successful registration sub-component Aa.vue
It is introduced；Otherwise, in outer layer label when v-if=false, default does not execute the sub-component code of internal layer.
The method is matched by carrying out difference to the metamessage of same routing module in the router.js of projects
It sets, realizes the control being packaged on demand.
The present invention is packaged control method using above-mentioned front end page on demand, to the metamessage of the same routing module of entry
Carry out difference configuration, realize the control being packaged on demand so that more set projects can be multiplexed same set of project core code and
Dynamic registers different correlator components.To realize reduced code in entry constructing environment, answering for code is improved
The property used.Meanwhile packing code can expose away on demand to avoid by the code of sundry item.
Detailed description of the invention
The following further describes the present invention with reference to the drawings:
Fig. 1 is flow chart of the present invention.
Fig. 2 is sub-component of the present invention according to the on-demand packing flow chart of mark.
Specific embodiment
It as shown in Figure 1, is the flow chart of the invention for being packaged control method on demand.It the described method comprises the following steps:
S10: the mark whether being packaged added in the corresponding module for being packaged entry file
It is packaged entry file, that is, routing file, including routed path, routing title, routing metamessage, routing URL etc. ginseng
Number.
In the present embodiment, addition, which is packaged, is identified as configuration routing metamessage；By obtaining its road in corresponding sub-component
The object value configured in metamessage parameter under, to know mark content.
Step is specifically:
Corresponding routing file is found, one Boolean type of addition in the routing metamessage of wherein respective modules is passed through
Parameter is set as true/false, in this, as whether being packaged the foundation of the module.
For example, routing metamessage parameter in Vue routing configuration item Vue-router is meta, ginseng is added in meta object
Number isPackageAaComponent:true；Indicate that the lower entitled Aa.vue sub-component mutually relied on of the routing is identified as really
Recognize packing.
The present invention is packaged the mark of control in the same routing module addition of projects routing entry file, can be improved
The reusability of body code avoids repeating to write body of code for different code branch, realizes the flexible calling of code branch,
It is final to carry out being packaged control on demand.
S20: the control being packaged on demand is carried out according to mark in the component that routing URL is directed toward
It is traced from the component that every routing URL is directed toward related by the configuration item of routing as entrance when the page is packaged
Sub-component, realize upon carries out judgement filtering in pointed assembly module in packing process.Specific implementation step
It is rapid as shown in Figure 2；According to the mark configured, it is as follows that packing control on demand is carried out to associated code module:
S21: the method for being used for dynamic registration sub-component is defined
Project environment does not malfunction when to ensure that introductory path can not find sub-component in code, uses es6 grammer
Promise constructed fuction carries out asynchronous execution processing, captures to abnormal.
Such as: the method for defining an entitled registerComponents, entering to join a is that association code module file presss from both sides name
, to enter to join b be referred to as sub-component title.The parameter a of acquisition and parameter b are spliced to obtain the code road of corresponding sub-component module
Diameter；The path can be introduced sub-component by import.Since dynamic import provides the API based on promise, Ji Ke
Catch is carried out to abnormal in then function.
In then function, use the entitled b's of Vue.component (b, component.default) upon
Component is registered；When smoothly executing the function, component just succeeds in registration herein；Visible related pages after packing.
S22: according to mark content, judge whether associated component is registered
In embodiments of the present invention, the relating value under current routing, including routing metamessage object value can global be obtained.
According to the acquisition methods of routing metamessage object value, obtains configured ident value and judged.Such as it is judged as that confirmation is packaged phase
Climax assembly module, thens follow the steps S23, otherwise skips step S23.
For example, the method for obtaining the ident value isPackageAaComponent in routing metamessage object is to call
this.$route.meta.isPackageAaComponent；As this. $ route.meta.isPackageAaComponent
When being as a result true, following steps S23 is continued to execute；When result is false, without operation；Default not to association
Component code module is packaged.
S23: parameter needed for incoming registration is associated sub-component registration, is defaulted as needing to be packaged
The dynamic registration sub-component method of invocation step S21, and incoming relevant parameter value.
For example, calling dynamic registration sub-component function registerComponents, wherein parameter a is to be directed toward Aa.vue
Module file presss from both sides title, and b Aa, i.e. its sub-component title complete the registration of sub-component at the end of calling, realizes to Aa.vue
The packing of code file controls.
Judged by mark defined in S10, to evade the unnecessary file of a large amount of packings, causes code sudden and violent
The consequence of dew and redundancy.Also, in register method, the file of introductory path can not find, not will cause leads to page exception, shadow
Ring the consequence for being packaged and executing.
S30: according to mark content, whether the code module that determination component is related to is shown
Associated sub-component is introduced into<template>, parameter $ is judged by v-if in its outer layer
Route.meta.isPackageAaComponent is to decide whether display association sub-component code.If value is true, then
Its code module is introduced after successful registration sub-component Aa.vue；Otherwise, it in outer layer label when v-if=false, writes from memory
Recognize the sub-component code for not executing internal layer.The present invention by component introduce outer layer addition mark judgement, avoid component not into
The consequence for leading to pagecompile exception in the case where row registration, executes page normal compilation.
In addition, entry building in, by the router.js of projects to the metamessage of same routing module into
Row difference configuration, realizes the control being packaged on demand；So that more set projects can be multiplexed same set of project core code and
The different correlator component of dynamic registration, achieve the purpose that accomplish to seek common ground while reserving difference in meeting entry demand.
Claims (10)
1. a kind of on-demand packaging method of front end page based on entry building, which is characterized in that the method is to be packaged
The corresponding module of entry file adds the mark whether being packaged；It routes to be carried out in the component that URL is directed toward according to mark and be packaged on demand
Control, finally whether shown according to the code module that is related to of mark content determination component.
2. according to the method described in claim 1, it is characterized by: the entry file, that is, routing file, including routing road
Diameter, routing title, routing metamessage, routing URL；The addition packing is identified as configuration routing metamessage.
3. according to the method described in claim 2, it is characterized by: described be in the corresponding module addition for being packaged entry file
The mark of no packing comprises the concrete steps that:
Corresponding routing file is found, by the ginseng for adding a Boolean type in the routing metamessage of wherein respective modules
Number, is set as true/false, in this, as whether being packaged the foundation of the module.
4. method according to claim 1,2 or 3, it is characterised in that: according to mark in the component that the routing URL is directed toward
Knowing the control carried out and be packaged on demand as to be directed toward as entrance from every routing URL when the page is packaged by the configuration item of routing
Relevant sub-component is traced in component, realizes that upon judged in pointed assembly module in packing process
Filter.
5. according to the method described in claim 4, it is characterized by: real according to mark in the component that the routing URL is directed toward
The control specific steps that row is packaged on demand: the method for being used for dynamic registration sub-component is defined；According to mark content, judge to close
Whether the component of connection is registered；Then according to the acquisition methods of routing metamessage object value, the configured ident value of institute is obtained
Judged, if result is true, parameter needed for incoming registration is associated sub-component registration, and is defaulted as needing to beat
Packet.
6. according to the method described in claim 5, it is characterized by: define one be used for dynamic registration sub-component method when,
Asynchronous execution processing is carried out using the promise constructed fuction of es6 grammer, is captured to abnormal.
7. method according to claim 1,2 or 3, it is characterised in that: described to be related to according to mark content determination component
Code module when whether showing, associated sub-component is introduced into<template>, passes through v-if judgement ginseng in its outer layer
Number $ route.meta.isPackageAaComponent is to decide whether display association sub-component code；If value is
True then introduces its code module after successful registration sub-component Aa.vue；Otherwise, v-if=in outer layer label
When false, default does not execute the sub-component code of internal layer.
8. according to the method described in claim 4, it is characterized by: the code being related to according to mark content determination component
When whether module shows, associated sub-component is introduced into<template>, parameter $ is judged by v-if in its outer layer
Route.meta.isPackageAaComponent is to decide whether display association sub-component code；If value is true, then
Its code module is introduced after successful registration sub-component Aa.vue；Otherwise, it in outer layer label when v-if=false, writes from memory
Recognize the sub-component code for not executing internal layer.
9. according to the method described in claim 5, it is characterized by: the code being related to according to mark content determination component
When whether module shows, associated sub-component is introduced into<template>, parameter $ is judged by v-if in its outer layer
Route.meta.isPackageAaComponent is to decide whether display association sub-component code；If value is true, then
Its code module is introduced after successful registration sub-component Aa.vue；Otherwise, it in outer layer label when v-if=false, writes from memory
Recognize the sub-component code for not executing internal layer.
10. according to the method described in claim 9, it is characterized by: the method passes through in the router.js of projects
Difference configuration is carried out to the metamessage of same routing module, realizes the control being packaged on demand.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910728259.0A CN110531983A (en) | 2019-08-08 | 2019-08-08 | A kind of on-demand packaging method of front end page based on entry building |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910728259.0A CN110531983A (en) | 2019-08-08 | 2019-08-08 | A kind of on-demand packaging method of front end page based on entry building |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110531983A true CN110531983A (en) | 2019-12-03 |
Family
ID=68661567
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910728259.0A Withdrawn CN110531983A (en) | 2019-08-08 | 2019-08-08 | A kind of on-demand packaging method of front end page based on entry building |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110531983A (en) |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111309332A (en) * | 2020-02-11 | 2020-06-19 | 北京达佳互联信息技术有限公司 | File content on-demand loading method and device, electronic equipment and storage medium |
| CN111966337A (en) * | 2020-07-28 | 2020-11-20 | 苏州浪潮智能科技有限公司 | Vue-based front-end multi-project display method, system, equipment and storage medium |
| CN112451972A (en) * | 2020-11-20 | 2021-03-09 | 深圳点猫科技有限公司 | Game engine-based resource compression package construction method, device, system and medium |
| CN113204342A (en) * | 2021-04-30 | 2021-08-03 | 宝宝巴士股份有限公司 | Method and terminal for quickly constructing front-end page |
| CN113553035A (en) * | 2021-07-08 | 2021-10-26 | 北京计算机技术及应用研究所 | Design and construction method of universal front-end UI component library |
| CN113778385A (en) * | 2021-08-18 | 2021-12-10 | 北京达佳互联信息技术有限公司 | Component registration method, device, terminal and storage medium |
| CN114489758A (en) * | 2022-02-14 | 2022-05-13 | 北京京东振世信息技术有限公司 | Page isolation method, page rendering method, device, equipment and computer medium |
| CN114816407A (en) * | 2022-05-24 | 2022-07-29 | 新奥数能科技有限公司 | Component packaging method and device, electronic equipment and storage medium |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105468412A (en) * | 2015-11-26 | 2016-04-06 | 金蝶软件（中国）有限公司 | Dynamic packaging method and dynamic packaging device |
| CN107066291A (en) * | 2017-02-09 | 2017-08-18 | 阿里巴巴集团控股有限公司 | Packaging method, device and the equipment of SDK, computer-readable recording medium |
| CN107402788A (en) * | 2017-07-25 | 2017-11-28 | 网易（杭州）网络有限公司 | Resource packing management method and device |
| CN109032659A (en) * | 2018-07-20 | 2018-12-18 | 珠海宏桥高科技有限公司 | Single-page applies the method based on configuration reference remote pages component |
| CN109101240A (en) * | 2018-06-25 | 2018-12-28 | 北京小米移动软件有限公司 | Packaging method, device and storage medium |
| CN109117174A (en) * | 2018-07-04 | 2019-01-01 | 北京德惠众合信息技术有限公司 | The system and method for the front end page of compatible different engines |
| CN109683892A (en) * | 2018-12-11 | 2019-04-26 | 北京城市网邻信息技术有限公司 | Page display method, device, computer equipment and storage medium |
| CN110007954A (en) * | 2019-02-27 | 2019-07-12 | 深圳点猫科技有限公司 | The method and electronic equipment that language is packaged Vue project based on programming |
-
2019
- 2019-08-08 CN CN201910728259.0A patent/CN110531983A/en not_active Withdrawn
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105468412A (en) * | 2015-11-26 | 2016-04-06 | 金蝶软件（中国）有限公司 | Dynamic packaging method and dynamic packaging device |
| CN107066291A (en) * | 2017-02-09 | 2017-08-18 | 阿里巴巴集团控股有限公司 | Packaging method, device and the equipment of SDK, computer-readable recording medium |
| CN107402788A (en) * | 2017-07-25 | 2017-11-28 | 网易（杭州）网络有限公司 | Resource packing management method and device |
| CN109101240A (en) * | 2018-06-25 | 2018-12-28 | 北京小米移动软件有限公司 | Packaging method, device and storage medium |
| CN109117174A (en) * | 2018-07-04 | 2019-01-01 | 北京德惠众合信息技术有限公司 | The system and method for the front end page of compatible different engines |
| CN109032659A (en) * | 2018-07-20 | 2018-12-18 | 珠海宏桥高科技有限公司 | Single-page applies the method based on configuration reference remote pages component |
| CN109683892A (en) * | 2018-12-11 | 2019-04-26 | 北京城市网邻信息技术有限公司 | Page display method, device, computer equipment and storage medium |
| CN110007954A (en) * | 2019-02-27 | 2019-07-12 | 深圳点猫科技有限公司 | The method and electronic equipment that language is packaged Vue project based on programming |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111309332A (en) * | 2020-02-11 | 2020-06-19 | 北京达佳互联信息技术有限公司 | File content on-demand loading method and device, electronic equipment and storage medium |
| CN111966337A (en) * | 2020-07-28 | 2020-11-20 | 苏州浪潮智能科技有限公司 | Vue-based front-end multi-project display method, system, equipment and storage medium |
| CN111966337B (en) * | 2020-07-28 | 2022-12-27 | 苏州浪潮智能科技有限公司 | Front-end multi-project display method, system, equipment and storage medium based on Vue |
| CN112451972A (en) * | 2020-11-20 | 2021-03-09 | 深圳点猫科技有限公司 | Game engine-based resource compression package construction method, device, system and medium |
| CN113204342A (en) * | 2021-04-30 | 2021-08-03 | 宝宝巴士股份有限公司 | Method and terminal for quickly constructing front-end page |
| CN113553035A (en) * | 2021-07-08 | 2021-10-26 | 北京计算机技术及应用研究所 | Design and construction method of universal front-end UI component library |
| CN113778385A (en) * | 2021-08-18 | 2021-12-10 | 北京达佳互联信息技术有限公司 | Component registration method, device, terminal and storage medium |
| CN113778385B (en) * | 2021-08-18 | 2024-03-19 | 北京达佳互联信息技术有限公司 | Component registration method, device, terminal and storage medium |
| CN114489758A (en) * | 2022-02-14 | 2022-05-13 | 北京京东振世信息技术有限公司 | Page isolation method, page rendering method, device, equipment and computer medium |
| CN114816407A (en) * | 2022-05-24 | 2022-07-29 | 新奥数能科技有限公司 | Component packaging method and device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110531983A (en) | A kind of on-demand packaging method of front end page based on entry building | |
| Breivold et al. | Component-based and service-oriented software engineering: Key concepts and principles | |
| US8572236B2 (en) | Distributing services in graph-based computations | |
| US9158510B2 (en) | System and computer program product for creating a telecommunications application | |
| CN110069259A (en) | Analytic method, device, electronic equipment and storage medium based on idl file | |
| US20040015816A1 (en) | Coordination synthesis for software systems | |
| CN100478914C (en) | Symbol debug method and system in cross integration development environment | |
| CN107220258A (en) | For method, device and the terminal of the data for capturing five application page | |
| CN106373571A (en) | Voice control method and device | |
| CN111580821B (en) | Script binding method and device, electronic equipment and computer readable storage medium | |
| CN103744678A (en) | Method for determining static function call relations based on register transfer language | |
| Ruf et al. | Network services on service extensible routers | |
| Kallab et al. | Automatic K-resources discovery for hybrid web connected environments | |
| Poulhies et al. | A methodology and supporting tools for the development of component-based embedded systems | |
| CN104809537A (en) | Workflow realization method used for business intelligent analysis platform | |
| CN114077737A (en) | Android inter-component communication data flow detection method based on taint analysis | |
| Cheung | Petri nets for protocol engineering | |
| Ganti et al. | An object-oriented application development environment | |
| Chase et al. | Recovering software architecture from multiple source code analyses | |
| CN113609491B (en) | Plug-in vulnerability automatic scanning method based on message queue | |
| Riccobene et al. | An ASM-based executable formal model of service-oriented component interactions and orchestration | |
| Mudiam et al. | Synthesizing and integrating legacy components as services using adapters | |
| CN109725889B (en) | Method for establishing connection between cordova and weex | |
| Krause | Enterprise Application Discovery and Monitoring Management with ExplorViz | |
| Sun et al. | Model-based testing of web service with EFSM |
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 | ||
| WW01 | Invention patent application withdrawn after publication |
Application publication date: 20191203 |
|
| WW01 | Invention patent application withdrawn after publication |