前端面试-微前端架构中,一般是如何做到 JavaScript 隔离的?

在微前端架构中,JavaScript 隔离是确保子应用之间全局变量、事件监听等互不干扰的关键技术。以下是常见的实现方法及对应的框架应用:

一、JavaScript 隔离的实现方法

1.Proxy 代理沙箱

  • 原理:通过 ES6 的 Proxy 拦截对 window 对象的访问和修改,为每个子应用创建独立的代理上下文。子应用对全局变量的操作仅作用于代理对象,而非原生 window,从而避免污染全局环境811
  • 示例代码
const proxyWindow = new Proxy({}, {
  get(target, key) {
    return Reflect.get(globalThis, key) || Reflect.get(target, key);
  },
  set(target, key, value) {
    Reflect.set(target, key, value);
    return true;
  }
});
  • 适用场景:支持多应用同时运行,如 qiankun 的 ProxySandbox。

2.快照沙箱(Snapshot Sandbox)

  • 原理:在子应用挂载前保存当前全局状态(快照),卸载时恢复。通过遍历 window 属性差异实现状态隔离,但仅支持单应用运行。
  • 示例流程
  • 应用加载前记录 window 初始状态。
  • 应用运行时修改的全局变量记录在临时对象。
  • 应用卸载时恢复初始快照。
  • 适用场景:兼容不支持 Proxy 的浏览器,如 qiankun 的降级方案

3.iframe 沙箱

  • 原理:利用