（四）沙箱机制

使用single-spa会出现父子应用样式相互影响的问题，如何进行样式隔离呢？

1. 使用 BEM （Block Element Modifier）约定项目前缀

2. 使用 css modules 打包时生成不冲突的选择器名

3. css-in-js （不建议）

4. shadow Dom 真正意义上的隔离 

沙箱机制

1. 快照机制

原理就是运行在某一环境A时，打一个快照，当从别的环境B切换回来的时候，我们通过这个快照就可以立即恢复之前环境A时的情况

简单一句话：保存不同 切换应用的时候，切换不同点

代码模拟：

class SnopShotSandbox {
  constructor () {
    this.keyList = Object.keys(window)
    this.windowShot = {} // 上一次快照
    this.modifyShot = {} // 保存差异 第三方
    this.start()
  }

  // 启动沙箱
  start () {
    this.modifyShot = {}
    for (const key in this.windowShot) {
      if (window.hasOwnProperty(key)) {
        if (this.windowShot[key] !== window[key]) {
          this.modifyShot[key] = window[key]
          window[key] = this.windowShot[key]