CN113760324A - 构建微前端应用的方法和装置 - Google Patents

Abstract

本发明公开了一种构建微前端应用的方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：定义微应用标签，并通过微应用标签创建阴影文档对象模型以生成微应用web原生组件；响应于微前端应用构建操作，根据子应用的域名地址获取子应用域名下的静态资源；将静态资源插入到阴影文档对象模型中，以将子应用的元素渲染到阴影文档对象模型中，以在主应用中引入子应用。该实施方式能够解决选择器冲突问题，以及子应用与主应用DOM结构割离的问题，且无需监听路由变化，在页面任何地方都可以渲染，从而降低配置门槛，实现一行代码即可渲染微前端应用，通信效率高，实现灵活。

Description

构建微前端应用的方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种构建微前端应用的方法和装置。

背景技术

随着单体应用在长时间跨度下，参与的人员、团队增多，项目变迁和功能增加演变成巨石应用，随之带来的就是应用难以维护的问题，微前端就是针对这类问题的解决方案。微前端是一种通过多个团队独立开发和部署应用的方式共同构建现代化web应用的技术手段及方法策略。目前常用的微前端应用的实现方案多是基于HTML中的iframe标签、single-spa和qiankun等微前端框架来实现的。

然而，目前通过iframe或single-spa、qiankun等方案实现微前端并不完美。single-spa、qiankun等微前端框架会存在选择器冲突问题，iframe会存在渲染的子应用与主应用DOM结构割离的问题。

发明内容

有鉴于此，本发明实施例提供一种构建微前端应用的方法和装置，能够解决single-spa、qiankun等微前端框架无法解决的选择器冲突问题，以及iframe渲染的子应用与主应用DOM结构割离的问题，且无需监听路由变化，在页面任何地方都可以渲染，从而降低配置门槛，实现一行代码即可渲染微前端应用，通信效率高，实现灵活。

为实现上述目的，根据本发明实施例的一个方面，提供了一种构建微前端应用的方法。

一种构建微前端应用的方法，所述微前端应用包括主应用和子应用，所述方法包括：

定义微应用标签，并通过所述微应用标签创建阴影文档对象模型以生成微应用web原生组件；

响应于微前端应用构建操作，根据所述子应用的域名地址获取所述子应用域名下的静态资源；

将所述静态资源插入到所述阴影文档对象模型中，以将所述子应用的元素渲染到所述阴影文档对象模型中，以在所述主应用中引入所述子应用。

可选地，定义微应用标签之后，还包括：

注册监听方法以监听所述微应用标签是否被渲染或被卸载。

可选地，在将所述静态资源插入到所述阴影文档对象模型中之前，还包括：

将所述子应用的页面文档对象进行重写，当从所述子应用中获取元素时，将指向从所述阴影文档对象模型中获取元素。

可选地，还包括：

当所述子应用的域名地址发生变化时，进行所述子应用的静态资源更新。

可选地，进行所述子应用的静态资源更新包括：

生成自定义的子应用卸载事件，以使所述子应用通过监听到的卸载事件进行所述子应用的卸载；

根据变化后的域名地址获取更新后的静态资源，将获取到的更新后的静态资源插入到所述阴影文档对象模型中以进行所述子应用的静态资源更新。

可选地，还包括：

当所述子应用被所述主应用卸载时，生成自定义的子应用卸载事件，以使所述子应用通过监听到的卸载事件进行所述子应用的卸载。

根据本发明实施例的另一方面，提供了一种构建微前端应用的装置。

一种构建微前端应用的装置，所述微前端应用包括主应用和子应用，所述装置包括：

组件创建模块，用于定义微应用标签，并通过所述微应用标签创建阴影文档对象模型以生成微应用web原生组件；

资源获取模块，用于响应于微前端应用构建操作，根据所述子应用的域名地址获取所述子应用域名下的静态资源；

元素渲染模块，用于将所述静态资源插入到所述阴影文档对象模型中，以将所述子应用的元素渲染到所述阴影文档对象模型中，以在所述主应用中引入所述子应用。

可选地，还包括监听注册模块，用于：

在定义微应用标签之后，注册监听方法以监听所述微应用标签是否被渲染或被卸载。

