CN114625438B - 一种前端应用容器化的本地模块加载方法 - Google Patents
一种前端应用容器化的本地模块加载方法 Download PDFInfo
- Publication number
- CN114625438B CN114625438B CN202210209292.4A CN202210209292A CN114625438B CN 114625438 B CN114625438 B CN 114625438B CN 202210209292 A CN202210209292 A CN 202210209292A CN 114625438 B CN114625438 B CN 114625438B
- Authority
- CN
- China
- Prior art keywords
- container
- component
- local module
- configuration
- application
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 33
- 238000004806 packaging method and process Methods 0.000 claims abstract description 7
- 238000000034 method Methods 0.000 claims description 9
- 238000003491 array Methods 0.000 claims description 8
- 238000006243 chemical reaction Methods 0.000 claims description 4
- 239000003638 chemical reducing agent Substances 0.000 claims description 3
- 238000012163 sequencing technique Methods 0.000 claims description 3
- 238000012546 transfer Methods 0.000 claims description 3
- 238000011161 development Methods 0.000 abstract description 2
- 230000010354 integration Effects 0.000 description 2
- 238000010276 construction Methods 0.000 description 1
- 238000005259 measurement Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
- G06F9/45533—Hypervisors; Virtual machine monitors
- G06F9/45558—Hypervisor-specific management and integration aspects
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
- G06F9/45533—Hypervisors; Virtual machine monitors
- G06F9/45558—Hypervisor-specific management and integration aspects
- G06F2009/45575—Starting, stopping, suspending or resuming virtual machine instances
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
- Devices For Executing Special Programs (AREA)
Abstract
本发明公开了一种前端应用容器化的本地模块加载方法，涉及web前端开发技术领域，解决应用模块无法在多个不同项目中进行集成复用的技术问题，方法包括：将各本地模块打包到使用npm发布的javascriptlib库；构建App组件，构建容器配置对象，使用容器化高阶函数构建应用容器；容器化高阶函数获取应用及各本地模块的个性化配置信息及公共约定配置信息，并整理合并到容器配置对象；构建容器上下文组件，容器上下文组件接收并保存之前配置好的容器配置对象；根据配置好的容器配置对象按照统一的加载方式加载并初始化各本地模块得到Container组件；在Container组件的render函数中，使用容器上下文组件向子节点传递容器配置对象中的配置信息。
Description
技术领域
本发明涉及web前端开发技术领域，更具体地说，它涉及一种前端应用容器化的本地模块加载方法。
背景技术
在多项目建设中，各项目中往往会有一些功能一致的前端应用模块，但各模块在不同项目中都是独立建设，它们的初始化逻辑、模块资源和状态的加载可能都不一样，当打包成javascript lib库的进行复用的时候，就可能存在重复和冲突，并且模块中对第三方库的使用版本不一致甚至可能使用不同的功能库，这些问题，在没有明确标准化规则，本地模块在各项目应用中集成后，可能导致模块无法进行复用。
发明内容
本发明要解决的技术问题是针对现有技术的上述不足，本发明的目的是提供一种可以提高测量精度的前端应用容器化的本地模块加载方法，以实现模块集成后可以正常进行复用。
本发明的技术方案是：一种前端应用容器化的本地模块加载方法，包括：
将各本地模块打包到使用npm发布的javascriptlib库；
构建作为应用的运行环境中资源和状态信息统一存储及管理中心的应用容器；
构建作为各本地模块应用的业务入口的App组件；
构建用于定义应用自身以及各本地模块的个性化配置信息及公共约定配置信息的容器配置对象；
构建容器化高阶组件，所述容器化高阶组件获取应用及各本地模块的个性化配置信息及公共约定配置信息，并进行初始化操作配置到所述容器配置对象，将配置好的容器配置对象保存到所述应用容器中；
构建容器上下文组件，所述容器上下文组件接收并保存配置好的容器配置对象；
根据配置好的容器配置对象按照统一的加载方式加载所述各本地模块得到Container组件；
在所述Container组件的render函数中，使用所述容器上下文组件向子节点传递容器配置对象中的配置信息，并使用所述容器上下文组件包裹所述Container组件的属性。
作为进一步地改进，所述公共约定配置信息包括基于i18next库的国际化资源配置、基于react-router库的路由配置、基于redux库的状态配置、appWrapper数组高阶函数。
进一步地，所述加载方式包括：
将所述容器配置对象中各本地模块配置的国际化资源，使用各本地模块的名称及版本号作为命名空间key，注册进i18next中；
将所述容器配置对象中各本地模块配置的reduxreducer，使用各本地模块的名称及版本号作为命名空间key，注册进容器的reduxstore中，并调用各本地模块定义的initAction函数进行初始化；
读取所述容器配置对象中各本地模块配置的appWapper数组，使用所述appWapper数组的reducer函数对所述App组件进行包装，并赋给所述Container组件的属性。
进一步地，所述加载方式还包括：读取所述容器配置对象中各本地模块配置的路由信息，根据优先级对各路由信息进行排序，并组合成新的路由对象。
进一步地，所述容器化高阶组件根据公共约定配置信息进行约定的初始化操作，并将初始化好的国际化转换对象、reduxstore对象、路由信息通过React的上下文组件Context传递到子组件中使用。
进一步地，在加载各本地模块之前，先加载所述App组件到所述应用容器。
有益效果
本发明与现有技术相比，具有的优点为：
本发明中应用的本地模块通过容器化的方式可以独立开发、独立打包，并有标准化规范的统一加载方式，可以在各项目进行复用，保证资源加载和状态不会冲突，可以正常使用。
附图说明
图1为本发明的流程图。
具体实施方式
下面结合附图中的具体实施例对本发明做进一步的说明。
参阅图1，一种前端应用容器化的本地模块加载方法，包括：
将各本地模块打包到使用npm发布的javascriptlib库；
构建作为应用的运行环境中资源和状态信息统一存储及管理中心的应用容器，使用容器化高阶函数构建应用容器；
构建作为各本地模块应用的业务入口的App组件，在加载各本地模块之前，先加载App组件到应用容器；
构建用于定义应用自身以及各本地模块的个性化配置信息及公共约定配置信息的ContainerConfig容器配置对象；公共约定配置信息包括基于i18next库的国际化资源配置、基于react-router库的路由配置、基于redux库的状态配置、appWrapper数组高阶函数；
构建Containerize容器化高阶组件，使用容器化高阶函数构建Containerize容器化高阶组件，Containerize容器化高阶组件获取应用及各本地模块的个性化配置信息及公共约定配置信息，并进行初始化操作配置到ContainerConfig容器配置对象，将配置好的ContainerConfig容器配置对象保存到应用容器中；
构建ContainerContextProvider容器上下文组件，ContainerContextProvider容器上下文组件接收并保存配置好的ContainerConfig容器配置对象；
根据配置好的ContainerConfig容器配置对象按照统一的加载方式加载各本地模块得到Container组件，即，使用containerize容器化高阶组件作为应用容器化入口，接受应用的App组件及各本地模块的配置信息ContainerConfig容器配置对象作为入参，并返回Container组件；
在Container组件的render函数中，使用ContainerContextProvider容器上下文组件向子节点传递ContainerConfig容器配置对象中的配置信息，并使用ContainerContextProvider容器上下文组件包裹Container组件的ComposeWrapperComponent属性。
在Container组件的构造函数进行初始化工作，加载方式包括：
将ContainerConfig容器配置对象中各本地模块配置的国际化资源，使用各本地模块的名称及版本号作为命名空间key，注册进i18next中；
将ContainerConfig容器配置对象中各本地模块配置的reduxreducer，使用各本地模块的名称及版本号作为命名空间key，注册进容器的reduxstore中，并调用各本地模块定义的initAction函数进行初始化；
读取ContainerConfig容器配置对象中各本地模块配置的路由信息，根据优先级对各路由信息进行排序，并组合成新的路由对象；
读取ContainerConfig容器配置对象中各本地模块配置的appWapper数组，使用appWapper数组的reducer函数对App组件进行包装，并赋给Container组件的ComposeWrapperComponent属性。
容器化高阶组件根据公共约定配置信息进行约定的初始化操作，并将初始化好的国际化转换对象、reduxstore对象、路由信息通过React的上下文组件Context传递到子组件中使用。
本发明中应用的本地模块通过容器化的方式可以独立开发、独立打包，并有标准化规范的统一加载方式，可以在各项目进行复用，保证资源加载和状态不会冲突，可以实现模块集成后可以正常进行复用。
以上仅是本发明的优选实施方式，应当指出对于本领域的技术人员来说，在不脱离本发明结构的前提下，还可以作出若干变形和改进，这些都不会影响本发明实施的效果和专利的实用性。
Claims (6)
1.一种前端应用容器化的本地模块加载方法，其特征在于，包括：
将各本地模块打包到使用npm发布的javascriptlib库；
构建作为应用的运行环境中资源和状态信息统一存储及管理中心的应用容器；
构建作为各本地模块应用的业务入口的App组件；
构建用于定义应用自身以及各本地模块的个性化配置信息及公共约定配置信息的容器配置对象；
构建容器化高阶组件，所述容器化高阶组件获取应用及各本地模块的个性化配置信息及公共约定配置信息，并进行初始化操作配置到所述容器配置对象，将配置好的容器配置对象保存到所述应用容器中；
构建容器上下文组件，所述容器上下文组件接收并保存配置好的容器配置对象；
根据配置好的容器配置对象按照统一的加载方式加载所述各本地模块得到Container组件；
在所述Container组件的render函数中，使用所述容器上下文组件向子节点传递容器配置对象中的配置信息，并使用所述容器上下文组件包裹所述Container组件的属性。
2.根据权利要求1所述的一种前端应用容器化的本地模块加载方法，其特征在于，所述公共约定配置信息包括基于i18next库的国际化资源配置、基于react-router库的路由配置、基于redux库的状态配置、appWrapper数组高阶函数。
3.根据权利要求2所述的一种前端应用容器化的本地模块加载方法，其特征在于，所述加载方式包括：
将所述容器配置对象中各本地模块配置的国际化资源，使用各本地模块的名称及版本号作为命名空间key，注册进i18next中；
将所述容器配置对象中各本地模块配置的reduxreducer，使用各本地模块的名称及版本号作为命名空间key，注册进容器的reduxstore中，并调用各本地模块定义的initAction函数进行初始化；
读取所述容器配置对象中各本地模块配置的appWapper数组，使用所述appWapper数组的reducer函数对所述App组件进行包装，并赋给所述Container组件的属性。
4.根据权利要求3所述的一种前端应用容器化的本地模块加载方法，其特征在于，所述加载方式还包括：读取所述容器配置对象中各本地模块配置的路由信息，根据优先级对各路由信息进行排序，并组合成新的路由对象。
5.根据权利要求2所述的一种前端应用容器化的本地模块加载方法，其特征在于，所述容器化高阶组件根据公共约定配置信息进行约定的初始化操作，并将初始化好的国际化转换对象、reduxstore对象、路由信息通过React的上下文组件Context传递到子组件中使用。
6.根据权利要求1所述的一种前端应用容器化的本地模块加载方法，其特征在于，在加载各本地模块之前，先加载所述App组件到所述应用容器。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210209292.4A CN114625438B (zh) | 2022-03-04 | 2022-03-04 | 一种前端应用容器化的本地模块加载方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210209292.4A CN114625438B (zh) | 2022-03-04 | 2022-03-04 | 一种前端应用容器化的本地模块加载方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114625438A CN114625438A (zh) | 2022-06-14 |
| CN114625438B true CN114625438B (zh) | 2024-06-04 |
Family
ID=81900730
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210209292.4A Active CN114625438B (zh) | 2022-03-04 | 2022-03-04 | 一种前端应用容器化的本地模块加载方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114625438B (zh) |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109783083A (zh) * | 2019-01-16 | 2019-05-21 | 福建天泉教育科技有限公司 | Web应用开发方法及其系统 |
| CN110333877A (zh) * | 2019-07-09 | 2019-10-15 | 西安点告网络科技有限公司 | 基于应用的可视化容器配置管理方法、装置及系统 |
| CN110580183A (zh) * | 2019-09-02 | 2019-12-17 | 江苏艾佳家居用品有限公司 | 一种移动应用组件化实现方法 |
| CN111310083A (zh) * | 2018-12-11 | 2020-06-19 | 阿里巴巴集团控股有限公司 | 页面展示方法及装置、系统 |
| CN111324346A (zh) * | 2020-01-21 | 2020-06-23 | 中国科学院软件研究所 | 一种基于Serverless的前端应用构建方法和系统 |
| CN111880894A (zh) * | 2020-06-29 | 2020-11-03 | 苏州浪潮智能科技有限公司 | 一种前端容器镜像的生成方法及系统 |
| CN112835676A (zh) * | 2021-01-27 | 2021-05-25 | 北京远盟普惠健康科技有限公司 | 一种容器化应用的部署方法及装置、计算机设备、介质 |
| CN113204341A (zh) * | 2020-02-03 | 2021-08-03 | 腾讯科技（深圳）有限公司 | 一种页面生成方法、装置及介质 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10237118B2 (en) * | 2016-11-18 | 2019-03-19 | Sap Se | Efficient application build/deployment for distributed container cloud platform |
-
2022
- 2022-03-04 CN CN202210209292.4A patent/CN114625438B/zh active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111310083A (zh) * | 2018-12-11 | 2020-06-19 | 阿里巴巴集团控股有限公司 | 页面展示方法及装置、系统 |
| CN109783083A (zh) * | 2019-01-16 | 2019-05-21 | 福建天泉教育科技有限公司 | Web应用开发方法及其系统 |
| CN110333877A (zh) * | 2019-07-09 | 2019-10-15 | 西安点告网络科技有限公司 | 基于应用的可视化容器配置管理方法、装置及系统 |
| CN110580183A (zh) * | 2019-09-02 | 2019-12-17 | 江苏艾佳家居用品有限公司 | 一种移动应用组件化实现方法 |
| CN111324346A (zh) * | 2020-01-21 | 2020-06-23 | 中国科学院软件研究所 | 一种基于Serverless的前端应用构建方法和系统 |
| CN113204341A (zh) * | 2020-02-03 | 2021-08-03 | 腾讯科技（深圳）有限公司 | 一种页面生成方法、装置及介质 |
| CN111880894A (zh) * | 2020-06-29 | 2020-11-03 | 苏州浪潮智能科技有限公司 | 一种前端容器镜像的生成方法及系统 |
| CN112835676A (zh) * | 2021-01-27 | 2021-05-25 | 北京远盟普惠健康科技有限公司 | 一种容器化应用的部署方法及装置、计算机设备、介质 |
Non-Patent Citations (1)
| Title |
|---|
| 微前端化微应用管理控制台;刘一田;曹一鸣;;计算机系统应用;20200915(09);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114625438A (zh) | 2022-06-14 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111596969B (zh) | 一种基于微内核加插件式的软件架构方法 | |
| US10908925B2 (en) | Dynamic loading method, and target file creation method and apparatus | |
| Levis et al. | TinyOS programming | |
| CN105677302A (zh) | 一种应用程序模块化开发方法以及装置 | |
| CN111897541B (zh) | 一种云环境下自动化部署资源的软件交互平台及方法 | |
| WO2022016848A1 (zh) | 一种根据服务角色的进行应用部署的方法及装置 | |
| CN111142971B (zh) | 一种适应传统应用云化的云平台应用就绪检查方法 | |
| CN106844213A (zh) | 一种前端自动化测试方法及装置 | |
| Dolui et al. | Towards multi-container deployment on IoT gateways | |
| CN101126981A (zh) | 脚本命令注册方法、调用源程序代码的方法和装置 | |
| KR100880536B1 (ko) | 이기종 컴퓨팅 및 서비스 통합을 위한 오픈 프레임워크시스템 | |
| CN108804100B (zh) | 创建界面元素的方法、装置、存储介质及移动终端 | |
| CN111651169B (zh) | 基于web容器的区块链智能合约运行方法及系统 | |
| CN112416571A (zh) | 工业物联网节点的资源管理方法、操作系统及管理装置 | |
| CN107205015A (zh) | 开放接口的实现方法和装置 | |
| CN114625438B (zh) | 一种前端应用容器化的本地模块加载方法 | |
| CN113448655A (zh) | C标准动态库的调用方法与装置 | |
| CN103336798A (zh) | 嵌入式网络设备的虚拟化数据访问系统及方法 | |
| CN109783132B (zh) | 一种可适应系统单体化及分布式化的实现方法及装置 | |
| CN114625436B (zh) | 一种前端应用容器化的远程模块加载方法 | |
| CN115712456A (zh) | 基于springboot的依赖管理与工具集成方法 | |
| CN111176652A (zh) | 应用程序管理的方法、装置、设备和介质 | |
| CN114816418A (zh) | 一种嵌入式操作系统的搭建方法、装置、设备和介质 | |
| CN109669793B (zh) | 中间件进程内对象调用方法 | |
| CN101651633B (zh) | 一种支持移动互联网应用的终端、系统及方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |