search

架构原理

qiankun 中沙箱的实现有三种。 是否支持 Proxy 代理, 分 2 套方案,分别是 快照模式 SnapshotSandbox 和代理模式,代理模式又根据是否单实例场景实现 LegacySandbox 和 ProxySandbox. 如果一个页面上都多个微前端应用，使用 ProxySandbox，否则使用 LegacySandbox。如果不支持 Proxy，使用 SnapshotSandbox。

qiankun 默认配置 jsSandBox 是启用的,初始化 loadApp 会判断 jsSandbox 生成一个全局对象,通过调用 genSandbox 生成沙箱环境.

// qiankun/src/loader.ts
if (jsSandbox) {
  // appName 注册是传入的子应用 name
  // containerGetter dom 的包装
  // singular 单实例场景
  const sandbox = genSandbox(appName, containerGetter, Boolean(singular));
  // 用沙箱的代理对象作为接下来使用的全局对象
  global = sandbox.sandbox;
  mountSandbox = sandbox.mount;
  unmountSandbox = sandbox.unmount;
}

createSandbox 是在 loadApp 的时候执行的。返回值中包含 mount 和 unmount 两个函数，分别在微应用 mount 和 unmount 生命周期执行。

// qiankun/src/sandbox/index.ts
export function createSandbox(
  appName: string,
  elementGetter: () => HTMLElement | ShadowRoot,
  singular: boolean
) {
  // mounting freers are one-off and should be re-init at every mounting time
  let mountingFreers: Freer[] = [];

  let sideEffectsRebuilders: Rebuilder[] = [];

  let sandbox: SandBox;
  if (window.Proxy) {
    sandbox = singular ? new LegacySandbox(appName) : new ProxySandbox(appName);
  } else {
    sandbox = new SnapshotSandbox(appName);
  }

  // some side effect could be be invoked while bootstrapping, such as dynamic stylesheet injection with style-loader, especially during the development phase
  const bootstrappingFreers = patchAtBootstrapping(
    appName,
    elementGetter,
    sandbox.proxy,
    singular
  );

  return {
    proxy: sandbox.proxy,

    /**
     * 沙箱被 mount
     * 可能是从 bootstrap 状态进入的 mount
     * 也可能是从 unmount 之后再次唤醒进入 mount
     */
    async mount() {
      // bootstrappingFreers 的 length 是 1
      const sideEffectsRebuildersAtBootstrapping = sideEffectsRebuilders.slice(
        0,
        bootstrappingFreers.length
      );
      const sideEffectsRebuildersAtMounting = sideEffectsRebuilders.slice(
        bootstrappingFreers.length
      );

      // must rebuild the side effects which added at bootstrapping firstly to recovery to nature state
      if (sideEffectsRebuildersAtBootstrapping.length) {
        // 执行 rebuild
        sideEffectsRebuildersAtBootstrapping.forEach((rebuild) => rebuild());
      }

      /* ------------------------------------------ 因为有上下文依赖（window），以下代码执行顺序不能变 ------------------------------------------ */

      /* ------------------------------------------ 1. 启动/恢复 沙箱------------------------------------------ */
      sandbox.active();

      /* ------------------------------------------ 2. 开启全局变量补丁 ------------------------------------------*/
      // render 沙箱启动时开始劫持各类全局监听，尽量不要在应用初始化阶段有 事件监听/定时器 等副作用
      mountingFreers = patchAtMounting(
        appName,
        elementGetter,
        sandbox.proxy,
        singular
      );

      /* ------------------------------------------ 3. 重置一些初始化时的副作用 ------------------------------------------*/
      // 存在 rebuilder 则表明有些副作用需要重建
      if (sideEffectsRebuildersAtMounting.length) {
        sideEffectsRebuildersAtMounting.forEach((rebuild) => rebuild());
      }

      // clean up rebuilders
      sideEffectsRebuilders = [];
    },

    /**
     * 恢复 global 状态，使其能回到应用加载之前的状态
     */
    async unmount() {
      // record the rebuilders of window side effects (event listeners or timers)
      // note that the frees of mounting phase are one-off as it will be re-init at next mounting

      // 执行 free 操作
      // sideEffectsRebuilders 赋值
      sideEffectsRebuilders = [...bootstrappingFreers, ...mountingFreers].map(
        (free) => free()
      );
      // 激活和卸载时都要用到这个

      sandbox.inactive();
    },
  };
}

patchAtBootstrapping 方法, 该方法会对 document.createElement,HTML DOM appendChild，HTML DOM removeChild，HTML DOM insertBefore 做处理，以便 style 和 script 能顺利的挂载到微应用下面。

snapshotSandBox 快照模式沙箱, 整体上看来就是把 window 对象拷贝给一个新对象缓存起来,在退出的时候比对下缓存,然后把变更的数据通过一个 modify 变量存起来,然后通过快照还原 window

ProxSandbox 其实是通过 Object.defineProperty 对 window 对象做了一层代理操作, 定义了一个 Map 对象 updateValueMap,后面操作全局属性优先读取 updateValueMap 上的属性,updateValueMap 是对 window 对象所有可配置属性的一层代理, 在子应用沙箱中修改全局对象属性也是 proxy 到 updateValueMap 对象上,调用 updateValueMap.set(key, value)做临时环境变量存储的映射.

