一种用于iFrame微前端架构的组件状态共享方法与装置与流程

一种用于iframe微前端架构的组件状态共享方法与装置
技术领域
1.本发明涉及一种用于iframe微前端架构的组件状态共享方法与装置，属于计算机软件领域。


背景技术：

2.微前端是一种类似于微服务的前端架构，将微服务的理念应用于浏览器web端，是一种将大型项目拆分成子项目来达到工程拆分管理的方案，即将单一的大型前端应用转变为多个小型前端应用的聚合。由此带来的变化是，这些前端应用能够独立运行、独立开发、独立部署。可以利于多组协同，在共享组件的同时进行并行开发，解决工程膨胀、开发维护困难等问题。
3.当前成熟项目的微前端的架构最常用的为以下两种：1、single
‑
spa及基于single
‑
spa的架构方案。2、浏览器原生支持的iframe方案。方案1的原理简单来说，是在页面合适的地方建立dom容器，根据需要加载对应子项目dom节点到容器中，引入子项目的css样式文件和执行javascript脚本。方案2的iframe最大的特性就是浏览器提供的原生的硬隔离方案。
4.两种架构相比较的话，方案1无法提供像iframe一样的变量和样式的完美隔离，需要注意全局变量和样式的污染问题。对于非标准的amd、umd、systemjs等加载方式的库会存在依赖问题（需要针对性改造）。对现有项目具有比较大的改造成本。而方案2的iframe最大的特性就是浏览器提供的原生的硬隔离方式，不论是样式隔离、javascript脚本隔离这类问题统统都能被完美解决。由于是浏览器的原生支持，项目只需较小的改造成本。但方案2的最大问题也在于他的隔离性无法被突破，导致应用间上下文无法被共享，ui不统一，随之带来的开发体验、产品体验的问题。


技术实现要素：

