CN115421693A - 微前端架构的实现方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请涉及一种微前端架构的实现方法、装置、计算机设备和存储介质。所述方法包括：响应于子应用开启请求，将子应用挂载于主应用文档中的挂载位置上；在所述子应用完成挂载后，依据加载关键数据获取所述子应用对应的资源；所述资源包括样式数据和JS脚本；在所述挂载位置上创建与所述样式数据对应的隔离环境，以及在所述隔离环境中创建所述JS脚本对应的代理沙箱；将所述样式数据加载于所述隔离环境得到第一层叠样式表对象模型树；将所述JS脚本运行于所述代理沙箱得到文档对象模型树，基于所述第一层叠样式表对象模型树和所述文档对象模型树显示所述子应用。采用本方法能够提高应用的兼容性。

Description

微前端架构的实现方法、装置、计算机设备和存储介质

技术领域

本申请涉及计算机技术领域，特别是涉及一种微前端架构的实现方法、装置、计算机设备和存储介质。

背景技术

随着web(World Wide Web，万维网)应用前端系统的日益庞大复杂，系统的开发人员不断增多，很多项目容易出现难以维护的问题，因此很多开发人员在找寻一种高效管理复杂应用的方案，如何实现这种架构是项目开发人员面临的一个重要课题。

传统对多应用的管理方案中，主要有iframe、npm依赖包、微前端框架通常iframe只适合简单的应用场景。npm依赖包是将子应用封装成npm包，通过组件的方式引入。流行的微前端框架有single-spa和qiankun，但它们都有比较强的协议规定，对原有应用需要做大量改动才能适配，故而存在对应用的兼容性差的问题。

发明内容

基于此，有必要针对上述技术问题，提供一种能够提升应用的兼容性的微前端架构的实现方法、装置、计算机设备和计算机可读存储介质。

第一方面，本申请提供了一种微前端架构的实现方法。所述方法包括：

响应于子应用开启请求，将子应用挂载于主应用文档中的挂载位置上；

在所述子应用完成挂载后，依据加载关键数据获取所述子应用对应的资源；所述资源包括样式数据和JS脚本；

在所述挂载位置上创建与所述样式数据对应的隔离环境，以及在所述隔离环境中创建所述JS脚本对应的代理沙箱；

将所述样式数据加载于所述隔离环境得到第一层叠样式表对象模型树；

将所述JS脚本运行于所述代理沙箱得到文档对象模型树，基于所述第一层叠样式表对象模型树和所述文档对象模型树显示所述子应用。

在其中一个实施例中，所述将子应用挂载于主应用文档中的挂载位置上之前，所述方法还包括：

确定所述子应用的子应用名称；

获取挂载标签，并依据所述挂载标签确定所述子应用的挂载位置；

调用注册函数，通过所述注册函数配置所述子应用的相关参数。

在其中一个实施例中，所述响应于子应用开启请求，将子应用挂载于主应用文档中的挂载位置上，包括：

响应于子应用开启请求，当所述子应用未配置路由参数时，将子应用挂载于主应用文档中的挂载位置上；

当所述子应用已配置路由参数时，确定所述子应用名称对应的子应用地址；将所述子应用地址与主应用地址进行路由匹配，得到匹配结果；当所述匹配结果为匹配成功时，将子应用挂载于主应用文档中的挂载位置上。

在其中一个实施例中，所述方法还包括：

当所述匹配结果为匹配成功时，对所述子应用地址进行映射处理；

当所述匹配结果为匹配不成功时，不对所述子应用进行挂载处理，或对所述子应用卸载处理。

在其中一个实施例中，所述加载关键数据包括第一标签和第二标签；所述样式数据包括层叠样式表和样式文件；所述依据加载关键数据获取所述子应用对应的资源包括：

检测所述子应用对应的子应用文档中的第一标签和第二标签；

依据所述第一标签将获取所述层叠样式表；

检测所述层叠样式表中的文件引用地址，并依据所述文件引用地址获取对应的样式文件；当所述样式文件中包含其它文件引用地址时，继续依据其它文件引用地址获取对应的样式文件；

更改所述层叠样式表和所述样式文件中的图片引用地址；

将更改后的所述层叠样式表和所述样式文件组合成样式数据；

依据所述第二标签获取所述JS脚本。

在其中一个实施例中，所述方法还包括：

将所述样式数据包裹于所述第一标签中；

将所述JS脚本包裹于所述第二标签中；

将包含所述第一标签和所述第二标签的子应用文档进行缓存；

在创建完所述隔离环境和所述代理沙箱之后，从缓存的所述子应用文档中读取所述样式数据和所述JS脚本；

执行所述将所述样式数据加载于所述隔离环境得到第一层叠样式表对象模型树，以及执行所述将所述JS脚本运行于所述代理沙箱得到文档对象模型树。

在其中一个实施例中，所述将所述样式数据加载于所述隔离环境得到第一层叠样式表对象模型树包括：

