qiankun js沙箱proxy代理方式的实现原理

355 阅读1分钟
  • 判断浏览器是否支持Proxy image.png
  • 浏览器支持Proxy,则使用Proxy实现JS沙箱

image.png

  • 实现一个Set对象记录window值的变更。这个Set对象没有起到太大的作用,它只是在失活的时候console.info下。

image.png

  • 新建一个fakeWindow,fakeWindow上是window对象上可以修改和删除的属性。每一个子应用都有自己的fakeWindow。

image.png

  • 使用Proxy创建fakeWindow的代理

image.png

  • 新增时Set对象添加一条记录

image.png

  • 删除时Set对象删除一条记录

image.png

  • 用沙箱代理作为接下来的全局对象

image.png

  • 执行js,传入js沙箱代理

image.png

  • 使用一个函数(function({...}))包裹待执行的js代码块。

image.png

  • 使用(function(window){with(window){...}}).bind(window.proxy)这种方式使得,js代码块中的window变成了fakeWindow的代理。用户修改window实际是修改fakeWindow。并且修改的内容被Set对象记录。 image.png

  • 从window获取某个key的value时,先判断fakeWindow上是否存在这个key,存在的话就从fakeWindow上面获取,不存在则从window上获取。这里应该就是proxy代理发挥作用的地方

image.png