qiankun

根据浏览器版本,判断当前子应用应用哪种沙箱

快照沙箱

快照沙箱本质上就是有个map 存着子应用key 以及子应用window对象

当你卸载应用的时候 把你当前window对象整个拷贝到这个map上去

当你装载应用的时候 整个把你的window对象取出来。没有就用当前

代理沙箱

代理沙箱本质上用到的是proxy 先用proxy 创建一个代理沙箱,加载子应用时候 给子应用注入一段js 脚本,把window 对象挂到Proxy上

htmlEntry

HTML Entry 我认为是乾坤最让人省事的一点。 样式天然隔离了。 因为每次加载一个新的应用时,卸载了下面这些style文件。触发了浏览器自己的重绘,所以本身就会有样式上的隔离。咱就不要提什么是否会和顶部基座有所冲突了,我们控制个顶部基座还是很容易的。 我们可以看到由于使用了htmlEntry,省略掉了很多配置。一个js其实需要先引用很多js才能生效。或者我们样式文件和js文件分开了。

实现原理:import-html-entry。他会把这个html拿正则解析出来。替你去请求资源拼接成我们最后展示的这种dom形式。

css隔离

可以支持shadow Dom 但个人经验。没必要

清除副作用

清除副作用的话本质上还是重写了window上的事件监听 setTimeoout方法 另外2.0 之后主要是也对创建link script 等标签注入进行了监听。

为什么不用iframe

  1. Dialog如何遮罩整个屏幕

  2. url 不同步。浏览器刷新iframe url 状态丢失、后腿前进按钮无法使用

  3. 跨域及cookie

  4. 全局上下文完全隔离,需要重复加载一些公共库。

Last updated