可选地，还包括文件重写模块，用于：

在将所述静态资源插入到所述阴影文档对象模型中之前，将所述子应用的页面文档对象进行重写，当从所述子应用中获取元素时，将指向从所述阴影文档对象模型中获取元素。

可选地，还包括子应用更新模块，用于：

当所述子应用的域名地址发生变化时，进行所述子应用的静态资源更新。

可选地，所述应用更新模块还用于：

生成自定义的子应用卸载事件，以使所述子应用通过监听到的卸载事件进行所述子应用的卸载；

根据变化后的域名地址获取更新后的静态资源，将获取到的更新后的静态资源插入到所述阴影文档对象模型中以进行所述子应用的静态资源更新。

可选地，还包括子应用卸载模块，用于：

当所述子应用被所述主应用卸载时，生成自定义的子应用卸载事件，以使所述子应用通过监听到的卸载事件进行所述子应用的卸载。

根据本发明实施例的又一方面，提供了一种构建微前端应用的电子设备。

一种构建微前端应用的电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例所提供的构建微前端应用的方法。

根据本发明实施例的再一方面，提供了一种计算机可读介质。

一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明实施例所提供的构建微前端应用的方法。

上述发明中的一个实施例具有如下优点或有益效果：通过定义微应用标签，并通过微应用标签创建阴影文档对象模型以生成微应用web原生组件；响应于微前端应用构建操作，根据子应用的域名地址获取子应用域名下的静态资源；将静态资源插入到阴影文档对象模型中，以将子应用的元素渲染到阴影文档对象模型中，以在主应用中引入子应用，通过使用web原生组件Web Components进行微前端的封装渲染，可通过创建的阴影文档对象模型来进行数据隔离，从而解决了single-sp a、qiankun等微前端框架无法解决的选择器冲突问题；并且Web Comp onents属于当前页面的DOM结构，可以解决iframe渲染的子应用与主应用DOM结构割离的问题。另外，Web Components作为web原生组件，可以突破web前端框架限制，无需监听路由变化，在页面任何地方都可以渲染，从而降低配置门槛，实现一行代码即可渲染微前端应用，通信效率高，实现灵活。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的构建微前端应用的方法的主要步骤示意图；

图2是本发明实施例的构建微前端应用的实现流程示意图；

图3是根据本发明实施例的构建微前端应用的装置的主要模块示意图；

图4是本发明实施例可以应用于其中的示例性系统架构图；

图5是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

本发明中所涉及到的技术术语解释如下：

Web Components：Web原生组件，由Custom Elements、Shadow Dom等构成；

HTML：超文本标记语言(Hyper Text Markup Language，简称HTML)；

DOM：文档对象模型(Document Object Modal，简称DOM)；

Custom Elements：自定义标签元素；

Shadow Dom：阴影DOM；

Fetch：浏览器自带的请求数据的方法；

getAttribute：浏览器自带的获取元素属性的方法；

customEvent：浏览器自带的创建自定义事件的方法。

目前通过iframe或single-spa、qiankun等方案实现微前端时并不完美，经分析，缺点主要表现如下：

1、iframe

iframe标签的隔离性无法被突破，导致DOM结构被割离，应用上下文无法被共享，数据通信低效，从而带来开发体验、产品体验的问题；

2、single-spa、qiankun等微前端框架

single-spa、qiankun等微前端框架可以解决iframe带来的问题，但是虽然其模拟沙箱功能虽然可以带来Javascript、CSS样式隔离，然而对于Class、ID等选择器的冲突无法解决，对于频繁操作DOM的项目带来风险。使用路由监听匹配渲染的机制导致配置复杂，不够灵活，子应用需要修改渲染方式和构建配置。

为了解决上述存在的技术问题，本发明使用Web Components进行微前端的封装渲染。Web Components自带的沙箱隔离属性可以解决si ngle-spa、qiankun等微前端框架无法解决的选择器冲突问题，并且WebComponents属于当前页面的DOM结构，可以避免iframe渲染的子应用与主应用DOM结构割离的问题。

Web Components作为web原生组件，可以突破web前端框架限制，无需监听路由变化，在页面任何地方都可以渲染，从而降低配置门槛，实现一行代码即可渲染微前端应用。

