在微前端子应用中会往window上挂载属性，如何避免属性被覆盖？

在微前端架构中，避免多个子应用因往 window 对象挂载属性导致冲突的问题，可以通过以下方法解决：

---

1. 沙箱隔离（核心方案）

通过 代理（Proxy） 或 快照（Snapshot） 技术，为每个子应用创建独立的全局环境隔离层：

• Proxy 沙箱：

  // 主应用为子应用创建代理沙箱
  function createSandbox() {
    const fakeWindow = {};
    const proxy = new Proxy(fakeWindow, {
      get(target, key) {
        return target[key] || window[key]; // 优先从沙箱读取，其次从真实 window 读取
      },
      set(target, key, value) {
        target[key] = value; // 写入沙箱，不影响真实 window
        return true;
      },
    });
    return proxy;
  }
  
  // 子应用运行在沙箱中
  const childWindow = createSandbox();
  (function(window) {
    window.myGlobalVar = '子应用的变量'; // 操作的是沙箱的 fakeWindow
  })(childWindow);
  

• 快照沙箱：
  在子应用加载前保存全局状态快照，卸载时还原：

  class SnapshotSandbox {
    constructor() {
      this.snapshot = {};
    }
    activate() {
      this.snapshot = {}; 
      for (const key in window) { 
        this.snapshot[key] = window[key]; // 保存快照
      }
    }
    deactivate() {
      for (const key in window) { 
        if (window[key] !== this.snapshot[key]) {
          window[key] = this.snapshot[key]; // 还原变更
        }
      }
    }
  }
  

---

2. 命名空间约定

强制子应用通过唯一前缀隔离全局变量：

// 子应用挂载属性时使用唯一标识（如应用名）
window.__APP1__ = { myGlobalVar: 'value' };
window.__APP2__ = { myGlobalVar: 'value' };

主应用可通过规范或构建工具（如 Webpack 的 output.library）自动添加前缀。

---

3. 主应用统一管控

• 注册机制：主应用提供 API 供子应用安全注册全局属性，自动处理命名冲突：

  // 主应用提供 registerGlobal 方法
  window.__MAIN_APP__ = {
    registerGlobal(key, value) {
      if (window.__GLOBALS__[key]) {
        throw new Error(`全局属性 ${key} 已存在！`);
      }
      window.__GLOBALS__[key] = value;
    },
  };
  
  // 子应用通过 API 注册
  window.__MAIN_APP__.registerGlobal('myVar', 'value');
  

• 冲突检测：主应用在加载子应用时扫描 window，对潜在冲突发出警告。

---

4. 依赖共享与模块化

减少直接操作 window，通过 模块化 共享依赖：

• Webpack Module Federation：
  子应用通过模块联邦暴露/消费共享模块，而非依赖全局变量。

  // 子应用配置
  new ModuleFederationPlugin({
    name: 'app1',
    exposes: {
      './utils': './src/utils.js',
    },
  });
  
  // 其他应用通过 import 使用
  import utils from 'app1/utils';
  

---

5. 子应用清理机制

子应用卸载时自动移除其挂载的全局属性：

// 子应用声明生命周期
export const unmount = () => {
  delete window.__APP1__;
  // 清理其他全局资源...
};

---

6. 使用微前端框架

直接采用成熟的微前端框架（如 qiankun、single-spa），它们已内置沙箱和隔离机制：

// qiankun 配置
registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:7100',
    container: '#container',
    activeRule: '/app1',
    props: { sandbox: true }, // 启用沙箱隔离
  },
]);

---

总结方案

• 优先级 1：使用沙箱技术（Proxy 或快照）隔离子应用环境。
• 优先级 2：通过命名空间或主应用管控规避冲突。
• 补充方案：依赖模块化和框架能力（如 Module Federation、qiankun）。

通过组合这些方法，可有效避免全局属性污染，确保微前端架构的稳定性。