micro-app-2-沙箱篇

沙箱篇官方讲解地址

github.com/micro-zoe/m…

要解决的问题

1.子应用中使用window.a, 父亲组件里面也有window.a，两者的元素会相互影响

通过

(function(window, self) {
  with(window) {
    子应用的js代码
  }
}).call(代理对象, 代理对象, 代理对象)

将window 代理出来，子组件使用window的时候，先使用本身的。如果本身不含有再去真实window对象里面寻找。

2.子应用中有全局事件window.addEventListener,关闭子应用，全局事件并未取消

重写addEventListener, 对子应用内部的全局事件进行保存，当子应用销毁后，将移除子应用所有的全局事件。

原理

步骤详情：

1. micro-app 子应用创建，沙箱开始创建
   
2. 沙箱使用Proxy进行初始化代理，代理生成window.proxyWindow
   
3. 每次获取到子应用的js的时候，将js使用eval（）进行运行，并将子应用的window改为沙箱的proxyWindow，此时每次取window都是从代理取，如果代理里面没有，就从window里面取
   
4. 因为代理的window已经是沙箱里proxyWindow的值了，所以后续的子应用每次添加\删除\查询 值都是从代理对象而不是window了。