微前端应用分为主应用(也可以称基座应用)和子应用，它们是不同的浏览器页面，主应用(也就是浏览器的页面)将其它页面融合到自己的页面中渲染，被融合的页面叫子页面，这样在主应用中可以同时看到主应用的页面和子应用的页面。本发明的微前端应用的构建方法的整体流程为：通过定义封装一个名称为“micro-app”的Web Co mponents组件，在项目中使用这个组件时根据传入的子应用资源路径path属性请求子应用的静态资源，并将其渲染到当前组件的Shadow Do m中，从而实现了在主应用中引入子应用。

图1是根据本发明实施例的构建微前端应用的方法的主要步骤示意图。如图1所示，本发明实施例的构建微前端应用的方法主要包括如下的步骤S101至步骤S103。

步骤S101：定义微应用标签，并通过微应用标签创建阴影文档对象模型以生成微应用web原生组件。根据本发明的实施例，在定义微应用标签之后，还可以注册监听方法以监听微应用标签是否被渲染或被卸载。在具体实施时，可通过调用Custom Elements的define方法创建名称为micro-app的标签，并注册connectedCallback方法用来监听标签是否被渲染，注册disconnectedCallback方法监听标签是否被卸载。在定义微应用标签后，再通过调用micro-app标签自带的attachShadow方法创建阴影文档对象模型Shadow Dom，Shadow Dom作为一个容器，所有子应用的静态文件和最终渲染的元素都将插入Shadow Dom中，它将当前子应用和外部隔离，防止全局变量、样式、选择器污染，从而实现沙箱效果，此时micro-app标签才成为一个标准的web原生组件(即：Web Components组件)，后文介绍中将其称作micro-app组件。

在创建了micro-app组件之后，即可使用micro-app组件来渲染微前端的子应用，通过在主应用中引入并渲染micro-app组件以将子应用引入到主应用中。在主应用中引入并渲染micro-app组件时，其使用方式例如是：<micro-app path＝'//localhost:3001'></micro-app>。该使用方式具体可分为如下的步骤S102和S103。

步骤S102：响应于微前端应用构建操作，根据子应用的域名地址获取子应用域名下的静态资源。当micro-app组件被渲染时，之前注册的connectedCallback方法会被调用，通过getAttribute('path')获取path属性的值，其中，该path属性的值即为子应用的域名地址。之后，根据path属性的值使用fetch方法即可获取子应用域名下的静态资源，包括html、javascript、css等多种资源。

在获取到子应用域名下的静态资源，将静态资源插入到阴影文档对象模型中之前，还需要将子应用的页面文档对象进行重写，当从子应用中获取元素时，将指向从阴影文档对象模型中获取元素。这是因为document只能获取外部主应用的元素，所以需要将子应用的documen t进行重写，当在子应用中获取元素时document将指向Shadow Dom。document是指html中的文档对象，每一个载入浏览器的页面都会成为一个document，它自带很多方法，比如对元素的增、删、改、查。因为Shadow Dom是封闭的环境，document无法获取ShadowDom内部的元素，只能拿到外部的，而通常子应用会大量使用document去操作元素，所以需要对document进行一些修改。

步骤S103：将静态资源插入到阴影文档对象模型中，以将子应用的元素渲染到阴影文档对象模型中，以在主应用中引入子应用。将获取的静态资源插入到容器Shadow Dom中，子应用即可正常运行，其元素将渲染到当前的Shadow Dom中。

由于在微前端应用的运行过程中，还会涉及到子应用资源的更新和子应用的卸载，因此，本发明的构建微前端应用的方法还可以包括：当子应用的域名地址发生变化时，进行子应用的静态资源更新。当pat h属性的值发生变化时，micro-app组件会判断变化后的新值与变化前的值是否域名相同，如果只是参数或哈希值发生变化则认为子应用的域名地址是相同的，此时不执行子应用资源的更新操作，子应用继续正常运行；否则，即认为子应用的域名地址不同，需要进行子应用资源的更新。

根据本发明的实施例，在进行子应用的静态资源更新时，需要执行以下的操作：

