qiankun微前端原理及部分源码解读

发布时间:2024年01月04日

大白话:

使用主应用加载子应用的方式,将子应用作为一个独立的模块进行加载和管理。主应用充当着一个容器的角色,负责管理和控制子应用的生命周期、理由、状态等信息,子应用则专注于业务逻辑的开发,这种方式可以有效的隔离子应用之间的影响,使得不同的子应用可以使用不同的技术栈和框架,从而提升了整个应用的灵活性和可扩展性。 

官话 

qiankun继承了single-spa的特点,通过监听hashChange和popState这两个原生事件来检测路由变化,在路由变化时匹配到需要渲染的子应用,去加载子应用的HTML,先检查是否有缓存,如果有,直接从缓存中返回并进行渲染,如果没有则通过fetch函数去下载配置的html入口、并返回字符串,通过process函数处理字符串、返回模版、外联脚本、外联样式、和应用入口脚本。调用getEmbedHTML把外联的样式下载下来,并替换到模板内,使其变成内部样式。

同时子应用需要在入口文件中暴露出三个方法:bootstrap、mount、unmount,使得主应用能识别对应的子应用,并且需要在打包时将webpack的publicPath进行修改。

详细原理如下:

1. 路由

【1】single-spa是通过监听hashChange和popState这两个原生事件来检测路由变化的

【2】当路由变化时,single-spa会监听到,并触发urlReroute

【3】接着它会调用reroute,该函数正确设置各个应用的状态后调用getAppChanges获取 待清除、待卸载、待加载、待挂载4种不通状态下应用的数据。

【4】对不同的数组执行不同的生命周期方法。

流程图如下:

文章来源:https://blog.csdn.net/lyn1772671980/article/details/135364563
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。