从所述样式数据中读取顶层样式；

将所述顶层样式挂载于所述主应用文档上，以使主应用的第二层叠样式表对象模型树正常运行；

将所述样式数据中除所述顶层样式之外的剩余数据加载于所述隔离环境，得到第一层叠样式表对象模型树。

在其中一个实施例中，所述将所述JS脚本运行于所述代理沙箱得到文档对象模型树，基于所述第一层叠样式表对象模型树和所述文档对象模型树显示所述子应用，包括：

基于子应用文档构建初始文档对象模型树；

将所述JS脚本运行于所述代理沙箱，以使所述JS脚本对所述初始文档对象模型树中的节点进行操作，得到文档对象模型树；

基于所述第一层叠样式表对象模型树和所述文档对象模型树生成渲染树；

基于所述渲染树显示所述子应用。

在其中一个实施例中，所述方法还包括：

创建所述子应用的上下文；

通过所述上下文创建主应用的第一监听事件；通过所述第一监听事件获取主应用消息，将所述主应用消息发送至所述子应用；

通过所述上下文创建子应用的第二监听事件；通过所述第二监听事件获取所述子应用消息，将所述子应用消息发送至所述主应用。

第二方面，本申请还提供了一种微前端架构的实现装置。所述装置包括：

挂载模块，用于响应于子应用开启请求，将子应用挂载于主应用文档中的挂载位置上；

获取资源模块，用于在所述子应用完成挂载后，依据加载关键数据获取所述子应用对应的资源；所述资源包括样式数据和JS脚本；

创建模块，用于在所述挂载位置上创建与所述样式数据对应的隔离环境，以及在所述隔离环境中创建所述JS脚本对应的代理沙箱；

加载模块，用于将所述样式数据加载于所述隔离环境得到第一层叠样式表对象模型树；

运行与显示模块，用于将所述JS脚本运行于所述代理沙箱得到文档对象模型树，基于所述第一层叠样式表对象模型树和所述文档对象模型树显示所述子应用。

在其中一个实施例中，所述将子应用挂载于主应用文档中的挂载位置上之前，所述装置还包括：

注册模块，用于确定所述子应用的子应用名称；获取挂载标签，并依据所述挂载标签确定所述子应用的挂载位置；调用注册函数，通过所述注册函数配置所述子应用的相关参数。

在其中一个实施例中，所述挂载模块还用于响应于子应用开启请求，当所述子应用未配置路由参数时，将子应用挂载于主应用文档中的挂载位置上；当所述子应用已配置路由参数时，确定所述子应用名称对应的子应用地址；将所述子应用地址与主应用地址进行路由匹配，得到匹配结果；当所述匹配结果为匹配成功时，将子应用挂载于主应用文档中的挂载位置上。

在其中一个实施例中，所述挂载模块还用于当所述匹配结果为匹配成功时，对所述子应用地址进行映射处理；当所述匹配结果为匹配不成功时，不对所述子应用进行挂载处理，或对所述子应用卸载处理。

在其中一个实施例中，所述加载关键数据包括第一标签和第二标签；所述样式数据包括层叠样式表和样式文件；所述获取资源模块还用于检测所述子应用对应的子应用文档中的第一标签和第二标签；依据所述第一标签将获取所述层叠样式表；检测所述层叠样式表中的文件引用地址，并依据所述文件引用地址获取对应的样式文件；当所述样式文件中包含其它文件引用地址时，继续依据其它文件引用地址获取对应的样式文件；更改所述层叠样式表和所述样式文件中的图片引用地址；将更改后的所述层叠样式表和所述样式文件组合成样式数据；依据所述第二标签获取所述JS脚本。

在其中一个实施例中，所述获取资源模块还用于将所述样式数据包裹于所述第一标签中；将所述JS脚本包裹于所述第二标签中；将包含所述第一标签和所述第二标签的子应用文档进行缓存；在创建完所述隔离环境和所述代理沙箱之后，从缓存的所述子应用文档中读取所述样式数据和所述JS脚本；执行所述将所述样式数据加载于所述隔离环境得到第一层叠样式表对象模型树，以及执行所述将所述JS脚本运行于所述代理沙箱得到文档对象模型树。

在其中一个实施例中，所述加载模块还用于从所述样式数据中读取顶层样式；将所述顶层样式挂载于所述主应用文档上，以使主应用的第二层叠样式表对象模型树正常运行；将所述样式数据中除所述顶层样式之外的剩余数据加载于所述隔离环境，得到第一层叠样式表对象模型树。

在其中一个实施例中，所述运行与显示模块还用于基于子应用文档构建初始文档对象模型树；将所述JS脚本运行于所述代理沙箱，以使所述JS脚本对所述初始文档对象模型树中的节点进行操作，得到文档对象模型树；基于所述第一层叠样式表对象模型树和所述文档对象模型树生成渲染树；基于所述渲染树显示所述子应用。

在其中一个实施例中，所述装置还包括：

