微前端系统技术方案

本公开涉及计算机技术领域，尤其涉及微前端系统

【技术实现步骤摘要】
微前端系统、微前端系统的构建方法、装置、电子设备


[0001]本公开涉及计算机
，尤其涉及微前端系统
、
微前端系统的构建方法
、
装置
、
电子设备
。

技术介绍

[0002]在开发大型的前端应用时，通常需要将应用拆分成多个子应用进行开发和维护
。
这时候微前端就显得尤为重要
。
微前端是一种架构模式，它将前端应用程序拆分成多个更小的
、
相对独立的部分，每个部分都可以独立开发
、
测试
、
部署和扩展
。
在微前端架构中，每个子应用都是一个独立的应用程序，可以独立部署和运行
。
这样，我们就可以将前端应用程序的开发
、
测试
、
部署和维护工作分解成多个更小的任务，提高应用程序的可维护性和可扩展性
。
现有技术中的微前端实现方式，子应用无法暴露更多的业务组件，子应用中的组件
、
数据无法共享
。

技术实现思路

[0003]本公开提供了一种微前端系统
、
微前端系统的构建方法
、
装置
、
电子设备
。
[0004]根据本公开的一方面，提供了一种微前端系统，包括：
[0005]主应用和多个子应用，每个所述子应用注册到所述主应用中；
[0006]所述主应用和多个所述子应用之间互相共享公共组件，并且多个所述子应用之间相互共享所述公共组件；
[0007]每个所述子应用包括预先构建的配置文件，所述配置文件包含所述子应用共享的所述公共组件对应的路径，所述子应用通过所述配置文件暴露所述公共组件，所述子应用之间通过所述配置文件获取对应的所述公共组件
。
[0008]根据本公开的另一方面，提供了一种微前端系统的构建方法，包括：
[0009]创建主应用；
[0010]创建多个子应用；
[0011]将多个所述子应用注册到所述主应用中；
[0012]在每个所述子应用中创建对应的配置文件；其中，所述配置文件包含所述子应用共享的所述公共组件对应的路径，所述配置文件用于暴露所述子应用共享的至少一个公共组件，所述主应用和其它所述子应用可通过加载所述配置文件获取对应的所述公共组件
。
[0013]根据本公开的第三方面，提供了一种微前端系统的构建装置，包括：
[0014]主应用创建模块，被配置为创建主应用；
[0015]子应用创建模块，被配置为创建多个子应用；
[0016]注册模块，被配置为将多个所述子应用注册到所述主应用中；
[0017]配置模块，被配置为在每个所述子应用中创建对应的配置文件；其中，所述配置文件包含所述子应用共享的所述公共组件对应的路径，所述配置文件用于暴露所述子应用共享的至少一个公共组件，所述主应用和其它所述子应用可通过加载所述配置文件获取对应
的所述公共组件
。
[0018]根据本公开的第四方面，提供了一种电子设备，包括：
[0019]至少一个处理器；以及
[0020]与所述至少一个处理器通信连接的存储器；其中，
[0021]所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述技术方案中任一项所述的方法
。
[0022]根据本公开的第五方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行上述技术方案中任一项所述的方法
。
[0023]根据本公开的第六方面，提供了一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现上述技术方案中任一项所述的方法
。
[0024]应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围
。
本公开的其它特征将通过以下的说明书而变得容易理解
。
附图说明
[0025]附图用于更好地理解本方案，不构成对本公开的限定
。
其中：
[0026]图1是本公开实施例中的微前端系统的架构图；
[0027]图2是本公开实施例中的微前端系统的构建方法步骤图；
[0028]图3是本公开实施例中的微前端系统的构建装置原理框图；
[0029]图4是用来实现本公开实施例的微前端系统的构建方法的电子设备的框图
。
具体实施方式
[0030]以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的
。
因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神
。
同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述
。
[0031]微前端的实现方式有多种，比较常见的方式是通过
iframe
来实现子应用的隔离和独立运行，或者通过重写
history api
的方式监听路由变化，监听到变化时执行对应的加载
、
卸载等生命周期，生命周期中对子应用进行控制
。
通过这些方式，不同的子应用之间可以互相独立运行，从而实现一个完整的前端应用程序
。
[0032]但目前现有的微前端实现方式，各应用无法暴露更多的业务组件
。
针对上述技术问题，本公开提供了一种微前端系统，包括：
[0033]主应用和多个子应用，每个子应用注册到主应用中；
[0034]主应用和多个子应用之间互相共享公共组件，并且多个子应用之间相互共享公共组件；
[0035]每个子应用包括预先构建的配置文件，配置文件包含子应用共享的公共组件对应的路径，子应用通过配置文件暴露公共组件，子应用之间通过配置文件获取对应的公共组件
。
[0036]示例性地，如图1所示，本公开的微前端系统包括主应用
A、
子应用
a1、
子应用
a2
，在构建微前端系统时，将子应用
a1、
子应用
a2
注册到主应用
A
中，注册时需要指定子应用的名
称
、
访问地址
、
加载方式和路由配置等信息
。
在微前端系统中，主应用负责整个应用的框架搭建
、
路由分发以及子应用的注册和协调管理，子应用作为独立开发的前端应用程序，可以独立运行，也可以作为主应用的一个子模块运行
。
[0037]进一步地，每个子应用中预先创建一个配置文件，用于配置该子应用向主应用本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种微前端系统，包括：主应用和多个子应用，每个所述子应用注册到所述主应用中；所述主应用和多个所述子应用之间互相共享公共组件，并且多个所述子应用之间相互共享所述公共组件；每个所述子应用包括预先构建的配置文件，所述配置文件包含所述子应用共享的所述公共组件对应的路径，所述子应用通过所述配置文件暴露所述公共组件，所述子应用之间通过所述配置文件获取对应的所述公共组件
。2.
根据权利要求1所述的微前端系统，其中，还包括：至少一个公共子应用，注册到所述主应用中，用于共享与业务无关的第二公共组件或者公共函数
。3.
根据权利要求1所述的微前端系统，其中，还包括：全局状态管理模块，设置于所述主应用中，用于通过全局数据监听所述主应用和所有所述子应用的状态变化
。4.
根据权利要求1所述的微前端系统，其中，还包括：所述主应用通过指定静态目录路径，向多个所述子应用共享常用工具类
、
所述公共组件以及用于初始化子应用
、
注册子应用的微前端工具
。5.
根据权利要求1‑4中任意一项所述的微前端系统，其中，每个所述子应用的注册信息包括以下至少一项：所述子应用对应的名称
、
访问地址
、
加载方式
、
路由信息
。6.
根据权利要求5所述的微前端系统，其中，所述路由信息包括所述子应用对应的权限信息
。7.
根据权利要求1所述的微前端系统，其中，还包括：共享依赖模块，用于向所述主应用和所有所述子应用提供渲染框架和工具库
。8.
一种微前端系统的构建方法，包括：创建主应用；创建多个子应用；将多个所述子应用注册到所述主应用中；在每个所述子应用中创建对应的配置文件；其中，所述配置文件包含所述子应用共享的所述公共组件对应的路径，所述配置文件用于暴露所述子应用共享的至少一个公共组件，所述主应用和其它所述子应用可通过加载所述配置文件获取对应的所述公共组件
。9.
根据权利要求8所述的方法，其中，所述将多个所述子应用注册到所述主应用中包括：将所有所述子应用对应的名称
、
访问地址
、
加载方式以及路由信息注册到所述主应用中
。10.
根据权利要求8或9所述的方法，其中，所述将多个所述子应用注册到所述主应...

【专利技术属性】
技术研发人员：温策，
申请(专利权)人：北京百度网讯科技有限公司，
类型：发明
国别省市：