使用主应用加载子应用的方式,将子应用作为一个独立的模块进行加载和管理。主应用充当着一个容器的角色,负责管理和控制子应用的生命周期、理由、状态等信息,子应用则专注于业务逻辑的开发,这种方式可以有效的隔离子应用之间的影响,使得不同的子应用可以使用不同的技术栈和框架,从而提升了整个应用的灵活性和可扩展性。
qiankun继承了single-spa的特点,通过监听hashChange和popState这两个原生事件来检测路由变化,在路由变化时匹配到需要渲染的子应用,去加载子应用的HTML,先检查是否有缓存,如果有,直接从缓存中返回并进行渲染,如果没有则通过fetch函数去下载配置的html入口、并返回字符串,通过process函数处理字符串、返回模版、外联脚本、外联样式、和应用入口脚本。调用getEmbedHTML把外联的样式下载下来,并替换到模板内,使其变成内部样式。
同时子应用需要在入口文件中暴露出三个方法:bootstrap、mount、unmount,使得主应用能识别对应的子应用,并且需要在打包时将webpack的publicPath进行修改。
【1】single-spa是通过监听hashChange和popState这两个原生事件来检测路由变化的
【2】当路由变化时,single-spa会监听到,并触发urlReroute
【3】接着它会调用reroute,该函数正确设置各个应用的状态后调用getAppChanges获取 待清除、待卸载、待加载、待挂载4种不通状态下应用的数据。
【4】对不同的数组执行不同的生命周期方法。
流程图如下: