[发明专利]构建微前端应用的方法和装置

说明书

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

技术领域

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

背景技术

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

可选地，还包括：

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

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

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

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

可选地，还包括：

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

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