通信模块，还用于创建所述子应用的上下文；通过所述上下文创建主应用的第一监听事件；通过所述第一监听事件获取主应用消息，将所述主应用消息发送至所述子应用；通过所述上下文创建子应用的第二监听事件；通过所述第二监听事件获取所述子应用消息，将所述子应用消息发送至所述主应用。

第三方面，本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述方法的步骤。

第四方面，本申请还提供了一种计算机可读存储介质。所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述方法的步骤。

第五方面，本申请还提供了一种计算机程序产品。所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述方法的步骤。

上述微前端架构的实现方法、装置、计算机设备和存储介质，通过响应于子应用开启请求，将子应用挂载于主应用文档中的挂载位置上；在子应用完成挂载后，依据加载关键数据获取子应用对应的资源；资源包括样式数据和JS脚本；在挂载位置上创建与样式数据对应的隔离环境，以及在隔离环境中创建JS脚本对应的代理沙箱；将样式数据加载于隔离环境得到第一层叠样式表对象模型树；将JS脚本运行于代理沙箱得到文档对象模型树，基于第一层叠样式表对象模型树和文档对象模型树显示子应用，实现了一种简易的微前端架构，无需对子应用进行改动，即能实现对子应用进行挂载及显示。解决了现有技术中需对原有应用做大量改动才能适配，带来的应用兼容性差的问题，不仅如此，微前端架构降低了用户学习和整合不同应用的成本。

附图说明

图1为一个实施例中微前端架构的实现方法的应用环境图；

图2为一个实施例中微前端架构的实现方法的流程示意图；

图3为一个实施例中微前端架构的示意图；

图4为一个实施例中微前端架构的实现的流程示意图；

图5为一个实施例中获取资源步骤的流程示意图；

图6为一个实施例中显示子应用步骤的流程示意图；

图7为一个实施例中微前端架构的实现方法装置的结构框图；

图8为另一个实施例中微前端架构的实现方法装置的结构框图；

图9为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请实施例提供的微前端架构的实现方法，可以应用于如图1所示的应用环境中。其中，终端102通过网络与服务器104进行通信。数据存储系统可以存储服务器104需要处理的数据。数据存储系统可以集成在服务器104上，也可以放在云上或其他网络服务器上。本申请以终端102执行为例进行说明。

响应于子应用开启请求，终端102将子应用挂载于主应用文档中的挂载位置上；在子应用完成挂载后，终端102依据加载关键数据获取子应用对应的资源；资源包括样式数据和JS脚本；终端102在挂载位置上创建与样式数据对应的隔离环境，以及在隔离环境中创建JS脚本对应的代理沙箱；终端102将样式数据加载于隔离环境得到第一层叠样式表对象模型树；终端102将JS脚本运行于代理沙箱得到文档对象模型树，基于第一层叠样式表对象模型树和文档对象模型树显示子应用。

其中，终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备，物联网设备可为智能音箱、智能电视、智能空调、智能车载设备等。便携式可穿戴设备可为智能手表、智能手环、头戴设备等。服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

在一个实施例中，如图2所示，提供了一种微前端架构的实现方法，以该方法应用于图1中的终端102为例进行说明，包括以下步骤：

S202，响应于子应用开启请求，将子应用挂载于主应用文档中的挂载位置上。

其中，主应用文档可以指子应用对应的主应用的Html文档。挂载位置可以指用于挂载子应用的文档位置。图3为一个实施例中微前端架构的示意图；如图所示，本申请可以是基座应用(主应用)中包括子应用A和子应用B，子应用A下还可嵌套应用C，主应用的上下文为Root Context(根上下文)，子应用A的上下文为Context A。子应用B的上下文为Context B。应用C的上下文为Context C。该架构中的应用可在环境隔离中进行挂载和卸载，环境隔离可由iframe或shadowdom实现。路由管理模块可用于路由匹配与映射。资源加载模块可用于资源的加载与缓存。应用通信模块可用于应用之间的数据通信。图4为一个实施例中微前端架构的实现的流程示意图；如图所示，微前端架构启动后，进行子应用注册、子应用挂载、资源加载与处理、创建隔离环境、加载层叠样式表以及运行JS脚本，完成渲染后，在基座应用中显示子应用的相应页面。

具体地，终端响应于子应用开启请求，当子应用未配置路由参数时，将子应用挂载于主应用文档中的挂载位置上；当子应用已配置路由参数时，确定子应用名称对应的子应用地址；将子应用地址与主应用地址进行路由匹配，得到匹配结果；当匹配结果为匹配成功时，将子应用挂载于主应用文档中的挂载位置上。

其中，子应用名称可以指子应用对应的名称，例如，子应用名称可以为app1。子应用地址可以指子应用显示页面对应的地址。主应用地址可以指主应用显示页面对应的地址。匹配结果可以指路由匹配的结果，匹配结果包括匹配成功和匹配不成功。

