微前端框架及其构建方法和相关设备技术

本发明专利技术涉及微前端技术领域，具体涉及一种微前端框架及其构建方法和相关设备，旨在提高子应用加载速度。本发明专利技术的方法包括：在主应用和子应用各自的服务器上分别添加允许访问彼此的跨域配置；在主应用中创建一个iframe元素和一个Web Components组件；将iframe元素的src属性设置为子应用的路径；在加载子应用时，获取子应用的DOM结构和CSS文件，并复制到Web Components组件中；将子应用环境中的文档查询类接口全部代理到Web Components组件，以便子应用的实例能够操作Web Components组件里的DOM结构和CSS文件；其中，子应用的实例在iframe元素的JS文件中生成。本发明专利技术既避免了single

【技术实现步骤摘要】
微前端框架及其构建方法和相关设备


[0001]本专利技术涉及微前端
，具体涉及一种微前端框架及其构建方法和相关设备。

技术介绍

[0002]微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 Web应用的技术手段，通俗地说，就是在一个Web应用中可以独立地运行另一个Web应用。比如制作一个企业管理平台，可以把已有的采购系统和财务系统统一接入这个平台；又比如有一个巨大的Web应用，为了降低开发和维护成本，拆分成多个小应用进行开发和部署，然后用一个平台将这些小应用集成起来。
[0003]目前实现微前端有两种方案：一种是iframe方案，另一种是single
‑
spa方案。
[0004]iframe方案的优点：（1）非常简单，没有任何学习负担；（2）天生隔离非常完美，无论是JS（JavaScript，java脚本）、CSS（Cascading Style Sheets，层叠样式表）、DOM（Document Object Model，文档对象模型）都完全隔离开来。iframe方案的缺点：（1）路由状态丢本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种微前端框架的构建方法，其特征在于，所述框架包括主应用和子应用，所述构建方法包括：在所述主应用和所述子应用各自的服务器上分别添加允许访问彼此的跨域配置；在所述主应用中创建一个iframe元素和一个Web Components组件；将所述iframe元素的src属性设置为所述子应用的路径；在加载所述子应用时，获取所述子应用的DOM结构和CSS文件；将所述DOM结构和所述CSS文件复制到所述Web Components组件中，以便利用所述Web Components组件的特性实现所述主应用和所述子应用之间的样式隔离；将所述子应用环境中的文档查询类接口全部代理到所述Web Components组件，以便所述子应用的实例能够操作所述Web Components组件里的所述DOM结构和所述CSS文件；其中，所述子应用的实例在所述iframe元素的JS文件中生成。2.根据权利要求1所述的微前端框架的构建方法，其特征在于，“在加载所述子应用时，获取所述子应用的DOM结构和CSS文件”的步骤包括：在所述主应用中注册iframe的onload方法，用于监听所述子应用是否加载完成；根据用户的访问请求加载所述子应用；当所述onload方法被触发后，在该方法中获取所述子应用的DOM结构和CSS文件。3.根据权利要求2所述的微前端框架的构建方法，其特征在于，“将所述DOM结构和所述CSS文件复制到所述Web Components组件中”的步骤包括：调用所述Web Components组件中Custom Elements的define方法自定义承载所述DOM结构和所述CSS文件的HTML标签；将所述DOM结构和所述CSS文件添加到所述HTML标签中。4.根据权利要求3所述的微前端框架的构建方法，其特征在于，“将所述子应用环境中的文档查询类接口全部代理到所述Web Components组件”的步骤包括：将iframe中的document关联到所述HTML标签的Shadow DOM上，使得所述子应用中使...

【专利技术属性】
技术研发人员：张乃文，李勇，
申请(专利权)人：北京天信瑞安信息技术有限公司，
类型：发明
国别省市：