架构原理
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 能顺利的挂载到微应用下面。
import patchDynamicAppend from "./dynamicHeadAppend";
export function patchAtBootstrapping(
appName: string,
elementGetter: () => HTMLElement | ShadowRoot,
proxy: Window,
singular: boolean
): Freer[] {
return [patchDynamicAppend(appName, elementGetter, proxy, false, singular)];
}snapshotSandBox 快照模式沙箱, 整体上看来就是把 window 对象拷贝给一个新对象缓存起来,在退出的时候比对下缓存,然后把变更的数据通过一个 modify 变量存起来,然后通过快照还原 window
export default class SnapshotSandbox implements SandBox {
// 代理对象，初始化后这里是指window对象
proxy: WindowProxy;
// 沙箱的名字
name: string;
// 沙箱是否为激活状态，即运行中
sandboxRunning = false;
// 沙箱激活时执行iter拷贝一层window对象到该对象上
private windowSnapshot!: Window;
// 记录当前子应用运行时修改了哪些window属性
private modifyPropsMap: Record<any, any> = {};
constructor(name: string) {
// 给沙箱取个名字
this.name = name;
// 代理window
this.proxy = window;
// 子应用挂载时激活沙箱
this.active();
}
active() {
// 如果发现沙箱正在运行中 直接返回
if (this.sandboxRunning) {
return;
}
// 记录当前快照
// 初始化一个空对象
this.windowSnapshot = {} as Window;
// 把window的属性拷贝一层下来
iter(window, prop => {
this.windowSnapshot[prop] = window[prop];
});
// 恢复之前的变更
Object.keys(this.modifyPropsMap).forEach((p: any) => {
window[p] = this.modifyPropsMap[p];
});
// 进入沙箱环境立即锁定防止重复执行active
this.sandboxRunning = true;
}
inactive() {
// 当前子应用退出时记录被变更的属性
this.modifyPropsMap = {};
iter(window, prop => {
if (window[prop] !== this.windowSnapshot[prop]) {
// 记录变更，恢复环境
// 记录变更的window属性，在下次执行active时还原这些属性
this.modifyPropsMap[prop] = window[prop];
// 当前子应用退出时，比对快照把window恢复当初始状态
window[prop] = this.windowSnapshot[prop];
}
});
if (process.env.NODE_ENV === 'development') {
console.info(`[qiankun:sandbox] ${this.name} origin window restore...`, Object.keys(this.modifyPropsMap));
}
// 沙箱状态变更为false，未激活
this.sandboxRunning = false;
}
}
ProxSandbox 其实是通过 Object.defineProperty 对 window 对象做了一层代理操作, 定义了一个 Map 对象 updateValueMap,后面操作全局属性优先读取 updateValueMap 上的属性,updateValueMap 是对 window 对象所有可配置属性的一层代理, 在子应用沙箱中修改全局对象属性也是 proxy 到 updateValueMap 对象上,调用 updateValueMap.set(key, value)做临时环境变量存储的映射.
export default class ProxySandbox implements SandBox {
/** window 值变更的记录快照 */
// 这里定义了Map，后面对代理操作的属性先从这里取
private updateValueMap = new Map<PropertyKey, any>();
// 沙箱的名字
name: string;
// 代理对象 这里就是window
proxy: WindowProxy;
// 默认为运行中，激活状态
sandboxRunning = true;
active() {
// 沙箱激活
this.sandboxRunning = true;
}
inactive() {
if (process.env.NODE_ENV === 'development') {
console.info(`[qiankun:sandbox] ${this.name} modified global properties restore...`, [
...this.updateValueMap.keys(),
]);
}
// 沙箱关闭，退出
this.sandboxRunning = false;
}
constructor(name: string) {
// 初始化沙箱名字
this.name = name;
const { sandboxRunning, updateValueMap } = this;
const boundValueSymbol = Symbol('bound value');
// https://github.com/umijs/qiankun/pull/192
// 缓存一份原始的window对象
const rawWindow = window;
// 将configurable为true的可配置window属性代理到fakeWindow上
const fakeWindow = createFakeWindow(rawWindow);
// 初始化沙箱抛出proxy提供访问
const proxy = new Proxy(fakeWindow, {
set(_: Window, p: PropertyKey, value: any): boolean {
if (sandboxRunning) {
// 在修改全局环境属性的时候实际上是把该属性通过key映射存在我们定义的updateValueMap上，等我们下次访问的时候就从这个对象上优先读取
updateValueMap.set(p, value);
return true;
}
if (process.env.NODE_ENV === 'development') {
console.warn(`[qiankun] Set window.${p.toString()} while jsSandbox destroyed or inactive in ${name}!`);
}
// 在 strict-mode 下，Proxy 的 handler.set 返回 false 会抛出 TypeError，在沙箱卸载的情况下应该忽略错误
return true;
},
get(_: Window, p: PropertyKey): any {
// avoid who using window.window or window.self to escape the sandbox environment to touch the really window
// or use window.top to check if an iframe context
// see https://github.com/eligrey/FileSaver.js/blob/master/src/FileSaver.js#L13
// 访问top window self 即访问代理对象 具体可以控制台输入window.top window.window window.self看一下
if (p === 'top' || p === 'window' || p === 'self') {
return proxy;
}
// just for test
if (process.env.NODE_ENV === 'test' && p === 'mockTop') {
return proxy;
}
// proxy.hasOwnProperty would invoke getter firstly, then its value represented as rawWindow.hasOwnProperty
// 当调用到window.hasOwnProperty时优先去updateValueMap上查找，否则调用window.hasOwnProperty判断
if (p === 'hasOwnProperty') {
return (key: PropertyKey) => updateValueMap.has(key) || rawWindow.hasOwnProperty(key);
}
// Take priority from the updateValueMap, or fallback to window
// 所有属性优先从updateValueMap上找
const value = updateValueMap.get(p) || (rawWindow as any)[p];
/*
仅绑定 !isConstructable && isCallable 的函数对象，如 window.console、window.atob 这类。目前没有完美的检测方式，这里通过 prototype 中是否还有可枚举的拓展方法的方式来判断
@warning 这里不要随意替换成别的判断方式，因为可能触发一些 edge case（比如在 lodash.isFunction 在 iframe 上下文中可能由于调用了 top window 对象触发的安全异常）
*/
if (typeof value === 'function' && !isConstructable(value)) {
if (value[boundValueSymbol]) {
return value[boundValueSymbol];
}
const boundValue = value.bind(rawWindow);
// some callable function has custom fields, we need to copy the enumerable props to boundValue. such as moment function.
Object.keys(value).forEach(key => (boundValue[key] = value[key]));
Object.defineProperty(value, boundValueSymbol, { enumerable: false, value: boundValue });
return boundValue;
}
return value;
},
// trap in operator
// see https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/constants.js#L12
has(_: Window, p: string | number | symbol): boolean {
// 是否是window的属性
return updateValueMap.has(p) || p in rawWindow;
},
getOwnPropertyDescriptor(target: Window, p: string | number | symbol): PropertyDescriptor | undefined {
if (updateValueMap.has(p)) {
// if the property is existed on raw window, use it original descriptor
const descriptor = Object.getOwnPropertyDescriptor(rawWindow, p);
if (descriptor) {
return descriptor;
}
return { configurable: true, enumerable: true, writable: true, value: updateValueMap.get(p) };
}
/*
as the descriptor of top/self/window/mockTop in raw window are configurable but not in proxy target, we need to get it from target to avoid TypeError
see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor
> A property cannot be reported as non-configurable, if it does not exists as an own property of the target object or if it exists as a configurable own property of the target object.
*/
if (target.hasOwnProperty(p)) {
return Object.getOwnPropertyDescriptor(target, p);
}
if (rawWindow.hasOwnProperty(p)) {
return Object.getOwnPropertyDescriptor(rawWindow, p);
}
return undefined;
},
// trap to support iterator with sandbox
// 把window的可编辑属性，不可编辑属性全部取出来，调用lodash的uniq愉快的取个重
ownKeys(): PropertyKey[] {
return uniq([...Reflect.ownKeys(rawWindow), ...updateValueMap.keys()]);
},
// 有些小伙伴可能会冲动的去删window对象的属性，正常情况下肯定是不能删的了，所以我们就删代理对象上的呗
deleteProperty(_: Window, p: string | number | symbol): boolean {
if (updateValueMap.has(p)) {
updateValueMap.delete(p);
return true;
}
return true;
}
});
this.proxy = proxy;
}
}function createFakeWindow(global: Window): Window {
const fakeWindow = {} as FakeWindow;
// Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名
// 包括不可枚举属性但不包括Symbol值作为名称的属性组成的数组。
Object.getOwnPropertyNames(global)
// 找到 window 对象中不可改变或不可删除的属性
.filter(p => {
// Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符。
// 自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性
const descriptor = Object.getOwnPropertyDescriptor(global, p);
// configurable 当且仅当指定对象的属性描述可以被改变或者属性可被删除时，为true
return !descriptor?.configurable;
})
.forEach(p => {
const descriptor = Object.getOwnPropertyDescriptor(global, p);
if (descriptor) {
// 这些属性中找到 top self window 属性，将其配置为 configurable
if (
p === 'top' ||
p === 'self' ||
p === 'window' ||
(process.env.NODE_ENV === 'test' && (p === 'mockTop' || p === 'mockSafariTop'))
) {
descriptor.configurable = true;
/*
The descriptor of window.window/window.top/window.self in Safari/FF are accessor descriptors, we need to avoid adding a data descriptor while it was
Example:
Safari/FF: Object.getOwnPropertyDescriptor(window, 'top') -> {get: function, set: undefined, enumerable: true, configurable: false}
Chrome: Object.getOwnPropertyDescriptor(window, 'top') -> {value: Window, writable: false, enumerable: true, configurable: false}
*/
// 如果 descriptor 有 get 方法，将 descriptor 设置为 writable
if (!Object.prototype.hasOwnProperty.call(descriptor, 'get')) {
descriptor.writable = true;
}
}
// freeze the descriptor to avoid being modified by zone.js
// const rawObjectDefineProperty = Object.defineProperty;
// fakeWindow 中放置这些属性
rawObjectDefineProperty(fakeWindow, p, Object.freeze(descriptor!));
}
});
return fakeWindow;
}
沙箱的实现比较繁琐，首先在初始化阶段，使用 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 阶段副作用的清理。
qiankun 沙箱处理原理
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 能顺利的挂载到微应用下面。
import patchDynamicAppend from "./dynamicHeadAppend";
export function patchAtBootstrapping(
appName: string,
elementGetter: () => HTMLElement | ShadowRoot,
proxy: Window,
singular: boolean
): Freer[] {
return [patchDynamicAppend(appName, elementGetter, proxy, false, singular)];
}snapshotSandBox 快照模式沙箱, 整体上看来就是把 window 对象拷贝给一个新对象缓存起来,在退出的时候比对下缓存,然后把变更的数据通过一个 modify 变量存起来,然后通过快照还原 window
export default class SnapshotSandbox implements SandBox {
// 代理对象，初始化后这里是指window对象
proxy: WindowProxy;
// 沙箱的名字
name: string;
// 沙箱是否为激活状态，即运行中
sandboxRunning = false;
// 沙箱激活时执行iter拷贝一层window对象到该对象上
private windowSnapshot!: Window;
// 记录当前子应用运行时修改了哪些window属性
private modifyPropsMap: Record<any, any> = {};
constructor(name: string) {
// 给沙箱取个名字
this.name = name;
// 代理window
this.proxy = window;
// 子应用挂载时激活沙箱
this.active();
}
active() {
// 如果发现沙箱正在运行中 直接返回
if (this.sandboxRunning) {
return;
}
// 记录当前快照
// 初始化一个空对象
this.windowSnapshot = {} as Window;
// 把window的属性拷贝一层下来
iter(window, prop => {
this.windowSnapshot[prop] = window[prop];
});
// 恢复之前的变更
Object.keys(this.modifyPropsMap).forEach((p: any) => {
window[p] = this.modifyPropsMap[p];
});
// 进入沙箱环境立即锁定防止重复执行active
this.sandboxRunning = true;
}
inactive() {
// 当前子应用退出时记录被变更的属性
this.modifyPropsMap = {};
iter(window, prop => {
if (window[prop] !== this.windowSnapshot[prop]) {
// 记录变更，恢复环境
// 记录变更的window属性，在下次执行active时还原这些属性
this.modifyPropsMap[prop] = window[prop];
// 当前子应用退出时，比对快照把window恢复当初始状态
window[prop] = this.windowSnapshot[prop];
}
});
if (process.env.NODE_ENV === 'development') {
console.info(`[qiankun:sandbox] ${this.name} origin window restore...`, Object.keys(this.modifyPropsMap));
}
// 沙箱状态变更为false，未激活
this.sandboxRunning = false;
}
}
ProxSandbox 其实是通过 Object.defineProperty 对 window 对象做了一层代理操作, 定义了一个 Map 对象 updateValueMap,后面操作全局属性优先读取 updateValueMap 上的属性,updateValueMap 是对 window 对象所有可配置属性的一层代理, 在子应用沙箱中修改全局对象属性也是 proxy 到 updateValueMap 对象上,调用 updateValueMap.set(key, value)做临时环境变量存储的映射.
export default class ProxySandbox implements SandBox {
/** window 值变更的记录快照 */
// 这里定义了Map，后面对代理操作的属性先从这里取
private updateValueMap = new Map<PropertyKey, any>();
// 沙箱的名字
name: string;
// 代理对象 这里就是window
proxy: WindowProxy;
// 默认为运行中，激活状态
sandboxRunning = true;
active() {
// 沙箱激活
this.sandboxRunning = true;
}
inactive() {
if (process.env.NODE_ENV === 'development') {
console.info(`[qiankun:sandbox] ${this.name} modified global properties restore...`, [
...this.updateValueMap.keys(),
]);
}
// 沙箱关闭，退出
this.sandboxRunning = false;
}
constructor(name: string) {
// 初始化沙箱名字
this.name = name;
const { sandboxRunning, updateValueMap } = this;
const boundValueSymbol = Symbol('bound value');
// https://github.com/umijs/qiankun/pull/192
// 缓存一份原始的window对象
const rawWindow = window;
// 将configurable为true的可配置window属性代理到fakeWindow上
const fakeWindow = createFakeWindow(rawWindow);
// 初始化沙箱抛出proxy提供访问
const proxy = new Proxy(fakeWindow, {
set(_: Window, p: PropertyKey, value: any): boolean {
if (sandboxRunning) {
// 在修改全局环境属性的时候实际上是把该属性通过key映射存在我们定义的updateValueMap上，等我们下次访问的时候就从这个对象上优先读取
updateValueMap.set(p, value);
return true;
}
if (process.env.NODE_ENV === 'development') {
console.warn(`[qiankun] Set window.${p.toString()} while jsSandbox destroyed or inactive in ${name}!`);
}
// 在 strict-mode 下，Proxy 的 handler.set 返回 false 会抛出 TypeError，在沙箱卸载的情况下应该忽略错误
return true;
},
get(_: Window, p: PropertyKey): any {
// avoid who using window.window or window.self to escape the sandbox environment to touch the really window
// or use window.top to check if an iframe context
// see https://github.com/eligrey/FileSaver.js/blob/master/src/FileSaver.js#L13
// 访问top window self 即访问代理对象 具体可以控制台输入window.top window.window window.self看一下
if (p === 'top' || p === 'window' || p === 'self') {
return proxy;
}
// just for test
if (process.env.NODE_ENV === 'test' && p === 'mockTop') {
return proxy;
}
// proxy.hasOwnProperty would invoke getter firstly, then its value represented as rawWindow.hasOwnProperty
// 当调用到window.hasOwnProperty时优先去updateValueMap上查找，否则调用window.hasOwnProperty判断
if (p === 'hasOwnProperty') {
return (key: PropertyKey) => updateValueMap.has(key) || rawWindow.hasOwnProperty(key);
}
// Take priority from the updateValueMap, or fallback to window
// 所有属性优先从updateValueMap上找
const value = updateValueMap.get(p) || (rawWindow as any)[p];
/*
仅绑定 !isConstructable && isCallable 的函数对象，如 window.console、window.atob 这类。目前没有完美的检测方式，这里通过 prototype 中是否还有可枚举的拓展方法的方式来判断
@warning 这里不要随意替换成别的判断方式，因为可能触发一些 edge case（比如在 lodash.isFunction 在 iframe 上下文中可能由于调用了 top window 对象触发的安全异常）
*/
if (typeof value === 'function' && !isConstructable(value)) {
if (value[boundValueSymbol]) {
return value[boundValueSymbol];
}
const boundValue = value.bind(rawWindow);
// some callable function has custom fields, we need to copy the enumerable props to boundValue. such as moment function.
Object.keys(value).forEach(key => (boundValue[key] = value[key]));
Object.defineProperty(value, boundValueSymbol, { enumerable: false, value: boundValue });
return boundValue;
}
return value;
},
// trap in operator
// see https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/constants.js#L12
has(_: Window, p: string | number | symbol): boolean {
// 是否是window的属性
return updateValueMap.has(p) || p in rawWindow;
},
getOwnPropertyDescriptor(target: Window, p: string | number | symbol): PropertyDescriptor | undefined {
if (updateValueMap.has(p)) {
// if the property is existed on raw window, use it original descriptor
const descriptor = Object.getOwnPropertyDescriptor(rawWindow, p);
if (descriptor) {
return descriptor;
}
return { configurable: true, enumerable: true, writable: true, value: updateValueMap.get(p) };
}
/*
as the descriptor of top/self/window/mockTop in raw window are configurable but not in proxy target, we need to get it from target to avoid TypeError
see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor
> A property cannot be reported as non-configurable, if it does not exists as an own property of the target object or if it exists as a configurable own property of the target object.
*/
if (target.hasOwnProperty(p)) {
return Object.getOwnPropertyDescriptor(target, p);
}
if (rawWindow.hasOwnProperty(p)) {
return Object.getOwnPropertyDescriptor(rawWindow, p);
}
return undefined;
},
// trap to support iterator with sandbox
// 把window的可编辑属性，不可编辑属性全部取出来，调用lodash的uniq愉快的取个重
ownKeys(): PropertyKey[] {
return uniq([...Reflect.ownKeys(rawWindow), ...updateValueMap.keys()]);
},
// 有些小伙伴可能会冲动的去删window对象的属性，正常情况下肯定是不能删的了，所以我们就删代理对象上的呗
deleteProperty(_: Window, p: string | number | symbol): boolean {
if (updateValueMap.has(p)) {
updateValueMap.delete(p);
return true;
}
return true;
}
});
this.proxy = proxy;
}
}function createFakeWindow(global: Window): Window {
const fakeWindow = {} as FakeWindow;
// Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名
// 包括不可枚举属性但不包括Symbol值作为名称的属性组成的数组。
Object.getOwnPropertyNames(global)
// 找到 window 对象中不可改变或不可删除的属性
.filter(p => {
// Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符。
// 自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性
const descriptor = Object.getOwnPropertyDescriptor(global, p);
// configurable 当且仅当指定对象的属性描述可以被改变或者属性可被删除时，为true
return !descriptor?.configurable;
})
.forEach(p => {
const descriptor = Object.getOwnPropertyDescriptor(global, p);
if (descriptor) {
// 这些属性中找到 top self window 属性，将其配置为 configurable
if (
p === 'top' ||
p === 'self' ||
p === 'window' ||
(process.env.NODE_ENV === 'test' && (p === 'mockTop' || p === 'mockSafariTop'))
) {
descriptor.configurable = true;
/*
The descriptor of window.window/window.top/window.self in Safari/FF are accessor descriptors, we need to avoid adding a data descriptor while it was
Example:
Safari/FF: Object.getOwnPropertyDescriptor(window, 'top') -> {get: function, set: undefined, enumerable: true, configurable: false}
Chrome: Object.getOwnPropertyDescriptor(window, 'top') -> {value: Window, writable: false, enumerable: true, configurable: false}
*/
// 如果 descriptor 有 get 方法，将 descriptor 设置为 writable
if (!Object.prototype.hasOwnProperty.call(descriptor, 'get')) {
descriptor.writable = true;
}
}
// freeze the descriptor to avoid being modified by zone.js
// const rawObjectDefineProperty = Object.defineProperty;
// fakeWindow 中放置这些属性
rawObjectDefineProperty(fakeWindow, p, Object.freeze(descriptor!));
}
});
return fakeWindow;
}
沙箱的实现比较繁琐，首先在初始化阶段，使用 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 阶段副作用的清理。
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 上的，它也会出一些问题。
最后更新于
这有帮助吗？