在一个实施例中，当有多个子应用已配置路由参数时，对匹配成功的子应用进行挂载，对匹配失败的子应用，不对该子应用进行挂载处理，或对该子应用进行卸载处理。

例如，当子应用已配置路由参数时，对子应用app1进行路由匹配可以如下：

{app:app1,

match:(data)＝>

return window.location.hash.startsWith('#app1')//当终端中的浏览器hash值以'#app1开头时返回true，则匹配成功，反之则返回false；}

在一个实施例中，当匹配结果为匹配成功时，终端对子应用地址进行映射处理；当匹配结果为匹配不成功时，不对子应用进行挂载处理，或对子应用卸载处理。

其中，映射处理可以指对子应用地址进行转换处理。

在一个实施例中，在S202之前，终端确定子应用的子应用名称；获取挂载标签，并依据挂载标签确定子应用的挂载位置；调用注册函数，通过注册函数配置子应用的相关参数。

其中，挂载标签可以指主应用文档中用于标注子应用的挂载位置的标签。注册函数可以指用于对子应用进行注册的函数，例如，注册函数包括子应用入口的函数，生命函数和应用通讯的函数等等。

例如，在子应用挂载之前，子应用可以对下表中的参数进行注册：

S204，在子应用完成挂载后，依据加载关键数据获取子应用对应的资源；资源包括样式数据和JS脚本。

其中，加载关键数据可用于获取子应用对应的资源，加载关键数据可以指标签或关键字，加载关键数据包括第一标签和第二标签，例如，加载关键数据可以是style、script，@import和url()。第一标签可以指用于获取层叠样式表的标签，例如，第一标签可以是style。第二标签可以指用于获取JS脚本的标签，例如，第二标签可以是script。资源包括样式数据、JS脚本和子应用文档。样式数据包括层叠样式表和样式文件。层叠样式表(Cascading Style Sheets，CSS)是指一种用来表现HTML(标准通用标记语言的一个应用)等文件样式的计算机语言，层叠样式表可用于可以静态地修饰网页页面，配合各种脚本语言动态地对网页各元素进行格式化。样式文件可以指包含层叠样式表的文件。JS脚本可以指JavaScript的脚本语言。

具体地，在子应用完成挂载后，终端获取子应用的子应用文档，在子应用文档中确定加载关键数据，依据加载关键数据获取服务器中子应用对应的资源。

其中，子应用文档可以指子应用的Html文档。

在一个实施例中，依据加载关键数据获取服务器中子应用对应的资源包括终端可响应于获取资源操作，将加载关键数据发送至服务器，当服务器接收加载关键数据后，依次依据加载关键数据中的标签或关键字，查询存储的子应用对应的资源，再将该资源返回至终端。

S206，在挂载位置上创建与样式数据对应的隔离环境，以及在隔离环境中创建JS脚本对应的代理沙箱。

其中，隔离环境可以指用于隔离子应用的层叠样式表和JS脚本的环境，隔离环境可由iframe或Shadow DOM创建。代理沙箱可指隔离环境中用于隔离JS脚本的环境。

具体地，终端可以响应于创建隔离环境指令，在挂载位置上，依据样式数据和子应用文档的大小，创建对应的隔离环境，在创建完与样式数据与子应用文档对应的隔离环境后，在隔离环境中，依据JS脚本的大小创建对应的代理沙箱。

S208，将样式数据加载于隔离环境得到第一层叠样式表对象模型树。

其中，第一层叠样式表对象模型树可以基于子应用的样式数据加载后生成的层叠样式表对象模型(CSS Object Model，CSSOM)树。

具体地，终端从样式数据中读取顶层样式；将顶层样式挂载于主应用文档上，以使主应用的第二层叠样式表对象模型树正常运行；将样式数据中除顶层样式之外的剩余数据加载于隔离环境，得到第一层叠样式表对象模型树。

其中，顶层样式可以指样式数据中挂载于主应用文档中的样式。第二层叠样式表对象模型树可指主应用的层叠样式表对象模型树，第一层叠样式表对象模型树与第二层叠样式表对象模型树是不同的层叠样式表对象模型树。

在一个实施例中，终端可响应于数据加载指令，将子应用文档和样式数据加载于隔离环境得到第一层叠样式表对象模型树。

S210，将JS脚本运行于代理沙箱得到文档对象模型树，基于第一层叠样式表对象模型树和文档对象模型树显示子应用。

其中，文档对象模型树可以指基于子应用文档和JS脚本生成的文档对象模型(Document Object Model，DOM)树。

在一个实施例中，终端创建子应用的上下文；通过上下文创建主应用的第一监听事件；通过第一监听事件获取主应用消息，将主应用消息发送至子应用；通过上下文创建子应用的第二监听事件；通过第二监听事件获取子应用消息，将子应用消息发送至主应用。

其中，上下文可以指应用启动之后创建的上下文(context)，上下文可用于父应用与子应用之间的通信，父应用可以指主应用。第一监听事件可指用于监听主应用消息的监听事件。主应用消息可以指主应用生成的消息。第二监听事件可以指监听子应用消息的监听事件。子应用消息可以指子应用生成的消息。

上述微前端架构的实现方法中，通过响应于子应用开启请求，将子应用挂载于主应用文档中的挂载位置上；在子应用完成挂载后，依据加载关键数据获取子应用对应的资源；资源包括样式数据和JS脚本；在挂载位置上创建与样式数据对应的隔离环境，以及在隔离环境中创建JS脚本对应的代理沙箱；将样式数据加载于隔离环境得到第一层叠样式表对象模型树；将JS脚本运行于代理沙箱得到文档对象模型树，基于第一层叠样式表对象模型树和文档对象模型树显示子应用，实现了一种简易的微前端架构，无需对子应用进行改动，即能实现对子应用进行挂载及显示。解决了现有技术中需对原有应用做大量改动才能适配，带来的应用兼容性差的问题，不仅如此，微前端架构降低了用户学习和整合不同应用的成本。

在一个实施例中，如图5所示，获取资源步骤包括：

S502，检测子应用对应的子应用文档中的第一标签和第二标签。

具体地，终端可响应于获取资源指令，确定子应用对应的子应用文档，依次检测子应用文档中的第一标签、以及第二标签。

S504，依据第一标签将获取层叠样式表。

具体地，终端可依据第一标签获取子应用文档中对应的层叠样式表。

S506，检测层叠样式表中的文件引用地址，并依据文件引用地址获取对应的样式文件；当样式文件中包含其它文件引用地址时，继续依据其它文件引用地址获取对应的样式文件。

其中，文件引用地址可以指样式文件的地址。其他文件引用地址可以指其他的文件引用地址。

在一个实施例中，S506之后，若依据其他文件引用地址获取的对应样式文件中还有另外的文件引用地址，则依据该另外的文件引用地址，继续获取对应的样式文件，直到所有的样式文件全部获取完毕。

S508，更改层叠样式表和样式文件中的图片引用地址。

其中，图片引用地址可以指引用图片的地址。

具体地，终端依次确定层叠样式表和样式文件中的历史图片引用地址，再依据当前层叠样式表与样式文件的所处的数据位置和历史图片引用地址，确定层叠样式表和样式文件中的图片引用地址。

其中，历史图片引用地址是层叠样式表和样式文件被获取之前对应的图片引用地址。

S510，将更改后的层叠样式表和样式文件组合成样式数据。

具体地，终端可在子应用文档中，将更改后的层叠样式表和更改后的样式文件进行平铺处理，得到样式数据。

S512，依据第二标签获取JS脚本。

具体地，终端依据第二标签获取子应用文档中的JS脚本。

在一个实施例中，在S512之后，终端将样式数据包裹于第一标签中；将JS脚本包裹于第二标签中；将包含第一标签和第二标签的子应用文档进行缓存；在创建完隔离环境和代理沙箱之后，从缓存的子应用文档中读取样式数据和JS脚本；执行将样式数据加载于隔离环境得到第一层叠样式表对象模型树，以及执行将JS脚本运行于代理沙箱得到文档对象模型树。

本实施例中，通过检测子应用对应的子应用文档中的第一标签和第二标签，依据第一标签将获取层叠样式表，检测层叠样式表中的文件引用地址，并依据文件引用地址获取对应的样式文件；更改层叠样式表和样式文件中的图片引用地址，将更改后的层叠样式表和样式文件组合成样式数据，依据第二标签获取JS脚本。通过第一标签和第二标签实现了精确的获取了对应的资源，为后续的子应用显示做铺垫。

在一个实施例中，如图6所示，显示子应用步骤包括：

S502，基于子应用文档构建初始文档对象模型树。

其中，初始文档对象模型树可以指基于子应用文档初步构建的文档对象模型树。

具体地，终端可以响应于显示子应用的指令，读取子应用文档，确定子应用文档中对应的标签，将标签转换为用于构建文档对象模型树的节点，基于该节点构建初始文档对象模型树。

S504，将JS脚本运行于代理沙箱，以使JS脚本对初始文档对象模型树中的节点进行操作，得到文档对象模型树。

S506，基于第一层叠样式表对象模型树和文档对象模型树生成渲染树。

其中，渲染树可以由第一层叠样式表对象模型树和文档对象模型树组合成的渲染树，渲染树可用于将应用进行显示。

具体地，终端可以将第一层叠样式表对象模型树和文档对象模型树合并生成渲染树。

S508，基于渲染树显示子应用。

具体地，终端依据渲染树进行布局处理和绘制处理，以显示子应用。

本实施例中，通过基于子应用文档构建初始文档对象模型树，将JS脚本运行于代理沙箱，以使JS脚本对初始文档对象模型树中的节点进行操作，得到文档对象模型树，基于第一层叠样式表对象模型树和文档对象模型树生成渲染树，基于渲染树显示子应用。能够提升显示子应用的效率。

作为一个示例，本实施例如下：

图4为一个实施例中微前端架构的实现的流程示意图；本方案中子应用注册可以是调用本方案的js库中的registerMicroApp这个api输入配置项，得到子应用名称为app的custom elements(自定义标签)，利用它的生命周期回调函数控制应用何时创建和插入文档。在子应用的html文档中引入本方案的js库，同时在htm结构中使用<app>标签确定一个子应用要挂载的位置，设置其唯一名称，调用注册方法完成指定entry(子应用入口)等配置即可启动，主要配置项见下表，配置项目中仅name和source为必须，路由和通信模块按需使用。

路由模块设计是可选的，主要有match，map，response三个配置项，当注册一个路由管理器。通过match方法进行匹配，指定某个子应用在什么路由状态下执行加载或卸载操作。通过map方法进行路由映射，子应用分配到的url是路由管理器map的结果。子应用内部的代码可以正常改变url来改变界面显示，这种改变不会影响浏览器的url变化，但会调用response方法，这种设计可以让外部记录子应用的url，方便处理用户刷新浏览器丢失子应用页面等问题。

资源加载与处理模块中设计了专门接口来加载并处理网页资源，以子应用的index.html作为子应用的入口，去解析index.html的内容，通过检测style和script，@import，url()等标签和关键字，再次下钻请求资源直到全部加载完毕，并缓存到内存中。样式文件加载到当前环境的文档中，JS脚本则在放到沙箱中运行，保证子应用正常运行。其中，style对应的CSS样式，script对应的是js脚本，@import()是CSS中引用样式文件(CSS文件)，括号里为文件引用地址，url()是CSS中图片引用，括号里为图片引用地址。在网页中加载CSS样式和js脚本的方式是使用style和script标签包裹放在html结构中，对于@import()的外部CSS样式就需要根据引用地址再次获取，再次获取的内容中可能还有引用，所以这里叫下钻获取。每次获取的样式表会放在style标签中，放到当前环境的文档中，这里的当前环境文档其实就是当前子应用的html文档。这样处理后CSS的相对地址发生了改变，因此在加载过程中需要重写url()的图片引用地址，以保证能正确的加载出图片。

环境隔离模块主要实现样式隔离和JS运行隔离。在本方案中，设计了iframe和Shadow DOM这两种隔离方案可供选择，不同方案通过注册参数进行配置。其中，iframe方案将子应用放在一个沙箱模式下的iframe中，好处在于稳定，兼容性好，但iframe形成了封闭文档，弹窗无法全局覆盖，所以iframe模式仅适合子应用视口占屏幕绝大部分的情况。

Shadow DOM方案将子应用放在一个Shadow DOM中，CSS被加载在这个Shadow DOM内部实现了样式隔离。因为样式只在Shadow DOM内，所以被挂载到外部的dom丢失了样式，针对这个问题，本方法设计了专门的配置项来解决，通过传入过滤方法决定哪些样式将被挂载在顶层文档上，以保证主应用文档的dom样式的正常运行。创建完隔离环境后，即可将样式数据和JS脚本置于浏览器，以使浏览器完成子应用的渲染，显示子应用。

通信模块，在本方案中，应用在启动之后会创建自己的context(上下文)，每一层的应用的运行环境都对应一个context，context本质是一个js对象，里面绑定了消息监听和分发的方法，它的主要作用就是帮助父子应用进行通信，子应用之间也可以通信，但是需要借助父应用。当应用间需要共享一些数据时，需通过消息传递的方式来实现。最顶层的context被称为root context，可以在所有应用中被读取，使用root context可以向整个应用链广播消息。

应该理解的是，虽然如上的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

基于同样的发明构思，本申请实施例还提供了一种用于实现上述所涉及的微前端架构的实现方法的微前端架构的实现装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个微前端架构的实现装置实施例中的具体限定可以参见上文中对于微前端架构的实现方法的限定，在此不再赘述。

在一个实施例中，如图7所示，提供了一种微前端架构的实现装置，包括：挂载模块702、获取资源模块704、创建模块706、加载模块708和运行与显示模块710，其中：

挂载模块702，用于响应于子应用开启请求，将子应用挂载于主应用文档中的挂载位置上；

获取资源模块704，用于在子应用完成挂载后，依据加载关键数据获取子应用对应的资源；资源包括样式数据和JS脚本；

创建模块706，用于在挂载位置上创建与样式数据对应的隔离环境，以及在隔离环境中创建JS脚本对应的代理沙箱；

加载模块708，用于将样式数据加载于隔离环境得到第一层叠样式表对象模型树；

运行与显示模块710，用于将JS脚本运行于代理沙箱得到文档对象模型树，基于第一层叠样式表对象模型树和文档对象模型树显示子应用。

在其中一个实施例中，挂载模块还用于响应于子应用开启请求，当子应用未配置路由参数时，将子应用挂载于主应用文档中的挂载位置上；当子应用已配置路由参数时，确定子应用名称对应的子应用地址；将子应用地址与主应用地址进行路由匹配，得到匹配结果；当匹配结果为匹配成功时，将子应用挂载于主应用文档中的挂载位置上。

在其中一个实施例中，挂载模块还用于当匹配结果为匹配成功时，对子应用地址进行映射处理；当匹配结果为匹配不成功时，不对子应用进行挂载处理，或对子应用卸载处理。

在其中一个实施例中，加载关键数据包括第一标签和第二标签；样式数据包括层叠样式表和样式文件；获取资源模块还用于检测子应用对应的子应用文档中的第一标签和第二标签；依据第一标签将获取层叠样式表；检测层叠样式表中的文件引用地址，并依据文件引用地址获取对应的样式文件；当样式文件中包含其它文件引用地址时，继续依据其它文件引用地址获取对应的样式文件；更改层叠样式表和样式文件中的图片引用地址；将更改后的层叠样式表和样式文件组合成样式数据；依据第二标签获取JS脚本。

在其中一个实施例中，获取资源模块还用于将样式数据包裹于第一标签中；将JS脚本包裹于第二标签中；将包含第一标签和第二标签的子应用文档进行缓存；在创建完隔离环境和代理沙箱之后，从缓存的子应用文档中读取样式数据和JS脚本；执行将样式数据加载于隔离环境得到第一层叠样式表对象模型树，以及执行将JS脚本运行于代理沙箱得到文档对象模型树。

在其中一个实施例中，加载模块还用于从样式数据中读取顶层样式；将顶层样式挂载于主应用文档上，以使主应用的第二层叠样式表对象模型树正常运行；将样式数据中除顶层样式之外的剩余数据加载于隔离环境，得到第一层叠样式表对象模型树。

在其中一个实施例中，运行与显示模块还用于基于子应用文档构建初始文档对象模型树；将JS脚本运行于代理沙箱，以使JS脚本对初始文档对象模型树中的节点进行操作，得到文档对象模型树；基于第一层叠样式表对象模型树和文档对象模型树生成渲染树；基于渲染树显示子应用。

在一个实施例中，如图8所示，该微前端架构的实现装置，还包括：注册模块712，通信模块714，其中：

注册模块712，用于确定子应用的子应用名称；获取挂载标签，并依据挂载标签确定子应用的挂载位置；调用注册函数，通过注册函数配置子应用的相关参数。

通信模块714，还用于创建子应用的上下文；通过上下文创建主应用的第一监听事件；通过第一监听事件获取主应用消息，将主应用消息发送至子应用；通过上下文创建子应用的第二监听事件；通过第二监听事件获取子应用消息，将子应用消息发送至主应用。

上述实施例，通过响应于子应用开启请求，将子应用挂载于主应用文档中的挂载位置上；在子应用完成挂载后，依据加载关键数据获取子应用对应的资源；资源包括样式数据和JS脚本；在挂载位置上创建与样式数据对应的隔离环境，以及在隔离环境中创建JS脚本对应的代理沙箱；将样式数据加载于隔离环境得到第一层叠样式表对象模型树；将JS脚本运行于代理沙箱得到文档对象模型树，基于第一层叠样式表对象模型树和文档对象模型树显示子应用，实现了一种简易的微前端架构，无需对子应用进行改动，即能实现对子应用进行挂载及显示。解决了现有技术中需对原有应用做大量改动才能适配，带来的应用兼容性差的问题，不仅如此，微前端架构降低了用户学习和整合不同应用的成本。

上述微前端架构的实现装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端或服务器，本实施例以该计算机设备为终端进行说明，其内部结构图可以如图9所示。该计算机设备包括处理器、存储器、输入/输出接口、通信接口、显示单元和输入装置。其中，处理器、存储器和输入/输出接口通过系统总线连接，通信接口、显示单元和输入装置通过输入/输出接口连接到系统总线。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的输入/输出接口用于处理器与外部设备之间交换信息。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、移动蜂窝网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种微前端架构的实现方法。该计算机设备的显示单元用于形成视觉可见的画面，可以是显示屏、投影装置或虚拟现实成像装置，显示屏可以是液晶显示屏或电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图9中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各实施例。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述各实施例。

在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述各实施例。

需要说明的是，本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据，且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory，MRAM)、铁电存储器(Ferroelectric Random Access Memory，FRAM)、相变存储器(Phase Change Memory，PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory，DRAM)等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (12)

