一种微前端架构及资源处理方法技术

技术编号:39808266 阅读:27 留言:0更新日期:2023-12-22 02:42
本发明专利技术涉及微前端技术领域,尤其是涉及一种微前端架构及资源处理方法,所述微前端架构包括主加载器,用于加载主应用;静态资源加载器,与所述主加载连接;所述静态资源加载器用于将所述主应用下的至少一个子应用的静态资源信息储存于对应的子条目静态容器内;事件监听器,与所述主加载器连接

【技术实现步骤摘要】
一种微前端架构及资源处理方法


[0001]本专利技术涉及微前端
,尤其是涉及一种微前端架构及资源处理方法


技术介绍

[0002]随着网络速度

计算机硬件水平的提升和
Web
标准的演进,前端新的框架架构

技术

概念层出不穷

目前,前端应用已经具备更好的性能

更快的开发效率

但随着而来的是应用的复杂程度更高

涉及的团队规模更广

更高的性能要求,应用复杂度已经成为阻塞业务发展的重要瓶颈;尽管随着
Web
标准的演进,前端工程化也在不断演变,从模块化到组件化在到现在的工程化,但在面对跨团队大规模开发

跨团队企业级应用协作,现有的分治设计模式仍然显得有心无力;急需一种架构思想来解决现有研发模式,因此,借助于后端微服务架构思想的“微前端”一词逐渐被提起以及被广泛的研究与应用在前端项目中,逐渐形成的现在微前端框架,这种架构思想技术本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种微前端架构,其特征在于,所述微前端架构包括:主加载器,用于加载主应用;静态资源加载器,与所述主加载器连接;所述静态资源加载器用于将所述主应用下的至少一个子应用的静态资源信息储存于对应的子条目静态容器内;事件监听器,与所述主加载器连接;所述事件监听器用于将所述子应用的子条目订阅监听事件储存与对应的子条目通信事件容器内;子条目容器,与所述主加载器连接,用于存储所述子应用的子条目信息;渲染加载器,用于加载所述子应用对应的所述子条目信息,并将所述子应用对应的所述静态资源信息

所述子条目信息以及所述子条目订阅监听事件组合并渲染;渲染生成器,用于根据渲染加载器渲染得到的信息生成所述子应用对应的子应用页面;所述渲染生成器还用于根据所述子应用的渲染入口标签,将所述子应用页面传输至渲染入口,以展示所述子应用对应的所述子应用页面
。2.
根据权利要求1所述的微前端架构,其特征在于,所述子条目容器包括:单页面子条目容器,有多个,所述单页面子条目容器用于储存单页面的所述子应用的子条目信息;多页面子条目容器,有多个,所述多页面子条目容器用于储存多页面的所述子应用的子条目信息
。3.
根据权利要求1所述的微前端架构,其特征在于,所述渲染生成器还与
API
连接,用于接收所述
API
发送的应用信息,所述应用信息至少包括所述主应用以及各个所述子应用对应的生命周期钩子

数据通信函数及路由跳转函数
。4.
一种资源处理方法,其特征在于,所述方法应用于如权利要求1‑3任一项所述的微前端架构;所述方法包括:接收微前端应用的主应用加载请求;所述主应用加载请求中包括主应用的入口文件和配置信息;主加载器初始化所述入口文件,根据所述配置信息加载所述主应用;接收微前端应用的子应用加载请求;获取所述配置信息中所述主应用对应的至少一个子应用信息;所述子应用信息包括所述子应用的加载方式;针对每个所述子应用,根据所述子应用的加载方式加载所述子应用;对所述子应用渲染后显示于所述子应用的显示页面
。5.
根据权利要求4所述的方法,其特征在于,所述针对每个所述子应用,根据所述子应用的加载方式加载所述子应用的步骤之后,还包括:获取所述子应用对应的静态资源信息

事件监听函数和子条目信息;所述静态资源加载器将所述静态资源信息储存于对应的子条目静态容器中,同时,所述事件监听器将所述事件监听函数储存于对应的子...

【专利技术属性】
技术研发人员:李海华
申请(专利权)人:北京佳讯飞鸿电气股份有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1