微前端 micro-app-源码2-沙箱篇
微前端 对京东micro-app进行学习
·
沙箱篇官方讲解地址
https://github.com/micro-zoe/micro-app/issues/19
要解决的问题
1.子应用中使用window.a, 父亲组件里面也有window.a,两者的元素会相互影响
通过
(function(window, self) {
with(window) {
子应用的js代码
}
}).call(代理对象, 代理对象, 代理对象)
将window 代理出来,子组件使用window的时候,先使用本身的。如果本身不含有再去真实window对象里面寻找。
2.子应用中有全局事件window.addEventListener,关闭子应用,全局事件并未取消
重写addEventListener, 对子应用内部的全局事件进行保存,当子应用销毁后,将移除子应用所有的全局事件。
原理
步骤详情:
- micro-app 子应用创建,沙箱开始创建
- 沙箱使用Proxy进行初始化代理,代理生成window.proxyWindow
- 每次获取到子应用的js的时候,将js使用eval()进行运行,并将子应用的window改为沙箱的proxyWindow,此时每次取window都是从代理取,如果代理里面没有,就从window里面取
- 因为代理的window已经是沙箱里proxyWindow的值了,所以后续的子应用每次添加\删除\查询 值都是从代理对象而不是window了。
更多推荐
已为社区贡献2条内容
所有评论(0)