微前端管理的方法、装置、电子设备及存储介质制造方法及图纸

本发明专利技术涉及一种微前端管理的方法、装置、电子设备及存储介质。微前端管理的方法，包括步骤：S1、创建一用来共享数据的核心数据结构；S2、初始化主应用，创建一个应用关系映射表，应用关系映射表用于生成主应用和子应用的关系，设置挂载子应用的DOM节点anchor，然后把主应用放到保存模块中，用来保存主应用的信息；S3、获取应用配置，微前端版本控制中心获取应用配置，并把获取到的配置保存到应用关系映射表中；S4、加载子应用，把子应用插入到S2步骤中设置的anchor节点对应的DOM元素中。本发明专利技术通过设置微前端管理技术方案，提供了方便的微前端程序运行时共享代码的机制，可以集中管理微前端项目，发布、灰度、回滚，便于程序开发、能够提高开发效率。高开发效率。高开发效率。

【技术实现步骤摘要】
微前端管理的方法、装置、电子设备及存储介质


[0001]本专利技术涉及计算机
，具体而言，涉及一种微前端管理的方法、装置、电子设备及存储介质。

技术介绍

[0002]微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将网页(Web)应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。这些前端应用可以独立运行、独立开发、独立部署。降低维护成本，方便跨团队合作，方便技术升级。
[0003]随着项目的迭代，代码会越来越多，共同开发的人员也会越来越多，项目的维护和升级会变得困难，项目的发布节奏也会变得越来越混乱，现有的庞大的代码库不能分而治之、独立开发、发布，且在微前端运行时不能实现代码共享，开发耗时长，提高了代码开发的成本。

技术实现思路

[0004]本专利技术要解决的技术问题是实现微前端运行时代码共享。
[0005]为解决上述技术问题，根据本专利技术的一个方面，提供一种微前端管理的方法，包括如下步骤：S1、创建一用来共享数据的核心数据结构，将核心数据结构挂载在window对象上，以便所有地方都可以访问到，核心数据结构包括用于保存当前主应用信息的保存模块、用于运行时代码共享的共享模块和用于应用间通信的通信模块；S2、初始化主应用，创建一个应用关系映射表，应用关系映射表用于生成主应用和子应用的关系，在同一个页面中多次切换不同子应用的时候不需要重复从微前端配置中心获取子应用信息，接着，设置挂载子应用的DOM(Document Object Model，文档对象模型)节点anchor，然后把主应用放到保存模块中，用来保存主应用的信息；S3、获取应用配置，微前端版本控制中心获取应用配置，并把获取到的配置保存到应用关系映射表中；S4、加载子应用，把子应用插入到S2步骤中设置的anchor节点对应的DOM元素中，判断是否切换则子应用，如果切换子应用则进入下一步。
[0006]根据本专利技术的实施例，微前端管理的还可包括：S5、切换子应用，根据页面的路由和每个子应用的前缀规则，找到要切换的子应用，先执行当前子应用的卸载方法，把该子应用从页面上删除，然后回收资源，再执行步骤S4加载新的子应用。
[0007]根据本专利技术的实施例，步骤S1中，共享模块可通过Map实现；通信模块通过rxjs实现。
[0008]根据本专利技术的实施例，步骤S1中，核心数据结构中的保存模块、共享模块和通信模块同一时间可只存在一个模块。
[0009]根据本专利技术的实施例，步骤S2和步骤S3之间，可将共享模块创建为全局共享的状态，其中，创建方式采用rxjs的observable来实现，或者采用Proxy或者用具有响应式特性的库来实现。
[0010]根据本专利技术的实施例，步骤S4中，加载子应用后，可设置子应用的不同生命周期的钩子函数，不同生命周期的钩子函数包括子应用创建后、挂载后、接收主应用传递的状态、应用卸载前、卸载后和销毁后。
[0011]根据本专利技术的实施例，步骤S4中，还可包括子应用注册事件，子应用监听通信总线，观测步骤S3中共享模块创建的全局共享的状态。
[0012]根据本专利技术的实施例，步骤S4中，发布新的子应用，将代码构建完成后，可生成一个完整的静态资源引用表，静态资源引用表保存为json文件，把本次代码构建后的信息写入数据库，信息包括：子应用的路由规则、子应用的版本号、子应用的名称、子应用引用的资源文件，资源文件包括js、css、字体、图片。
[0013]根据本专利技术的实施例，微前端管理的方法还可包括：S6版本回滚，将最新一次发布的应用配置标记为作废，以完成版本回滚。
[0014]优选地，版本回滚将上一次发布的应用信息重新写入到最新的静态资源引用表中。
[0015]根据本专利技术的实施例，微前端管理的还可包括：步骤S3中，应用配置中增加是否灰度的字段，在需要灰度的情况，在请求子应用信息的时候带上参数，可以拿到灰度的版本，以降低发布风险。
[0016]根据本专利技术的实施例，在步骤S1前，可提供一个独立的web页面，可视化管理应用，用于直观地维护多个微前端架构的项目发布新版本。
[0017]根据本专利技术的第二个方面，提供一种微前端管理的装置，包括：一主应用和多个子应用，主应用用于负责实时加载运行时的子应用，并注入相关依赖；通信总线，主应用和子应用之间维护着通信总线，通信总线用于主应用和子应用之间的通信，主应用和子应用通过通信总线互相发送消息；可观测对象，可观测对象接收主应用发布的可观测对象信息，子应用通过订阅可观测对象来获取主应用单向发布的可观测对象信息。主应用和子应用分别具有路由，主应用的路由采用BrowserHistory模式，子应用的路由采用HashHistory模式。
[0018]根据本专利技术的实施例，微前端管理的装置还可包括：
[0019]共享模块，共享模块用于在主应用和多个子应用之间共享代码，主应用和多个子应用在运行的时候可以向共享模块中添加代码，或者从共享模块中获取代码执行相应的功能。
[0020]根据本专利技术的实施例，主应用可具有加载子应用、挂载子应用、卸载子应用、回收资源、状态管理和事件管理的功能。加载子应用用于是依次执行子应用的生命周期函数，最后再把子应用插入到页面上主应用指定的对应DOM节点上；挂载子应用用于判断子应用是否之前没加载过，会加载子应用的资源，如果之前已经加载过了，会直接把子应用渲染到页面上；卸载子应用用于执行清理工作，把子应用从页面的DOM节点中删除；回收资源用于避免子应用多次切换造成内存泄露；状态管理，为在应用之间共享的状态，用于修改、获取、监听状态变化；事件管理，为在应用之间通信的机制，包括注册事件、订阅事件、取消订阅、发布事件、事件广播。
[0021]根据本专利技术的实施例，子应用可具有事件管理，订阅事件，注册事件，发布事件，取消订阅和接收广播的功能，同时具有状态管理功能，用于监听主应用的状态变化，以及具有子应用的生命周期中每个阶段的钩子函数，便于将子应用恢复到所需生命周期。
[0022]根据本专利技术的第三个方面，提供一种电子设备，包括：存储器、处理器及存储在存储器上并可在处理器上运行的微前端管理程序，微前端管理程序被处理器执行时实现上述的微前端管理方法的步骤。
[0023]根据本专利技术的第四个方面，提供一种计算机存储介质，其中，计算机存储介质上存储有微前端管理程序，微前端管理程序被处理器执行时实现如上述的微前端管理方法的步骤。
[0024]与现有技术相比，本专利技术的实施例所提供的技术方案至少可实现如下有益效果：
[0025]1)本专利技术通过设置微前端管理技术方案，提供了很方便的微前端程序运行时共享代码的机制，这对于代码的复用有很大的帮助。
[0026]2)本专利技术通过设置微前端管理通过通信总线管理，提供统一的版本管理和发布中心，可以集中管理所有的微前端项目，发布、灰度、回滚，这些操作便于程序开发、能够提高开发效率。
[0027]3)本专利技术提供了一种拆分代码库的方法，通本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种微前端管理的方法，包括如下步骤：S1、创建一用来共享数据的核心数据结构，将所述核心数据结构挂载在window对象上，以便所有地方都可以访问到，所述核心数据结构包括用于保存当前主应用信息的保存模块、用于运行时代码共享的共享模块和用于应用间通信的通信模块；S2、初始化主应用，创建一个应用关系映射表，所述应用关系映射表用于生成主应用和子应用的关系，在同一个页面中多次切换不同子应用的时候不需要重复从微前端配置中心获取子应用信息，接着，设置挂载子应用的DOM节点anchor，然后把主应用放到所述保存模块中，用来保存主应用的信息；S3、获取应用配置，微前端版本控制中心获取应用配置，并把获取到的配置保存到所述应用关系映射表中；S4、加载子应用，把子应用插入到S2步骤中设置的anchor节点对应的DOM元素中，判断是否切换则子应用，如果切换子应用则进入下一步。2.如权利要求1所述的方法，还包括：S5、切换子应用，根据页面的路由和每个子应用的前缀规则，找到要切换的子应用，先执行当前子应用的卸载方法，把该子应用从页面上删除，然后回收资源，再执行步骤S4加载新的子应用。3.如权利要求1所述的方法，步骤S1中，所述共享模块通过Map实现；所述通信模块通过rxjs实现。4.如权利要求1所述的方法，步骤S1中，所述核心数据结构中的保存模块、共享模块和通信模块同一时间只存在一个模块。5.如权利要求1所述的方法，步骤S2和步骤S3之间，将所述共享模块创建为全局共享的状态，其中，创建方式采用rxjs的observable来实现，或者采用Proxy或者用具有响应式特性的库来实现。6.如权利要求1所述的方法，步骤S4中，加载子应用后，设置子应用的不同生命周期的钩子函数，所述不同生命周期的钩子函数包括子应用创建后、挂载后、接收主应用传递的状态、应用卸载前、卸载后和销毁后。7.如权利要求1所述的方法，步骤S4中，还包括子应用注册事件，子应用监听通信总线，观测步骤S3中共享模块创建的全局共享的状态。8.如权利要求1所述的方法，步骤S4中，发布新的子应用，将代码构建完成后，生成一个完整的静态资源引用表，所述静态资源引用表保存为json文件，把本次代码构建后的信息写入数据库，所述信息包括：子应用的路由规则、子应用的版本号、子应用的名称、子应用引用的资源文件，资源文件包括js、css、字体、图片。9.如权利要求8所述的方法，还包括：S6版本回滚，将最新一次发布的应用配置标记为作废，以完成版本回滚。10.如权利要求9所述的方法，所述版本回滚将上一次发布的应用信息重新写入到最新的静态资源引用表中。11.如权利要求8所述的方法，还包括：步骤S3中，应用配置中...

【专利技术属性】
技术研发人员：陈振华，李晓捷，朱辰昊，杨帅，
申请(专利权)人：再惠上海网络科技有限公司，
类型：发明
国别省市：