一种基于Iframe的全局化微前端实现方法及装置与流程

本发明涉及前端开发，尤其涉及一种基于iframe的全局化微前端实现方法及装置。

背景技术：

1、当前业务涉及较多内容，存在较多业务流程与环节，单一前端服务无法满足业务快速迭代稳定性与开发效率的需求，因此需要将大型前端服务拆分成多个前端服务。

2、但是随着业务流程的进行，用户需要在不同的前端服务中不停切换，每切换一次前端服务，服务对应的图片、相应的指令文件等资源都需要重新加载，造成用户存在明显的白屏感知体验。此外，由于所有资源重新加载，也将重新请求接口获取数据，导致网络资源产生额外开销。并且，现有技术对浏览器及其版本有要求，例如，业务需要支持ie浏览器，并且兼容范围为ie9-ie11的浏览器，存在兼容限制。

3、当前市面上解决类似技术问题的前端框架主要是开源团队维护的single-spa、阿里团队维护的qiankun、京东团队维护的micro-app，以及腾讯团队维护的无界，不同的技术此框

4、架采用不同的技术，要求也各不相同。具体如下表所示：

5、

6、基于上述现有前端框架，存在以下缺陷：

7、(1)浏览器兼容问题：single-spa和qiankun仅兼容ie11，与当前业务诉求存在差距，无法完全满足业务诉求；micro-app不兼容ie，无法支持业务；无界兼容性最好，可以兼容到ie9，但是无界在ie模式下直接使用iframe实现样式以及功能隔离，iframe会存在非常明显的样式割裂以及页面路由地址不同步，造成用户体验下降明显。

8、(2)技术使用限制问题：javascript文件在运行时候需要隔离，因此需要保证每个子应用互不影响，涉及javascript沙箱以及隔离策略。会对打包和资源加载等技术内容限制，当前使用pdf-dist等工具库实现资源预览以及资源共享的模块联邦均存在影响。qiankun在加载子应用资源的时候，通过接口请求的方式加载，并且所有的资源都要允许跨域，需要额外解决跨域资源获取等问题。对于不满足接入条件的服务，没有降级方案。对于复杂的业务场景，存在业务流程中断的风险。

技术实现思路

1、鉴于此，本发明实施例提供了一种基于iframe的全局化微前端实现方法及装置，以消除或改善现有技术中存在的一个或更多个缺陷。

2、一方面，本发明提供了一种基于iframe的全局化微前端实现方法，该方法包括以下步骤：

3、用户通过浏览器进行访问，向所述基座服务发起请求；

4、所述基座服务根据预设的路由规则匹配相应的前端子应用，通过iframe将所述请求转发到所述前端子应用；其中，对所述前端子应用的路由和静态资源上下文增加标识，以与所述基座服务的路由和静态资源上下文进行区分；

5、所述前端子应用进行初始化加载，根据所述请求渲染用户界面；当需要后端数据时，所述前端子应用向网关服务发送接口请求，通过所述网关服务将所述接口请求转发到后端微服务；

6、所述后端微服务接收到所述接口请求后，执行相应业务逻辑，并存储处理结果数据。

7、在本发明的一些实施例中，所述基座服务通过iframe将所述请求转发到所述前端子应用，还包括：

8、将公共数据存储在基座服务上，并同步给所述前端子应用；

9、所述前端子应用通过调用所述基座服务方法或事件，通知所述基座服务子应用数据变化，以实现所述基座服务和所述前端子应用数据同步。在本发明的一些实施例中，所述基座服务通过iframe将所述请求转发到所述前端子应用，还包括：

10、将iframe展示区域作为当前窗口，预留网页页眉和菜单的空隙，将所述页眉和所述菜单置于iframe的上一层；

11、当所述前端子应用需要开启遮罩时，所述前端子应用通知所述基座服务下沉所述页眉和所述菜单；

12、当所述前端子应用需要关闭遮罩时，所述前端子应用通知所述基座服务上浮所述页眉和所述菜单。

13、在本发明的一些实施例中，对所述前端子应用的路由和静态资源上下文增加标识，以与所述基座服务的路由和静态资源上下文进行区分，还包括：

14、对所述前端子应用的路由增加前缀标识；

15、当所述前端子应用的路由发生变更时，重写路由方法；业务代码调用所述路由方法(push或replace)时，通知所述基座服务路由，以实现所述前端子应用路由与所述基座服务路由同步。

16、在本发明的一些实施例中，对前端进行服务部署时，还包括：

17、将前端代码进行构建，生成静态资源文件，并将所述静态资源文件发布到服务器；其中，前端服务独立部署在所述服务器上，与后端服务保持独立。

18、在本发明的一些实施例中，对前端进行服务部署时，还包括：

19、当所述前端子应用与所述基座服务处于不同域名下时，通过所述服务器之间进行相互代理，以保证所述前端子应用与所述基座服务通讯时为同源状态。

20、在本发明的一些实施例中，对所述前端子应用进行管理时，还包括：

21、服务器增加条件缓存配置，并返回给浏览器，浏览器根据所述条件缓存配置，对所述前端子应用的静态资源进行有条件的缓存，以降低资源加载等待时间；所述条件至少包括对具有预设位数哈希数字的编程语言、层叠样式表和图片资源进行缓存。

22、另一方面，本发明还提供一种iframe的全局化微前端实现装置，所述装置被执行时实现如上文中提及的任一项所述基于iframe的全局化微前端实现方法的步骤，所述装置包括：

23、用户模块，用于向基座服务发起请求；

24、基座服务模块，用于根据预设的路由规则匹配相应的前端子应用，通过iframe将所述请求转发到所述前端子应用；

25、前端子应用模块，包含多个前端子应用，用于根据所述请求进行初始化加载，渲染用户界面；当需要后端数据时，向网关服务发送接口请求，通过所述网关服务将所述接口请求转发到后端微服务；

26、后端微服务模块，包含多个后端微服务，用于接收到所述接口请求后，执行相应业务逻辑；

27、数据存储模块，用于存储处理结果数据。

28、另一方面，本发明还提供一种计算机可读存储介质，其上存储有计算机程序/指令，该计算机程序/指令被处理器执行时实现如上文中提及的任一项所述方法的步骤。

29、本发明提供一种基于iframe的全局化微前端实现方法及装置，包括：用户访问基座服务，向基座服务发起请求；基座服务根据预设的路由规则匹配相应的前端子应用，通过iframe将请求转发到前端子应用；前端子应用进行初始化加载，根据请求渲染用户界面；当需要后端数据时，前端子应用向网关服务发送接口请求，通过网关服务将接口请求转发到后端微服务；后端微服务接收到接口请求后，执行相应业务逻辑，并存储处理结果数据。本发明能够兼容ie9～11以及chrome等标准浏览器；对浏览器原生能力iframe存在的技术问题进行优化，遮罩层覆盖完整；通过增加标识，重写路由方法，实现基座服务和前端子应用路由状态同步；通过设计前端服务代理策略，解决iframe通讯要求，实现跨域资源的安全加载与数据交互；以及通过有条件的缓存前期子应用资源，减少服务切换时长，降低资源加载等待时长。

30、本发明的附加优点、目的，以及特征将在下面的描述中将部分地加以阐述，且将对于本领域普通技术人员在研究下文后部分地变得明显，或者可以根据本发明的实践而获知。本发明的目的和其它优点可以通过在说明书以及附图中具体指出的结构实现到并获得。

31、本领域技术人员将会理解的是，能够用本发明实现的目的和优点不限于以上具体所述，并且根据以下详细说明将更清楚地理解本发明能够实现的上述和其他目的。