【技术实现步骤摘要】
微前端架构的实现方法、装置、计算机设备和存储介质
[0001]本申请涉及计算机
,特别是涉及一种微前端架构的实现方法、装置、计算机设备和存储介质。
技术介绍
[0002]随着web(World Wide Web,万维网)应用前端系统的日益庞大复杂,系统的开发人员不断增多,很多项目容易出现难以维护的问题,因此很多开发人员在找寻一种高效管理复杂应用的方案,如何实现这种架构是项目开发人员面临的一个重要课题。
[0003]传统对多应用的管理方案中,主要有iframe、npm依赖包、微前端框架通常iframe只适合简单的应用场景。npm依赖包是将子应用封装成npm包,通过组件的方式引入。流行的微前端框架有single
‑
spa和qiankun,但它们都有比较强的协议规定,对原有应用需要做大量改动才能适配,故而存在对应用的兼容性差的问题。
技术实现思路
[0004]基于此,有必要针对上述技术问题,提供一种能够提升应用的兼容性的微前端架构的实现方法、装置、计算机设备和计算机可读存储介质。r/>[0005]第本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种微前端架构的实现方法,其特征在于,所述方法包括:响应于子应用开启请求,将子应用挂载于主应用文档中的挂载位置上;在所述子应用完成挂载后,依据加载关键数据获取所述子应用对应的资源;所述资源包括样式数据和JS脚本;在所述挂载位置上创建与所述样式数据对应的隔离环境,以及在所述隔离环境中创建所述JS脚本对应的代理沙箱;将所述样式数据加载于所述隔离环境得到第一层叠样式表对象模型树;将所述JS脚本运行于所述代理沙箱得到文档对象模型树,基于所述第一层叠样式表对象模型树和所述文档对象模型树显示所述子应用。2.根据权利要求1所述的方法,其特征在于,所述将子应用挂载于主应用文档中的挂载位置上之前,所述方法还包括:确定所述子应用的子应用名称;获取挂载标签,并依据所述挂载标签确定所述子应用的挂载位置;调用注册函数,通过所述注册函数配置所述子应用的相关参数。3.根据权利要求2所述的方法,其特征在于,所述响应于子应用开启请求,将子应用挂载于主应用文档中的挂载位置上,包括:响应于子应用开启请求,当所述子应用未配置路由参数时,将子应用挂载于主应用文档中的挂载位置上;当所述子应用已配置路由参数时,确定所述子应用名称对应的子应用地址;将所述子应用地址与主应用地址进行路由匹配,得到匹配结果;当所述匹配结果为匹配成功时,将子应用挂载于主应用文档中的挂载位置上。4.根据权利要求3所述的方法,其特征在于,所述方法还包括:当所述匹配结果为匹配成功时,对所述子应用地址进行映射处理;当所述匹配结果为匹配不成功时,不对所述子应用进行挂载处理,或对所述子应用卸载处理。5.根据权利要求1所述的方法,其特征在于,所述加载关键数据包括第一标签和第二标签;所述样式数据包括层叠样式表和样式文件;所述依据加载关键数据获取所述子应用对应的资源包括:检测所述子应用对应的子应用文档中的第一标签和第二标签;依据所述第一标签将获取所述层叠样式表;检测所述层叠样式表中的文件引用地址,并依据所述文件引用地址获取对应的样式文件;当所述样式文件中包含其它文件引用地址时,继续依据其它文件引用地址获取对应的样式文件;更改所述层叠样式表和所述样式文件中的图片引用地址;将更改后的所述层叠样式表和所述样式文件组合成样式数据;依据所述第二标签获取所述JS脚本。6.根据权利要求5所述的方法,其特征在于,所述方法还包括:将所述样式数据包裹于所述第一标签中;将所述JS脚本包裹于所述第二标签中;
将包含所述第一标签和所述第二标签的子应用文档进行缓存;在创建完所述隔离环境和所述代理沙箱之...
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。