1、生成自定义的子应用卸载事件，以使子应用通过监听到的卸载事件进行子应用的卸载。具体地，通过customEvent定义名称为unmoun t(卸载)的自定义事件并发送，子应用通过监听unmount卸载事件进行卸载相关操作，如数据清空、事件解绑，子应用被卸载；

2、根据变化后的域名地址获取更新后的静态资源，将获取到的更新后的静态资源插入到阴影文档对象模型中以进行子应用的静态资源更新。根据变化后的path属性的值通过fetch请求静态资源，包括html、javascript、css等，并对document进行重写，当在子应用中获取元素时document将指向Shadow Dom。将获取到的新的静态资源插入到容器Sha dowDom中，运行新的子应用。

同样地，本发明的构建微前端应用的方法还可以包括：

当子应用被主应用卸载时，生成自定义的子应用卸载事件，以使子应用通过监听到的卸载事件进行子应用的卸载。当micro-app组件被主应用卸载时，会自动触发执行disconnectedCallback方法，在这个方法中通过customEvent定义名称为unmount的自定义事件并发送，子应用通过监听unmount事件进行卸载相关操作，如数据清空、事件解绑，子应用被卸载。

根据以上的描述可以看出，本发明中主应用和子应用的耦合性非常小，卸载等操作也是渐进式可选的，只需要在使用的地方添加<micr o-app path＝'域名地址'></micro-app>即可渲染一个微前端的子应用，可以简洁地实现微前端构建。

图2是本发明实施例的构建微前端应用的实现流程示意图。如图2所示，本发明实施例在构建微前端应用时，首先，要创建一个Web Co mponents组件，具体地，可调用CustomElements的define方法定义名称为micro-app的HTML标签，同时还注册connectedCallback方法用来监听标签是否被渲染，注册disconnectedCallback方法监听组件是否被卸载。再通过调用micro-app标签自带的attachShadow方法创建可以与外部隔离的容器元素ShadowDom。

然后，主应用中引入并渲染micro-app组件。当micro-app组件被渲染并插入DOM结构中时会自动调用connectedCallback方法，通过getAtt ribute('path')获取path属性的值；根据path属性的值通过fetch方法请求获取子应用域名下的静态资源，包括html、javascript、css等。之后，对子应用的document进行重写，当使用document选取元素时document将重定向到Shadow Dom上。之后，将获取的静态资源插入到容器Shadow Dom中，渲染子应用。之后，即可运行微前端应用。

在微前端应用的运行中，若出现path属性的值发生变化，则判断子应用的域名是否变化，若域名发生变化，则卸载旧的子应用并重新加载新的子应用，否则，不执行任何操作。若出现组件被卸载，则自动触发执行disconnectedCallback方法，在这个方法中通过customEvent定义名称为unmount的自定义事件并发送，子应用通过监听unmount事件进行数据清空、事件解绑等卸载相关操作，当前子应用结束进程。

图3是根据本发明实施例的构建微前端应用的装置的主要模块示意图。如图3所示，本发明实施例的构建微前端应用的装置300主要包括组件创建模块301、资源获取模块302和元素渲染模块303。

组件创建模块301，用于定义微应用标签，并通过所述微应用标签创建阴影文档对象模型以生成微应用web原生组件；

资源获取模块302，用于响应于微前端应用构建操作，根据所述子应用的域名地址获取所述子应用域名下的静态资源；

元素渲染模块303，用于将所述静态资源插入到所述阴影文档对象模型中，以将所述子应用的元素渲染到所述阴影文档对象模型中，以在所述主应用中引入所述子应用。

根据本发明的一个实施例，构建微前端应用的装置300还包括监听注册模块(图中未示出)，用于：

在定义微应用标签之后，注册监听方法以监听所述微应用标签是否被渲染或被卸载。

根据本发明的另一个实施例，构建微前端应用的装置300还包括文件重写模块(图中未示出)，用于：

在将所述静态资源插入到所述阴影文档对象模型中之前，将所述子应用的页面文档对象进行重写，当从所述子应用中获取元素时，将指向从所述阴影文档对象模型中获取元素。

