微前端架构
深度解析

// 主应用创建 iframe
const iframe = document.createElement('iframe');
iframe.src = 'https://sub-app.example.com';
iframe.style.cssText = 'width:100%;height:100%;border:none;';
container.appendChild(iframe);

// 通信
iframe.contentWindow.postMessage(
  { type: 'INIT', data: { user, token } },
  'https://sub-app.example.com'
);

window.addEventListener('message', (e) => {
  if (e.origin === 'https://sub-app.example.com') {
    console.log('收到子应用消息:', e.data);
  }
});

class SnapshotSandbox {
  constructor() {
    this.snapshot = {};
    this.modifyPropsMap = {};
  }
  // 激活：恢复快照
  active() {
    // 恢复上次保存的状态
    for (const key in this.snapshot) {
      window[key] = this.snapshot[key];
    }
  }
  // 卸载：保存快照
  inactive() {
    // 记录当前 window 状态
    for (const key in window) {
      if (window[key] !== this.snapshot[key]) {
        this.modifyPropsMap[key] = window[key];
        // 还原为激活前的状态
        window[key] = this.snapshot[key];
      }
    }
    // 合并修改到快照
    this.snapshot = { ...this.snapshot, ...this.modifyPropsMap };
  }
}

class ProxySandbox {
  constructor(name) {
    this.name = name;
    this.fakeWindow = {};
    // 记录所有被 set 过的属性
    this.updatedValueSet = new Set();

    this.proxy = new Proxy(window, {
      get: (target, key) => {
        // 优先从 fakeWindow 取值
        if (key in this.fakeWindow) {
          return this.fakeWindow[key];
        }
        const val = target[key];
        // 绑定正确的 this 指向
        return typeof val === 'function'
          ? val.bind(target) : val;
      },
      set: (_, key, value) => {
        this.fakeWindow[key] = value;
        this.updatedValueSet.add(key);
        return true;
      },
      has: (_, key) => {
        return key in this.fakeWindow || key in window;
      },
    });
  }
}

// micro-app 的沙箱实现思路
function createVmSandbox(code, context) {
  // 使用 with 语句将 context 作为作用域链
  const fn = new Function(
    'window', 'self', 'globalThis',
    `with(window) {
      try { ${code} }
      catch(e) { console.error(e); }
    }`
  );

  // Proxy 包装 context
  const proxy = new Proxy(context, {
    has: () => true,  // 所有变量都从 context 查找
    get: (target, key) => target[key] ?? window[key],
    set: (target, key, value) => {
      target[key] = value;
      return true;
    }
  });

  fn(proxy, proxy, proxy);
}