1.一种微前端架构的实现方法，其特征在于，所述方法包括：

响应于子应用开启请求，将子应用挂载于主应用文档中的挂载位置上；

在所述子应用完成挂载后，依据加载关键数据获取所述子应用对应的资源；所述资源包括样式数据和JS脚本；

在所述挂载位置上创建与所述样式数据对应的隔离环境，以及在所述隔离环境中创建所述JS脚本对应的代理沙箱；

将所述样式数据加载于所述隔离环境得到第一层叠样式表对象模型树；

将所述JS脚本运行于所述代理沙箱得到文档对象模型树，基于所述第一层叠样式表对象模型树和所述文档对象模型树显示所述子应用。

2.根据权利要求1所述的方法，其特征在于，所述将子应用挂载于主应用文档中的挂载位置上之前，所述方法还包括：

确定所述子应用的子应用名称；

获取挂载标签，并依据所述挂载标签确定所述子应用的挂载位置；

调用注册函数，通过所述注册函数配置所述子应用的相关参数。

3.根据权利要求2所述的方法，其特征在于，所述响应于子应用开启请求，将子应用挂载于主应用文档中的挂载位置上，包括：

响应于子应用开启请求，当所述子应用未配置路由参数时，将子应用挂载于主应用文档中的挂载位置上；

当所述子应用已配置路由参数时，确定所述子应用名称对应的子应用地址；将所述子应用地址与主应用地址进行路由匹配，得到匹配结果；当所述匹配结果为匹配成功时，将子应用挂载于主应用文档中的挂载位置上。

4.根据权利要求3所述的方法，其特征在于，所述方法还包括：

当所述匹配结果为匹配成功时，对所述子应用地址进行映射处理；

当所述匹配结果为匹配不成功时，不对所述子应用进行挂载处理，或对所述子应用卸载处理。

5.根据权利要求1所述的方法，其特征在于，所述加载关键数据包括第一标签和第二标签；所述样式数据包括层叠样式表和样式文件；所述依据加载关键数据获取所述子应用对应的资源包括：

检测所述子应用对应的子应用文档中的第一标签和第二标签；

依据所述第一标签将获取所述层叠样式表；

检测所述层叠样式表中的文件引用地址，并依据所述文件引用地址获取对应的样式文件；当所述样式文件中包含其它文件引用地址时，继续依据其它文件引用地址获取对应的样式文件；

更改所述层叠样式表和所述样式文件中的图片引用地址；

将更改后的所述层叠样式表和所述样式文件组合成样式数据；

依据所述第二标签获取所述JS脚本。

6.根据权利要求5所述的方法，其特征在于，所述方法还包括：

