沙箱篇官方讲解地址

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, 对子应用内部的全局事件进行保存,当子应用销毁后,将移除子应用所有的全局事件。

原理

在这里插入图片描述

步骤详情:

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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