沙箱的实现比较繁琐，首先在初始化阶段，使用 Proxy 生成一个 window 对象的代理，将 windows 上不可改变或不可删除的属性的 configurable 设置为 true，放到代理对象中。然后重写 document.createElement，appendChild，removeChild，insertBefore 方法，改写了 style 和 script 的加载方式，以便 style 和 script 能顺利的挂载到微应用下面。

沙箱初始化完毕后，对外暴露 mount 和 unmount 方法，用于在微应用的同名生命周期中调用。mount 方法修改一些会产生副作用的全局函数，比如 window.setInterval 产生的定时任务，或者是 window.addEventListener 产生的监听，同一个微应用的这些副作用会存储在一些，这样在 unmount 阶段的时候就很容易根据应用进行清理。mount 方法也会对 script 和 style 劫持，和初始化过程基本一致，mount 方法会有一些跟别的框架相关的逻辑，比如 umi，原因是使用 umi 框架会对全局造成影响，qiankun 需要屏蔽这部分变化导致的 bug。 unmount 阶段没什么，就是对 mount 阶段副作用的清理。

hashtag
qiankun 沙箱处理原理

qiankun 中沙箱的实现有三种。 是否支持 Proxy 代理, 分 2 套方案,分别是 快照模式 (SnapshotSandbox) 和代理模式,代理模式又根据是否是单实例场景实现 LegacySandbox 和 ProxySandbox. 如果一个页面上有多个微前端应用，使用 ProxySandbox，否则使用 LegacySandbox。如果不支持 Proxy，使用 SnapshotSandbox。

qiankun 默认配置 jsSandBox 是启用的,初始化 loadApp 会判断 jsSandbox 生成一个全局对象,通过调用 genSandbox 生成沙箱环境.

createSandbox 是在 loadApp 的时候执行的。返回值中包含 mount 和 unmount 两个函数，分别在微应用 mount 和 unmount 生命周期执行。

patchAtBootstrapping 方法, 该方法会对 document.createElement,HTML DOM appendChild，HTML DOM removeChild，HTML DOM insertBefore 做处理，以便 style 和 script 能顺利的挂载到微应用下面。

snapshotSandBox 快照模式沙箱, 整体上看来就是把 window 对象拷贝给一个新对象缓存起来,在退出的时候比对下缓存,然后把变更的数据通过一个 modify 变量存起来,然后通过快照还原 window

ProxSandbox 其实是通过 Object.defineProperty 对 window 对象做了一层代理操作, 定义了一个 Map 对象 updateValueMap,后面操作全局属性优先读取 updateValueMap 上的属性,updateValueMap 是对 window 对象所有可配置属性的一层代理, 在子应用沙箱中修改全局对象属性也是 proxy 到 updateValueMap 对象上,调用 updateValueMap.set(key, value)做临时环境变量存储的映射.

沙箱的实现比较繁琐，首先在初始化阶段，使用 Proxy 生成一个 window 对象的代理，将 windows 上不可改变或不可删除的属性的 configurable 设置为 true，放到代理对象中。然后重写 document.createElement，appendChild，removeChild，insertBefore 方法，改写了 style 和 script 的加载方式，以便 style 和 script 能顺利的挂载到微应用下面。

沙箱初始化完毕后，对外暴露 mount 和 unmount 方法，用于在微应用的同名生命周期中调用。mount 方法修改一些会产生副作用的全局函数，比如 window.setInterval 产生的定时任务，或者是 window.addEventListener 产生的监听，同一个微应用的这些副作用会存储在一些，这样在 unmount 阶段的时候就很容易根据应用进行清理。mount 方法也会对 script 和 style 劫持，和初始化过程基本一致，mount 方法会有一些跟别的框架相关的逻辑，比如 umi，原因是使用 umi 框架会对全局造成影响，qiankun 需要屏蔽这部分变化导致的 bug。 unmount 阶段没什么，就是对 mount 阶段副作用的清理。

hashtag
qiankun 主基座样式会影响到子基座样式吗

qiankun 才用了动态样式隔离(dynamic stylesheet) 动态样式表。当你从子应用 A 切换到子应用 B 的时候，这个时候需要把子应用的样式表 A 的样式给删除，把子应用 B 的样式表给挂载。这样就避免了子应用 A 的样式和子应用 B 的样式同时存在于这个项目中，就做到了最基本的隔离.

当主应用和子应用出现样式冲突. 我们可以采用 bem 或者 css-in-js , css module 等处理.来避免冲突.

还有一种样式隔离方案: shadow Dom shadow Dom, 真正可以做到 css 之间完全隔离的.在 shadow Boundary 这个阴影边界阻隔下.说你在使用一些弹窗组件的时候（弹窗很多情况下都是默认添加到了 document.body ）这个时候它就跳过了阴影边界，跑到了主应用里面，样式就丢了。又比方说你子应用使用的是 React 技术栈，而 React 事件代理其实是挂在 document 上的，它也会出一些问题。

上一页mgc 一期复盘下一页喵币管理

最后更新于