根据本发明的又一个实施例，构建微前端应用的装置300还包括子应用更新模块(图中未示出)，用于：

当所述子应用的域名地址发生变化时，进行所述子应用的静态资源更新。

根据本发明的又一个实施例，所述应用更新模块(图中未示出)还用于：

生成自定义的子应用卸载事件，以使所述子应用通过监听到的卸载事件进行所述子应用的卸载；

根据变化后的域名地址获取更新后的静态资源，将获取到的更新后的静态资源插入到所述阴影文档对象模型中以进行所述子应用的静态资源更新。

根据本发明的再一个实施例，构建微前端应用的装置300还包括子应用卸载模块(图中未示出)，用于：

当所述子应用被所述主应用卸载时，生成自定义的子应用卸载事件，以使所述子应用通过监听到的卸载事件进行所述子应用的卸载。

根据本发明实施例的技术方案，通过定义微应用标签，并通过微应用标签创建阴影文档对象模型以生成微应用web原生组件；响应于微前端应用构建操作，根据子应用的域名地址获取子应用域名下的静态资源；将静态资源插入到阴影文档对象模型中，以将子应用的元素渲染到阴影文档对象模型中，以在主应用中引入子应用，通过使用web原生组件Web Components进行微前端的封装渲染，可通过创建的阴影文档对象模型来进行数据隔离，从而解决了single-spa、qiankun等微前端框架无法解决的选择器冲突问题；并且WebComponents属于当前页面的DOM结构，可以解决iframe渲染的子应用与主应用DOM结构割离离的问题。另外，Web Components作为web原生组件，可以突破web前端框架限制，无需监听路由变化，在页面任何地方都可以渲染，从而降低配置门槛，实现一行代码即可渲染微前端应用，通信效率高，实现灵活。

图4示出了可以应用本发明实施例的构建微前端应用的方法或构建微前端应用的装置的示例性系统架构400。

如图4所示，系统架构400可以包括终端设备401、402、403，网络404和服务器405。网络404用以在终端设备401、402、403和服务器405之间提供通信链路的介质。网络404可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备401、402、403通过网络404与服务器405交互，以接收或发送消息等。终端设备401、402、403上可以安装有各种客户端应用，例如网页开发类应用、网页浏览器应用、前端开发类应用、APP开发类应用、社交平台软件等(仅为示例)。

终端设备401、402、403可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器405可以是提供各种服务的服务器，例如对用户利用终端设备401、402、403所发来的微前端构建请求提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的微前端构建请求等数据，定义微应用标签，并通过所述微应用标签创建阴影文档对象模型以生成微应用web原生组件；响应于微前端应用构建操作，根据所述子应用的域名地址获取所述子应用域名下的静态资源；将所述静态资源插入到所述阴影文档对象模型中，以将所述子应用的元素渲染到所述阴影文档对象模型中，以在所述主应用中引入所述子应用等处理，并将处理结果(例如构建的微前端应用--仅为示例)反馈给终端设备。

需要说明的是，本发明实施例所提供的构建微前端应用的方法一般由服务器405执行，相应地，构建微前端应用的装置一般设置于服务器405中。

应该理解，图4中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图5，其示出了适于用来实现本发明实施例的终端设备或服务器的计算机系统500的结构示意图。图5示出的终端设备或服务器仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图5所示，计算机系统500包括中央处理单元(CPU)501，其可以根据存储在只读存储器(ROM)502中的程序或者从存储部分508加载到随机访问存储器(RAM)503中的程序而执行各种适当的动作和处理。在RAM 503中，还存储有系统500操作所需的各种程序和数据。CPU 501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。

