认识
一、认识
qiankun
是一个基于 single-spa
的微前端实现框架。它的工作原理主要涉及到以下几个方面:
-
应用加载:
-
JS Entry
方式:qiankun
通过动态创建script
标签的方式加载子应用的入口文件。加载完成后,会执行子应用暴露出的生命周期函数。 -
HTML Entry
方式:import-html-entry
会通过创建一个<link>
标签来加载子应用的HTML
入口文件。这样可以确保子应用的资源得到正确加载,并在加载完成后进行处理。一旦HTML
入口文件加载完成,import-html-entry
将解析该文件的内容,提取出子应用的JavaScript
和CSS
资源的URL
-
-
生命周期管理:
qiankun
要求每个子应用都需要暴露出bootstrap
、mount
和unmount
三个生命周期函数。bootstrap
函数在应用加载时被调用,mount
函数在应用启动时被调用,unmount
函数在应用卸载时被调用。 -
沙箱隔离:
qiankun
通过Proxy
对象创建了一个JavaScript
沙箱,用于隔离子应用的全局变量,防止子应用之间的全局变量污染。 -
样式隔离:
qiankun
通过动态添加和移除样式标签的方式实现了样式隔离。当子应用启动时,会动态添加子应用的样式标签,当子应用卸载时,会移除子应用的样式标签。 -
通信机制:
qiankun
提供了一个全局的通信机制,允许子应用之间进行通信。
二、路由同步
三、生命周期
四、JS隔离
JS
隔离的核心是在基座和子应用中使用不同的上下文 (global env
),从而达成基座和子应用之间 js
运行互不影响。简单来说,就是给子应用单独的 window
,避免对基座的 window
造成污染。
4.1 LegacySandbox
传统js
沙箱,目前已弃用,需要配置sandbox.loose = true
开启。此沙箱使用 Proxy
代理子应用对 window
的操作,将子应用对 window
的操作同步到全局 window
上,造成侵入。但同时会将期间对 window
的新增、删除、修改操作记录到沙箱变量中,在子应用关闭时销毁,再根据记录将 window
还原到初始状态。
4.2 ProxySandbox
代理js
沙箱,非IE
浏览器默认使用此沙箱。和 LegacySandbox
同样基于 Proxy
代理子应用对 window
的操作,和 LegacySandbox
不同的是,ProxySandbox
会创建一个虚拟的 window
对象提供给子应用使用,哪怕是在运行时,子应用也不会侵入对 window
,实现完全的隔离。
4.3 SnapshotSandbox
快照 js
沙箱,IE
浏览器默认使用此沙箱。因为 IE
不支持 Proxy
。此沙箱的原理是在子应用启动时,创建基座 window
的快照,存到一个变量中,子应用的 window
操作实质上是对这个变量操作。SnapshotSandbox
同样会将子应用运行期间的修改存储至 modifyPropsMap
中,以便在子应用创建和销毁时还原。
五、样式隔离
5.1 shadowDOM
5.2 Css Modules
CSS Modules
代码中的每一个类名都是引入对象的一个属性,通过这种方式,即可在使用时明确指定所引用的 css
样式。并且 CSS Modules
在打包的时候会自动将类名转换成 hash
值,完全杜绝 css
类名冲突的问题;
5.3 Css In Js
使用JS
写CSS
,也是目前比较主流的方案,完全不需要些单独的 css
文件,所有的 css
代码全部放在组件内部,以实现 css
的模块化,但对于历史代码不好处理