将所述样式数据包裹于所述第一标签中；

将所述JS脚本包裹于所述第二标签中；

将包含所述第一标签和所述第二标签的子应用文档进行缓存；

在创建完所述隔离环境和所述代理沙箱之后，从缓存的所述子应用文档中读取所述样式数据和所述JS脚本；

执行所述将所述样式数据加载于所述隔离环境得到第一层叠样式表对象模型树，以及执行所述将所述JS脚本运行于所述代理沙箱得到文档对象模型树。

7.根据权利要求1所述的方法，其特征在于，所述将所述样式数据加载于所述隔离环境得到第一层叠样式表对象模型树包括：

从所述样式数据中读取顶层样式；

将所述顶层样式挂载于所述主应用文档上，以使主应用的第二层叠样式表对象模型树正常运行；

将所述样式数据中除所述顶层样式之外的剩余数据加载于所述隔离环境，得到第一层叠样式表对象模型树。

8.根据权利要求1所述的方法，其特征在于，所述将所述JS脚本运行于所述代理沙箱得到文档对象模型树，基于所述第一层叠样式表对象模型树和所述文档对象模型树显示所述子应用，包括：

基于子应用文档构建初始文档对象模型树；

将所述JS脚本运行于所述代理沙箱，以使所述JS脚本对所述初始文档对象模型树中的节点进行操作，得到文档对象模型树；

基于所述第一层叠样式表对象模型树和所述文档对象模型树生成渲染树；

基于所述渲染树显示所述子应用。

9.根据权利要求1所述的方法，其特征在于，所述方法还包括：

创建所述子应用的上下文；

通过所述上下文创建主应用的第一监听事件；通过所述第一监听事件获取主应用消息，将所述主应用消息发送至所述子应用；

通过所述上下文创建子应用的第二监听事件；通过所述第二监听事件获取所述子应用消息，将所述子应用消息发送至所述主应用。

10.一种微前端架构的实现装置，其特征在于，所述装置包括：

挂载模块，用于响应于子应用开启请求，将子应用挂载于主应用文档中的挂载位置上；

获取资源模块，用于在所述子应用完成挂载后，依据加载关键数据获取所述子应用对应的资源；所述资源包括样式数据和JS脚本；

创建模块，用于在所述挂载位置上创建与所述样式数据对应的隔离环境，以及在所述隔离环境中创建所述JS脚本对应的代理沙箱；

加载模块，用于将所述样式数据加载于所述隔离环境得到第一层叠样式表对象模型树；

运行与显示模块，用于将所述JS脚本运行于所述代理沙箱得到文档对象模型树，基于所述第一层叠样式表对象模型树和所述文档对象模型树显示所述子应用。

11.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至9中任一项所述的方法的步骤。

12.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至9中任一项所述的方法的步骤。

Images