以下部件连接至I/O接口505：包括键盘、鼠标等的输入部分506；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分507；包括硬盘等的存储部分508；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分509。通信部分509经由诸如因特网的网络执行通信处理。驱动器510也根据需要连接至I/O接口505。可拆卸介质511，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器510上，以便于从其上读出的计算机程序根据需要被安装入存储部分508。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分509从网络上被下载和安装，和/或从可拆卸介质511被安装。在该计算机程序被中央处理单元(CP U)501执行时，执行本发明的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的单元或模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元或模块也可以设置在处理器中，例如，可以描述为：一种处理器包括组件创建模块、资源获取模块和元素渲染模块。其中，这些单元或模块的名称在某种情况下并不构成对该单元或模块本身的限定，例如，组件创建模块还可以被描述为“用于定义微应用标签，并通过所述微应用标签创建阴影文档对象模型以生成微应用web原生组件的模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：定义微应用标签，并通过所述微应用标签创建阴影文档对象模型以生成微应用web原生组件；响应于微前端应用构建操作，根据所述子应用的域名地址获取所述子应用域名下的静态资源；将所述静态资源插入到所述阴影文档对象模型中，以将所述子应用的元素渲染到所述阴影文档对象模型中，以在所述主应用中引入所述子应用。

根据本发明实施例的技术方案，通过定义微应用标签，并通过微应用标签创建阴影文档对象模型以生成微应用web原生组件；响应于微前端应用构建操作，根据子应用的域名地址获取子应用域名下的静态资源；将静态资源插入到阴影文档对象模型中，以将子应用的元素渲染到阴影文档对象模型中，以在主应用中引入子应用，通过使用web原生组件Web Components进行微前端的封装渲染，可通过创建的阴影文档对象模型来进行数据隔离，从而解决了single-spa、qiankun等微前端框架无法解决的选择器冲突问题；并且WebComponents属于当前页面的DOM结构，可以解决iframe渲染的子应用与主应用DOM结构割离离的问题。另外，Web Components作为web原生组件，可以突破web前端框架限制，无需监听路由变化，在页面任何地方都可以渲染，从而降低配置门槛，实现一行代码即可渲染微前端应用，通信效率高，实现灵活。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (10)

1.一种构建微前端应用的方法，其特征在于，所述微前端应用包括主应用和子应用，所述方法包括：

定义微应用标签，并通过所述微应用标签创建阴影文档对象模型以生成微应用web原生组件；

响应于微前端应用构建操作，根据所述子应用的域名地址获取所述子应用域名下的静态资源；

将所述静态资源插入到所述阴影文档对象模型中，以将所述子应用的元素渲染到所述阴影文档对象模型中，以在所述主应用中引入所述子应用。

2.根据权利要求1所述的方法，其特征在于，定义微应用标签之后，还包括：

注册监听方法以监听所述微应用标签是否被渲染或被卸载。

3.根据权利要求1所述的方法，其特征在于，在将所述静态资源插入到所述阴影文档对象模型中之前，还包括：

将所述子应用的页面文档对象进行重写，当从所述子应用中获取元素时，将指向从所述阴影文档对象模型中获取元素。

4.根据权利要求1所述的方法，其特征在于，还包括：当所述子应用的域名地址发生变化时，进行所述子应用的静态资源更新。

5.根据权利要求4所述的方法，其特征在于，进行所述子应用的静态资源更新包括：

生成自定义的子应用卸载事件，以使所述子应用通过监听到的卸载事件进行所述子应用的卸载；

根据变化后的域名地址获取更新后的静态资源，将获取到的更新后的静态资源插入到所述阴影文档对象模型中以进行所述子应用的静态资源更新。

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

当所述子应用被所述主应用卸载时，生成自定义的子应用卸载事件，以使所述子应用通过监听到的卸载事件进行所述子应用的卸载。

7.一种构建微前端应用的装置，其特征在于，所述微前端应用包括主应用和子应用，所述装置包括：

组件创建模块，用于定义微应用标签，并通过所述微应用标签创建阴影文档对象模型以生成微应用web原生组件；

资源获取模块，用于响应于微前端应用构建操作，根据所述子应用的域名地址获取所述子应用域名下的静态资源；

元素渲染模块，用于将所述静态资源插入到所述阴影文档对象模型中，以将所述子应用的元素渲染到所述阴影文档对象模型中，以在所述主应用中引入所述子应用。

8.根据权利要求7所述的装置，其特征在于，还包括文件重写模块，用于：

在将所述静态资源插入到所述阴影文档对象模型中之前，将所述子应用的页面文档对象进行重写，当从所述子应用中获取元素时，将指向从所述阴影文档对象模型中获取元素。

9.一种构建微前端应用的电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-6中任一所述的方法。

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

Images