5.发明目的：针对上述iframe微前端架构存在的问题，本发明目的在于提供一种基于带事件中心的组件库的iframe微前端组件状态共享方法与装置，用来解决项目中遇到的内外组件状态共享，和ui体验的问题，从而改善隔离带来的体验及性能问题。
6.技术方案：为实现上述发明目的，本发明采用如下技术方案：一种用于iframe微前端架构的组件状态共享方法，所述方法通过在微前端项目的外层框架及各个子项目中引入带事件中心的组件库实现；所述带事件中心的组件库在初始化时，在window.top上构建全局事件中心对象并存入各组件库的setstate函数；所述全局事件中心对象包括一个callbackmap对象，用来存放各子应用和框架组件库setstate函数的引用，各子应用的应用名称对应着该应用组件库的setstate函数；在子应用组件库的组件调用setstate函数发布消息时，全局事件中心判断是否是全局事件，若是全局事件，则只发给框架的组件库，由框架的组件库进行ui展示；否则分发
给其他所有子应用及框架的组件库，由订阅了该事件的组件处理，完成框架及所有子应用的组件库的状态同步。
7.进一步地，所述全局事件中心对象包括一个dispatch方法，用于接收组件库的setstate函数发出的消息，并选择性的调用callbackmap中的setstate函数。
8.进一步地，所述带事件中心的组件库在初始化时，通过入参或者根据window.top判断为微前端应用时，则在window.top上构建事件中心；若不是微前端应用则不部署事件中心。
9.进一步地，组件库的事件中心提供bind函数和setstate函数；所述bind函数提供订阅方法，供组件库初始化的时候来订阅事件，所述setstate函数用来向自己组件库的组件发布事件和对外发布消息；所述发布事件为触发bind函数在该事件上绑定的回调方法，所述对外发布消息为调用全局事件中心的dispatch方法将事件名称及关联数据发送到全局事件中心。
10.进一步地，所述全局事件包括展示时不受iframe窗口大小限制的组件的相关事件，包括边缘弹出的消息框、全屏loading、全屏视频、可全屏拖动的弹窗。
11.基于相同的发明构思，本发明提供的一种用于iframe微前端架构的组件状态共享装置，包括创建在微前端项目的外层框架及各个子项目中带事件中心的组件库；所述带事件中心的组件库包括初始化模块和状态同步模块；所述初始化模块，用于在组件库初始化时，在window.top上构建全局事件中心对象并存入各组件库的setstate函数；所述全局事件中心对象包括一个callbackmap对象，用来存放各子应用和框架组件库setstate函数的引用，各子应用的应用名称对应着该应用组件库的setstate函数；所述状态同步模块，用于在子应用组件库的组件调用setstate函数发布消息时，全局事件中心判断是否是全局事件，若是全局事件，则只发给框架的组件库，由框架的组件库进行ui展示；否则分发给其他所有子应用及框架的组件库，由订阅了该事件的组件处理，完成框架及所有子应用的组件库的状态同步。
12.基于相同的发明构思，本发明提供的一种计算机装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述计算机程序被加载至处理器时实现所述的用于iframe微前端架构的组件状态共享方法。
13.有益效果：与现有技术相比，本发明具有如下优点：1、微前端项目中所有子项目及框架的组件库可以自动进行状态的同步，解决了iframe下子项目间及子项目和外层框架间的隔离状态。
14.2、组件库自动把全局事件上升到外层调用，解决iframe下的微前端子项目无法全屏展示，ui效果不统一的问题，达到单一应用的体验效果。
附图说明
15.图1为本发明实施例的微前端项目结构图。
16.图2为本发明实施例中组件库的初始化流程图。
17.图3为本发明实施例中组件状态共享和消息传递流程图。
具体实施方式
18.下面将结合附图和具体实施例，对本发明的技术方案进行清楚、完整的描述。
19.本发明实施例公开的一种用于iframe微前端架构的组件状态共享方法，主要通过在微前端项目的外层框架及各个子项目中引入带事件中心的组件库实现。本发明基于非跨域的场景，子项目可以访问到框架的window对象。图1为本发明实施例涉及的一个典型的微前端项目的结构图，项目由外层框架及多个子项目组成，框架及各子项目都引入了自带事件中心机制的组件库。各个子项目可以作为独立应用，此时组件库的事件中心不起作用。当子项目作为微前端子应用时，组件库的事件中心机制可以自动和外层框架及其他子项目的组件库进行通讯和共享状态。
20.组件库的事件中心有两个核心函数，bind函数和setstate函数。其中，bind函数提供订阅方法，核心为eventbus的$on方法，供组件库初始化的时候来订阅事件。setstate函数用来向自己组件库的组件发布事件和对外发布消息。两种动作可通过入参来区别。发布事件是调用eventbus的$emit方法，触发bind函数在该事件上绑定的回调方法。对外发布消息是调用全局事件中心的dispatch方法将事件名称及关联数据发送到全局事件中心，全局事件中心再将事件和数据通知微前端应用的框架及其他子项目的组件库。
21.图2展示了从加载应用到首页显示完成，组件库的初始化过程。在组件库初始化时，通过入参或者判断（如，window.self是否等于window.top或window.top的某个标识是不是true）为微前端应用时去window.top上构建一个事件中心，所有子应用及框架的事件中心会进行合并。
22.一般来说外层的框架的组件库会最先初始化，当window.top没有对应的全局事件中心时，会创建一个全局的事件中心对象，包括：1）一个callbackmap对象，用来存放各子应用和框架组件库setstate函数的引用，各子应用的应用名称对应着该应用组件库的setstate函数。2）一个set方法用来向callbackmap中添加子应用的setstate函数引用。3）一个get方法用来获取callbackmap对象。4） 一个dispatch方法用来接收组件库的setstate函数发出的消息，并分发消息，即选择性的调用callbackmap中的setstate函数。
23.当某子应用的组件库初始化时，组件库的事件中心判断如果全局事件中心已存在，则调用全局事件中心的set方法将该组件库的setstate引用存入事件中心。
24.图3展示了微前端应用的某个子应用组件库发生变化时，子应用的组件库间及子应用与框架的组件库间的状态共享和消息传递过程。主要包括：1.当子应用组件库组件发生变化，组件会自动调用事件中心的setstate发布消息。setstate会调用全局事件中心的dispatch方法，dispatch先通过全局事件中心的get方法获取到存放所有组件库的setstate函数引用的callbackmap对象。
25.2.dispatch判断是否是全局事件（可通过约定的事件名称确定），如果是全局事件，全局事件主要指展示时不受iframe窗口大小限制的组件的相关事件，如边缘弹出的消息框、全屏loading、全屏视频、可全屏拖动的弹窗等，则只发给框架的组件库，即只调用callbackmap中框架组件库的setstate函数，由框架的组件库进行ui展示。
26.3.如果是非全局事件，即通用事件，这分发给其他所有子应用及框架的组件库。即调用callbackmap中其他所有子应用及框架的组件库的setstate函数。
27.4.如果组件库中的某组件订阅了这个事件，就会触发初始化时通过订阅函数bind
注册的回调方法，改变状态，完成微前端的框架及所有子应用的组件库的状态同步。
28.基于相同的发明构思，本发明实施例提供的一种用于iframe微前端架构的组件状态共享装置，包括创建在微前端项目的外层框架及各个子项目中带事件中心的组件库；其中带事件中心的组件库包括初始化模块和状态同步模块；初始化模块，用于在组件库初始化时，在window.top上构建全局事件中心对象并存入各组件库的setstate函数；状态同步模块，用于在子应用组件库的组件调用setstate函数发布消息时，全局事件中心判断是否是全局事件，若是全局事件，则只发给框架的组件库，由框架的组件库进行ui展示；否则分发给其他所有子应用及框架的组件库，由订阅了该事件的组件处理，完成框架及所有子应用的组件库的状态同步。各模块的具体实施细节参见上述方法实施例，此处不再赘述。
29.基于相同的发明构思，本发明实施例提供的一种计算机装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，该计算机程序被加载至处理器时实现上述的用于iframe微前端架构的组件状态共享方法实施例的各个步骤。