浅谈乾坤JS隔离的三种机制（快照沙箱、两种代理沙箱）

1、乾坤Js隔离机制三种沙箱的发展史

在前端开发中，为了保证不同应用之间的代码不会相互干扰，我们需要使用Js隔离机制，通常称为沙箱。在乾坤框架中，我们使用三种不同的Js隔离机制，分别是快照沙箱、支持单应用的代理沙箱和支持多应用的代理沙箱。

最初，乾坤框架只有一种沙箱，即快照沙箱，它使用SnapshotSandbox类来实现。但是，快照沙箱有一个缺点，就是需要遍历window上的所有属性，性能较差。随着ES6的普及，我们可以使用Proxy来解决这个问题，于是就诞生了LegacySandbox，它可以实现和快照沙箱一样的功能，但是性能更好。由于LegacySandbox也会污染全局的window，因此它仅允许页面同时运行一个微应用，我们也称之为支持单应用的代理沙箱。

随着业务的发展，我们需要支持一个页面运行多个微应用，于是就有了ProxySandbox，它可以支持多个微应用同时运行。因此，我们称之为支持多应用的代理沙箱。实际上，LegacySandbox在未来可能会被淘汰，因为ProxySandbox可以做到LegacySandbox的所有功能，而快照沙箱由于向下兼容的原因，可能会长期存在。

在编码实现这三种沙箱机制的核心逻辑时，我们需要注意它们之间的差异和适用场景，以便选择合适的沙箱机制来保证应用的安全性和性能。

2、三个沙箱的核心逻辑编码实现

为了更好地理解乾坤框架中的三种Js隔离机制，我们可以使用最基础的语法和最简单的逻辑来实现它们的核心逻辑。虽然这种实现方式可能不够严密，但可以帮助我们更快速地理解其中的原理。

快照沙箱

class SnapshotSandBox {
   
  windowSnapshot = {
   }
  modifyPropsMap = {
   }
  active() {
   
    // 保存window对象上所有属性的状态
    for(const prop in window) {
   
      this.windowSnapshot[prop] = window[prop]
    }
     // 恢复上一次在运行该微应用的时候所修改过的window上的属性
    Object.keys(this.modifyPropsMap).forEach(prop => {
   
      window[prop] = this.modifyPropsMap[prop]
    })
  }
  inactive() {
   
    for(const prop in window) {
   
      if(window[prop] !== this.windowSnapshot[prop]){
   
        // 记录修改了window上的哪些属性
        this.modifyPropsMap[prop] = window[prop]
        // 将window上的属性状态还原至微应用运行之前的状态
        window[prop] = this.windowSnapshot[prop]
      }
    }
  }
}

window.city = 'Beijing'
console.log('激活之前',window.city)
let snapshotSandBox = new SnapshotSandBox()
snapshotSandBox.active