--- theme: orange highlight: atom-one-dark --- ## 推荐阅读 **Vue3源码** - [vue3源码:01.代码管理策略-monorepo](https://www.yangyitao.com/vue3/01.%E4%BB%A3%E7%A0%81%E7%AE%A1%E7%90%86%E7%AD%96%E7%95%A5-monorepo.html) - [vue3源码:02.项目构建流程和源码调试方法](https://www.yangyitao.com/vue3/02.%E9%A1%B9%E7%9B%AE%E6%9E%84%E5%BB%BA%E6%B5%81%E7%A8%8B%E5%92%8C%E6%BA%90%E7%A0%81%E8%B0%83%E8%AF%95%E6%96%B9%E6%B3%95.html) - [vue3源码:03.Vue3响应式核心原理](https://www.yangyitao.com/vue3/03.Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E6%A0%B8%E5%BF%83%E5%8E%9F%E7%90%86.html) - [vue3源码:04.Vue3响应式系统源码实现1](https://www.yangyitao.com/vue3/04.Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E7%B3%BB%E7%BB%9F%E6%BA%90%E7%A0%81%E5%AE%9E%E7%8E%B01.html) - [vue3源码:05.Vue3响应式系统源码实现2](https://www.yangyitao.com/vue3/05.Vue3%E5%93%8D%E5%BA%94%E5%BC%8F%E7%B3%BB%E7%BB%9F%E6%BA%90%E7%A0%81%E5%AE%9E%E7%8E%B02.html) - [vue3源码:06.reactive、ref相关api源码实现](https://www.yangyitao.com/vue3/06.reactive%E3%80%81ref%E7%9B%B8%E5%85%B3api%E6%BA%90%E7%A0%81%E5%AE%9E%E7%8E%B0.html) - [vue3源码:07.故事要从createApp讲起](https://www.yangyitao.com/vue3/07.%E6%95%85%E4%BA%8B%E8%A6%81%E4%BB%8EcreateApp%E8%AE%B2%E8%B5%B7.html) - [vue3源码:08.虚拟Node到真实Node的路其实很长](https://www.yangyitao.com/vue3/08.%E8%99%9A%E6%8B%9FNode%E5%88%B0%E7%9C%9F%E5%AE%9ENode%E7%9A%84%E8%B7%AF%E5%85%B6%E5%AE%9E%E5%BE%88%E9%95%BF.html) - [vue3源码:09.组件渲染和更新流程](https://www.yangyitao.com/vue3/09.%E7%BB%84%E4%BB%B6%E6%B8%B2%E6%9F%93%E5%92%8C%E6%9B%B4%E6%96%B0%E6%B5%81%E7%A8%8B.html) - [vue3源码:10.名动江湖的diff算法](https://www.yangyitao.com/vue3/10.%E5%90%8D%E5%8A%A8%E6%B1%9F%E6%B9%96%E7%9A%84diff%E7%AE%97%E6%B3%95.html) - [vue3源码:11.编译优化之Block Tree 与 PatchFlags](https://www.yangyitao.com/vue3/11.%E7%BC%96%E8%AF%91%E4%BC%98%E5%8C%96%E4%B9%8BBlock%20Tree%20%E4%B8%8E%20PatchFlags.html) - [vue3源码:12.编译过程介绍及分析模版AST的生成过程](https://www.yangyitao.com/vue3/12.%E7%BC%96%E8%AF%91%E8%BF%87%E7%A8%8B%E4%BB%8B%E7%BB%8D%E5%8F%8A%E5%88%86%E6%9E%90%E6%A8%A1%E7%89%88AST%E7%9A%84%E7%94%9F%E6%88%90%E8%BF%87%E7%A8%8B.html) - [vue3源码:13.从AST到render函数（transform与代码生成）](https://www.yangyitao.com/vue3/13.%E4%BB%8EAST%E5%88%B0render%E5%87%BD%E6%95%B0%EF%BC%88transform%E4%B8%8E%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%EF%BC%89.html) **微前端源码** - [微前端01 : 乾坤的Js隔离机制原理剖析（快照沙箱、两种代理沙箱）](https://www.yangyitao.com/microfe/01.%E4%B9%BE%E5%9D%A4%E7%9A%84Js%E9%9A%94%E7%A6%BB%E6%9C%BA%E5%88%B6%E5%8E%9F%E7%90%86%E5%89%96%E6%9E%90%EF%BC%88%E5%BF%AB%E7%85%A7%E6%B2%99%E7%AE%B1%E3%80%81%E4%B8%A4%E7%A7%8D%E4%BB%A3%E7%90%86%E6%B2%99%E7%AE%B1%EF%BC%89.html) - [微前端02 : 乾坤的微应用加载流程分析(从微应用的注册到loadApp方法内部实现)](https://www.yangyitao.com/microfe/02.%E4%B9%BE%E5%9D%A4%E7%9A%84%E5%BE%AE%E5%BA%94%E7%94%A8%E5%8A%A0%E8%BD%BD%E6%B5%81%E7%A8%8B%E5%88%86%E6%9E%90(%E4%BB%8E%E5%BE%AE%E5%BA%94%E7%94%A8%E7%9A%84%E6%B3%A8%E5%86%8C%E5%88%B0loadApp%E6%96%B9%E6%B3%95%E5%86%85%E9%83%A8%E5%AE%9E%E7%8E%B0).html) - [微前端03 : 乾坤的沙箱容器分析（Js沙箱机制建立后的具体应用）](https://www.yangyitao.com/microfe/03.%E4%B9%BE%E5%9D%A4%E7%9A%84%E6%B2%99%E7%AE%B1%E5%AE%B9%E5%99%A8%E5%88%86%E6%9E%90%EF%BC%88Js%E6%B2%99%E7%AE%B1%E6%9C%BA%E5%88%B6%E5%BB%BA%E7%AB%8B%E5%90%8E%E7%9A%84%E5%85%B7%E4%BD%93%E5%BA%94%E7%94%A8%EF%BC%89.html) - [微前端04 : 乾坤的资源加载机制(import-html-entry的内部实现)](https://www.yangyitao.com/microfe/04.%E4%B9%BE%E5%9D%A4%E7%9A%84%E8%B5%84%E6%BA%90%E5%8A%A0%E8%BD%BD%E6%9C%BA%E5%88%B6(import-html-entry%E7%9A%84%E5%86%85%E9%83%A8%E5%AE%9E%E7%8E%B0).html) - [微前端05 : 乾坤loadMicroApp方法实现以及数据通信机制分析](https://www.yangyitao.com/microfe/05.%E4%B9%BE%E5%9D%A4loadMicroApp%E6%96%B9%E6%B3%95%E5%AE%9E%E7%8E%B0%E4%BB%A5%E5%8F%8A%E6%95%B0%E6%8D%AE%E9%80%9A%E4%BF%A1%E6%9C%BA%E5%88%B6%E5%88%86%E6%9E%90.html) - [微前端06 : single-spa的注册机制](https://www.yangyitao.com/microfe/06.single-spa%E7%9A%84%E6%B3%A8%E5%86%8C%E6%9C%BA%E5%88%B6.html) - [微前端07 : 对single-spa的路由管理及微应用状态管理的分析](https://www.yangyitao.com/microfe/07.%E5%AF%B9single-spa%E7%9A%84%E8%B7%AF%E7%94%B1%E7%AE%A1%E7%90%86%E5%8F%8A%E5%BE%AE%E5%BA%94%E7%94%A8%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E7%9A%84%E5%88%86%E6%9E%90.html) - [微前端08 : single-spa中的reroute函数](https://www.yangyitao.com/microfe/08.single-spa%E4%B8%AD%E7%9A%84reroute%E5%87%BD%E6%95%B0.html) **React18源码** - [手写React18源码](https://www.yangyitao.com/react18/) >距离上一篇文章已经过去快一年了，当时信誓旦旦准备出一系列文章来剖析Vue2的源码，后来又对Vue3进行了比较多的研究，但终究没以文章的形式呈现，是的，我食言了。但有技术热情支持的文章，虽会迟到但不会缺席，我会用一系列文章来呈现微前端框架的方方面面，不仅是核心流程，更多的会投入到细节中去，原理的了解有助于我们更好的利用一些工具进而更好的工作，然而细节才会真正的帮助我们成长。关于微前端的系列文章，我会从乾坤源码分析开始，深入到import-html-entry（乾坤的一个重要的依赖库）、single-spa的源码细节实现，进一步分析市面上一些其他微前端框架的思想和优劣，最终以构建一个强大的生产环境可用的微前端框架来结束这一系列文章，希望能对大家有所帮助，好了，现在就让我们开始吧。 ```ts /******************************************************************/ /***************** 欢迎关注微信公众号：杨艺韬 *****************/ /******************************************************************/ ``` ## 概述乾坤，作为一款微前端领域的知名框架，其建立在single-spa基础上。相较于single-spa，乾坤做了两件重要的事情，其一是加载资源，第二是进行资源隔离。而资源隔离又分为Js资源隔离和css资源隔离，本文主要探索的是乾坤的Js资源隔离机制。下文会分三部分来进行讲解： * 乾坤Js隔离机制的发展史； * 编码实现三种Js隔离机制的核心逻辑，并分析各自的优劣； * 分析乾坤的三种Js隔离机制的源代码，并深入细节进行解析； ## 乾坤Js隔离机制的发展史我们把Js隔离机制常常称作沙箱，事实上，乾坤有三种Js隔离机制，并且在源代码中也是以 SnapshotSandbox、LegacySandbox、ProxySandbox三个类名来指代三种不同的隔离机制。下文我们统一以快照沙箱、支持单应用的代理沙箱、支持多应用的代理沙箱，来代表这三种不同的Js隔离机制。那么问题来了，隔离就隔离，怎么有这么多沙箱？一开始乾坤也只有一种沙箱叫“快照沙箱”，也就是由SnapshotSandbox类来实现的沙箱。这个沙箱有个缺点，就是需要遍历window上的所有属性，性能较差。随着ES6的普及，利用Proxy可以比较良好的解决这个问题，这就诞生了LegacySandbox，可以实现和快照沙箱一样的功能，但是却性能更好，和SnapshotSandbox一样，由于会污染全局的window，LegacySandbox也仅仅允许页面同时运行一个微应用，所以我们也称LegacySandbox为支持单应用的代理沙箱。从LegacySandbox这个类名可以看出，一开始肯定是不叫LegacySandbox，是因为有了更好的机制，才将这个名字强加给它了。那这个更好的机制是什么呢，就是ProxySandbox，它可以支持一个页面运行多个微应用，因此我们称ProxySandbox为支持多应用的代理沙箱。事实上，LegacySandbox在未来应该会消失，因为LegacySandbox可以做的事情，ProxySandbox都可以做，而SanpsshotSandbox因为向下兼容的原因反而会和ProxySandbox长期并存。下面我们就编码实现这三种沙箱机制的核心逻辑。 ## 编码实现三个沙箱的核心逻辑为了理解方便，下文我会用最简单的逻辑最基础的语法来实现三个沙箱，逻辑肯定不会很严密，但可以方便我们更快速的理解其中的原理。 ### 快照沙箱-极简版 ```js class SnapshotSandBox{ windowSnapshot = {}; modifyPropsMap = {}; active(){ for(const prop in window){ this.windowSnapshot[prop] = window[prop]; } Object.keys(this.modifyPropsMap).forEach(prop=>{ window[prop] = this.modifyPropsMap[prop]; }); } inactive(){ for(const prop in window){ if(window[prop] !== this.windowSnapshot[prop]){ this.modifyPropsMap[prop] = window[prop]; window[prop] = this.windowSnapshot[prop]; } } } } // 验证: let snapshotSandBox = new SnapshotSandBox(); snapshotSandBox.active(); window.city = 'Beijing'; console.log("window.city-01:", window.city); snapshotSandBox.inactive(); console.log("window.city-02:", window.city); snapshotSandBox.active(); console.log("window.city-03:", window.city); snapshotSandBox.inactive(); //输出： //window.city-01: Beijing //window.city-02: undefined //window.city-03: Beijing ``` 从上面的代码可以看出，快照沙箱的核心逻辑很简单，就是在激活沙箱和沙箱失活的时候各做两件事情。 >注：**沙箱激活** 就是此时我们的微应用处于运行中，这个阶段有可能对window上的属性进行操作改变；**沙箱失活** 就是此时我们的微应用已经停止了对window的影响在沙箱激活的时候： * 记录window当时的状态（我们把这个状态称之为快照，也就是快照沙箱这个名称的来源）； * 恢复上一次沙箱失活时记录的沙箱运行过程中对window做的状态改变，也就是上一次沙箱激活后对window做了哪些改变，现在也保持一样的改变。在沙箱失活的时候： * 记录window上有哪些状态发生了变化（沙箱自激活开始，到失活的这段时间）； * 清除沙箱在激活之后在window上改变的状态，从代码可以看出，就是让window此时的属性状态和刚激活时候的window的属性状态进行对比，不同的属性状态就以快照为准，恢复到未改变之前的状态。从上面可以看出，快照沙箱存在两个重要的问题： * 会改变全局window的属性，如果同时运行多个微应用，多个应用同时改写window上的属性，势必会出现状态混乱，这也就是为什么快照沙箱无法支持多各微应用同时运行的原因。关于这个问题，下文中**支持多应用的代理沙箱**可以很好的解决这个问题； * 会通过`for(prop in window){}`的方式来遍历window上的所有属性，window属性众多，这其实是一件很耗费性能的事情。关于这个问题**支持单应用的代理沙箱**和**支持多应用的代理沙箱**都可以规避。 ### 支持单应用的代理沙箱-极简版 ```javascript class LegacySandBox{ addedPropsMapInSandbox = new Map(); modifiedPropsOriginalValueMapInSandbox = new Map(); currentUpdatedPropsValueMap = new Map(); proxyWindow; setWindowProp(prop, value, toDelete = false){ if(value === undefined && toDelete){ delete window[prop]; }else{ window[prop] = value; } } active(){ this.currentUpdatedPropsValueMap.forEach((value, prop)=>this.setWindowProp(prop, value)); } inactive(){ this.modifiedPropsOriginalValueMapInSandbox.forEach((value, prop)=>this.setWindowProp(prop, value)); this.addedPropsMapInSandbox.forEach((_, prop)=>this.setWindowProp(prop, undefined, true)); } constructor(){ const fakeWindow = Object.create(null); this.proxyWindow = new Proxy(fakeWindow,{ set:(target, prop, value, receiver)=>{ const originalVal = window[prop]; if(!window.hasOwnProperty(prop)){ this.addedPropsMapInSandbox.set(prop, value); }else if(!this.modifiedPropsOriginalValueMapInSandbox.has(prop)){ this.modifiedPropsOriginalValueMapInSandbox.set(prop, originalVal); } this.currentUpdatedPropsValueMap.set(prop, value); window[prop] = value; }, get:(target, prop, receiver)=>{ return target[prop]; } }); } } // 验证： let legacySandBox = new LegacySandBox(); legacySandBox.active(); legacySandBox.proxyWindow.city = 'Beijing'; console.log('window.city-01:', window.city); legacySandBox.inactive(); console.log('window.city-02:', window.city); legacySandBox.active(); console.log('window.city-03:', window.city); legacySandBox.inactive(); // 输出： // window.city-01: Beijing // window.city-02: undefined // window.city-03: Beijing ``` 从上面的代码可以看出，其实现的功能和快照沙箱是一模一样的，不同的是，通过三个变量来记住沙箱激活后window发生变化过的所有属性，这样在后续的状态还原时候就不再需要遍历window的所有属性来进行对比，提升了程序运行的性能。但是这仍然改变不了这种机制仍然污染了window的状态的事实，因此也就无法承担起同时支持多个微应用运行的任务。 ### 支持多应用的代理沙箱-极简版 ```javascript class ProxySandBox{ proxyWindow; isRunning = false; active(){ this.isRunning = true; } inactive(){ this.isRunning = false; } constructor(){ const fakeWindow = Object.create(null); this.proxyWindow = new Proxy(fakeWindow,{ set:(target, prop, value, receiver)=>{ if(this.isRunning){ target[prop] = value; } }, get:(target, prop, receiver)=>{ return prop in target ? target[prop] : window[prop]; } }); } } // 验证： let proxySandBox1 = new ProxySandBox(); let proxySandBox2 = new ProxySandBox(); proxySandBox1.active(); proxySandBox2.active(); proxySandBox1.proxyWindow.city = 'Beijing'; proxySandBox2.proxyWindow.city = 'Shanghai'; console.log('active:proxySandBox1:window.city:', proxySandBox1.proxyWindow.city); console.log('active:proxySandBox2:window.city:', proxySandBox2.proxyWindow.city); console.log('window:window.city:', window.city); proxySandBox1.inactive(); proxySandBox2.inactive(); console.log('inactive:proxySandBox1:window.city:', proxySandBox1.proxyWindow.city); console.log('inactive:proxySandBox2:window.city:', proxySandBox2.proxyWindow.city); console.log('window:window.city:', window.city); // 输出： // active:proxySandBox1:window.city: Beijing // active:proxySandBox2:window.city: Shanghai // window:window.city: undefined // inactive:proxySandBox1:window.city: Beijing // inactive:proxySandBox2:window.city: Shanghai // window:window.city: undefined ``` 从上面的代码可以发现，ProxySandbox，完全不存在状态恢复的逻辑，同时也不需要记录属性值的变化，因为所有的变化都是沙箱内部的变化，和window没有关系，window上的属性至始至终都没有受到过影响。我们可能会问，ProxySandbox已经这么好了，性能优良还支持多个微应用同时运行，那自然也支持单个微应用运行，那LegacySandbox存在还有什么意义呢，这个问题问得很好，其实本身在未来存在的意义也不大了，只不过是因为历史原因还在服役罢了，从Legacy这个单词就已经能推断出LegacySandbox在乾坤中的位置。我们可能还会继续问，那SnapshotSandbox存在还有什么意义呢，这个还真有不小作用，Proxy是新ES6的新事物，低版本浏览器无法兼容所以SnapshotSandbox还会长期存在。虽然这里极简版本逻辑很少，但是由于ProxySandbox要支持多个微应用运行，里面的逻辑会SnapshotsSandbox、LegacySandbox的都要丰富一些。其实到了这里，如果读者朋友已经理解了上面的思路，就可以说已经理解了乾坤的Js隔离机制。下面我们来看看乾坤的源码具体是怎么实现的这三个沙箱机制。 ## 乾坤的三个沙箱的源码分析 ### SnapshotSandbox 源码解析 ```typescript import type { SandBox } from '../interfaces'; import { SandBoxType } from '../interfaces'; function iter(obj: typeof window, callbackFn: (prop: any) => void) { // eslint-disable-next-line guard-for-in, no-restricted-syntax for (const prop in obj) { // patch for clearInterval for compatible reason, see #1490 if (obj.hasOwnProperty(prop) || prop === 'clearInterval') { callbackFn(prop); } } } /** * 基于 diff 方式实现的沙箱，用于不支持 Proxy 的低版本浏览器 */ export default class SnapshotSandbox implements SandBox { proxy: WindowProxy; name: string; type: SandBoxType; sandboxRunning = true; private windowSnapshot!: Window; private modifyPropsMap: Record = {}; constructor(name: string) { this.name = name; this.proxy = window; this.type = SandBoxType.Snapshot; } active() { // 记录当前快照 this.windowSnapshot = {} as Window; iter(window, (prop) => { this.windowSnapshot[prop] = window[prop]; }); // 恢复之前的变更 Object.keys(this.modifyPropsMap).forEach((p: any) => { window[p] = this.modifyPropsMap[p]; }); this.sandboxRunning = true; } inactive() { this.modifyPropsMap = {}; iter(window, (prop) => { if (window[prop] !== this.windowSnapshot[prop]) { // 记录变更，恢复环境 this.modifyPropsMap[prop] = window[prop]; window[prop] = this.windowSnapshot[prop]; } }); if (process.env.NODE_ENV === 'development') { console.info(`[qiankun:sandbox] ${this.name} origin window restore...`, Object.keys(this.modifyPropsMap)); } this.sandboxRunning = false; } } ``` 关于SnapshotSandbox，由于逻辑相对简单，和极简版相比其实差别不大。值得提出来的是里面的`iter`方法，将遍历window属性的代码抽离出来了，调用这个工具方法后，我们只需要专注于迭代到相应属性时候需要进行的处理。 ### LegacySandbox 源码解析 ```typescript /** * @author Kuitos * @since 2019-04-11 */ import type { SandBox } from '../../interfaces'; import { SandBoxType } from '../../interfaces'; import { getTargetValue } from '../common'; function isPropConfigurable(target: WindowProxy, prop: PropertyKey) { const descriptor = Object.getOwnPropertyDescriptor(target, prop); return descriptor ? descriptor.configurable : true; } /** * 基于 Proxy 实现的沙箱 * TODO: 为了兼容性 singular 模式下依旧使用该沙箱，等新沙箱稳定之后再切换 */ export default class LegacySandbox implements SandBox { /** 沙箱期间新增的全局变量 */ private addedPropsMapInSandbox = new Map(); /** 沙箱期间更新的全局变量 */ private modifiedPropsOriginalValueMapInSandbox = new Map(); /** 持续记录更新的(新增和修改的)全局变量的 map，用于在任意时刻做 snapshot */ private currentUpdatedPropsValueMap = new Map(); name: string; proxy: WindowProxy; globalContext: typeof window; type: SandBoxType; sandboxRunning = true; latestSetProp: PropertyKey | null = null; private setWindowProp(prop: PropertyKey, value: any, toDelete?: boolean) { if (value === undefined && toDelete) { // eslint-disable-next-line no-param-reassign delete (this.globalContext as any)[prop]; } else if (isPropConfigurable(this.globalContext, prop) && typeof prop !== 'symbol') { Object.defineProperty(this.globalContext, prop, { writable: true, configurable: true }); // eslint-disable-next-line no-param-reassign (this.globalContext as any)[prop] = value; } } active() { if (!this.sandboxRunning) { this.currentUpdatedPropsValueMap.forEach((v, p) => this.setWindowProp(p, v)); } this.sandboxRunning = true; } inactive() { if (process.env.NODE_ENV === 'development') { console.info(`[qiankun:sandbox] ${this.name} modified global properties restore...`, [ ...this.addedPropsMapInSandbox.keys(), ...this.modifiedPropsOriginalValueMapInSandbox.keys(), ]); } // renderSandboxSnapshot = snapshot(currentUpdatedPropsValueMapForSnapshot); // restore global props to initial snapshot this.modifiedPropsOriginalValueMapInSandbox.forEach((v, p) => this.setWindowProp(p, v)); this.addedPropsMapInSandbox.forEach((_, p) => this.setWindowProp(p, undefined, true)); this.sandboxRunning = false; } constructor(name: string, globalContext = window) { this.name = name; this.globalContext = globalContext; this.type = SandBoxType.LegacyProxy; const { addedPropsMapInSandbox, modifiedPropsOriginalValueMapInSandbox, currentUpdatedPropsValueMap } = this; const rawWindow = globalContext; const fakeWindow = Object.create(null) as Window; const setTrap = (p: PropertyKey, value: any, originalValue: any, sync2Window = true) => { if (this.sandboxRunning) { if (!rawWindow.hasOwnProperty(p)) { addedPropsMapInSandbox.set(p, value); } else if (!modifiedPropsOriginalValueMapInSandbox.has(p)) { // 如果当前 window 对象存在该属性，且 record map 中未记录过，则记录该属性初始值 modifiedPropsOriginalValueMapInSandbox.set(p, originalValue); } currentUpdatedPropsValueMap.set(p, value); if (sync2Window) { // 必须重新设置 window 对象保证下次 get 时能拿到已更新的数据 (rawWindow as any)[p] = value; } this.latestSetProp = p; return true; } if (process.env.NODE_ENV === 'development') { console.warn(`[qiankun] Set window.${p.toString()} while sandbox destroyed or inactive in ${name}!`); } // 在 strict-mode 下，Proxy 的 handler.set 返回 false 会抛出 TypeError，在沙箱卸载的情况下应该忽略错误 return true; }; const proxy = new Proxy(fakeWindow, { set: (_: Window, p: PropertyKey, value: any): boolean => { const originalValue = (rawWindow as any)[p]; return setTrap(p, value, originalValue, 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 if (p === 'top' || p === 'parent' || p === 'window' || p === 'self') { return proxy; } const value = (rawWindow as any)[p]; return getTargetValue(rawWindow, 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 { return p in rawWindow; }, getOwnPropertyDescriptor(_: Window, p: PropertyKey): PropertyDescriptor | undefined { const descriptor = Object.getOwnPropertyDescriptor(rawWindow, p); // A property cannot be reported as non-configurable, if it does not exists as an own property of the target object if (descriptor && !descriptor.configurable) { descriptor.configurable = true; } return descriptor; }, defineProperty(_: Window, p: string | symbol, attributes: PropertyDescriptor): boolean { const originalValue = (rawWindow as any)[p]; const done = Reflect.defineProperty(rawWindow, p, attributes); const value = (rawWindow as any)[p]; setTrap(p, value, originalValue, false); return done; }, }); this.proxy = proxy; } } ``` 和极简版相比，会发现源码中LegacySandbox的proxy对象除了get、set，还有has、getWownPropertyDescriptor、defineProperty等方法，仔细看会发现，这里面的逻辑，不管是返回值还是设置值，都和get、set一样，都是针对的全局window。看到这里有没有觉得Js基本功很重要，如果对于赋值操作只管set，忽略方法Object.defineProperty也可以改变值，那将这个程序将会漏洞百出。同样如果不关心descriptor的状态，在实际编码过程中，可能就会忽略代码中注释指出的问题 ```javascript // A property cannot be reported as non-configurable, if it does not exists as an own property of the target object // 译: 在getOwnPropertyDescriptor方法中，如果返回的descriptor不是target自己的属性的descriptor（所谓自己的属性的descriptor，就是能通过Object.getOwnPropertyDescriptor方法获取的descriptor），那这个descriptor的configurable值就不能是false ``` ### ProxySandbox 源码解析 ```typescript /* eslint-disable no-param-reassign */ /** * @author Kuitos * @since 2020-3-31 */ import type { SandBox } from '../interfaces'; import { SandBoxType } from '../interfaces'; import { nativeGlobal, nextTask } from '../utils'; import { getTargetValue, setCurrentRunningApp, getCurrentRunningApp } from './common'; type SymbolTarget = 'target' | 'globalContext'; type FakeWindow = Window & Record; /** * fastest(at most time) unique array method * @see https://jsperf.com/array-filter-unique/30 */ function uniq(array: Array) { return array.filter(function filter(this: PropertyKey[], element) { return element in this ? false : ((this as any)[element] = true); }, Object.create(null)); } // zone.js will overwrite Object.defineProperty const rawObjectDefineProperty = Object.defineProperty; const variableWhiteListInDev = process.env.NODE_ENV === 'development' || window.__QIANKUN_DEVELOPMENT__ ? [ // for react hot reload // see https://github.com/facebook/create-react-app/blob/66bf7dfc43350249e2f09d138a20840dae8a0a4a/packages/react-error-overlay/src/index.js#L180 '__REACT_ERROR_OVERLAY_GLOBAL_HOOK__', ] : []; // who could escape the sandbox const variableWhiteList: PropertyKey[] = [ // FIXME System.js used a indirect call with eval, which would make it scope escape to global // To make System.js works well, we write it back to global window temporary // see https://github.com/systemjs/systemjs/blob/457f5b7e8af6bd120a279540477552a07d5de086/src/evaluate.js#L106 'System', // see https://github.com/systemjs/systemjs/blob/457f5b7e8af6bd120a279540477552a07d5de086/src/instantiate.js#L357 '__cjsWrapper', ...variableWhiteListInDev, ]; /* variables who are impossible to be overwrite need to be escaped from proxy sandbox for performance reasons */ const unscopables = { undefined: true, Array: true, Object: true, String: true, Boolean: true, Math: true, Number: true, Symbol: true, parseFloat: true, Float32Array: true, isNaN: true, Infinity: true, Reflect: true, Float64Array: true, Function: true, Map: true, NaN: true, Promise: true, Proxy: true, Set: true, parseInt: true, requestAnimationFrame: true, }; const useNativeWindowForBindingsProps = new Map([ ['fetch', true], ['mockDomAPIInBlackList', process.env.NODE_ENV === 'test'], ]); function createFakeWindow(globalContext: Window) { // map always has the fastest performance in has check scenario // see https://jsperf.com/array-indexof-vs-set-has/23 const propertiesWithGetter = new Map(); const fakeWindow = {} as FakeWindow; /* copy the non-configurable property of global to fakeWindow 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. */ Object.getOwnPropertyNames(globalContext) .filter((p) => { const descriptor = Object.getOwnPropertyDescriptor(globalContext, p); return !descriptor?.configurable; }) .forEach((p) => { const descriptor = Object.getOwnPropertyDescriptor(globalContext, p); if (descriptor) { const hasGetter = Object.prototype.hasOwnProperty.call(descriptor, 'get'); /* make top/self/window property configurable and writable, otherwise it will cause TypeError while get trap return. see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/get > The value reported for a property must be the same as the value of the corresponding target object property if the target object property is a non-writable, non-configurable data property. */ if ( p === 'top' || p === 'parent' || 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} */ if (!hasGetter) { descriptor.writable = true; } } if (hasGetter) propertiesWithGetter.set(p, true); // freeze the descriptor to avoid being modified by zone.js // see https://github.com/angular/zone.js/blob/a5fe09b0fac27ac5df1fa746042f96f05ccb6a00/lib/browser/define-property.ts#L71 rawObjectDefineProperty(fakeWindow, p, Object.freeze(descriptor)); } }); return { fakeWindow, propertiesWithGetter, }; } let activeSandboxCount = 0; /** * 基于 Proxy 实现的沙箱 */ export default class ProxySandbox implements SandBox { /** window 值变更记录 */ private updatedValueSet = new Set(); name: string; type: SandBoxType; proxy: WindowProxy; globalContext: typeof window; sandboxRunning = true; latestSetProp: PropertyKey | null = null; private registerRunningApp(name: string, proxy: Window) { if (this.sandboxRunning) { const currentRunningApp = getCurrentRunningApp(); if (!currentRunningApp || currentRunningApp.name !== name) { setCurrentRunningApp({ name, window: proxy }); } // FIXME if you have any other good ideas // remove the mark in next tick, thus we can identify whether it in micro app or not // this approach is just a workaround, it could not cover all complex cases, such as the micro app runs in the same task context with master in some case nextTask(() => { setCurrentRunningApp(null); }); } } active() { if (!this.sandboxRunning) activeSandboxCount++; this.sandboxRunning = true; } inactive() { if (process.env.NODE_ENV === 'development') { console.info(`[qiankun:sandbox] ${this.name} modified global properties restore...`, [ ...this.updatedValueSet.keys(), ]); } if (--activeSandboxCount === 0) { variableWhiteList.forEach((p) => { if (this.proxy.hasOwnProperty(p)) { // @ts-ignore delete this.globalContext[p]; } }); } this.sandboxRunning = false; } constructor(name: string, globalContext = window) { this.name = name; this.globalContext = globalContext; this.type = SandBoxType.Proxy; const { updatedValueSet } = this; const { fakeWindow, propertiesWithGetter } = createFakeWindow(globalContext); const descriptorTargetMap = new Map(); const hasOwnProperty = (key: PropertyKey) => fakeWindow.hasOwnProperty(key) || globalContext.hasOwnProperty(key); const proxy = new Proxy(fakeWindow, { set: (target: FakeWindow, p: PropertyKey, value: any): boolean => { if (this.sandboxRunning) { this.registerRunningApp(name, proxy); // We must kept its description while the property existed in globalContext before if (!target.hasOwnProperty(p) && globalContext.hasOwnProperty(p)) { const descriptor = Object.getOwnPropertyDescriptor(globalContext, p); const { writable, configurable, enumerable } = descriptor!; if (writable) { Object.defineProperty(target, p, { configurable, enumerable, writable, value, }); } } else { // @ts-ignore target[p] = value; } if (variableWhiteList.indexOf(p) !== -1) { // @ts-ignore globalContext[p] = value; } updatedValueSet.add(p); this.latestSetProp = p; return true; } if (process.env.NODE_ENV === 'development') { console.warn(`[qiankun] Set window.${p.toString()} while sandbox destroyed or inactive in ${name}!`); } // 在 strict-mode 下，Proxy 的 handler.set 返回 false 会抛出 TypeError，在沙箱卸载的情况下应该忽略错误 return true; }, get: (target: FakeWindow, p: PropertyKey): any => { this.registerRunningApp(name, proxy); if (p === Symbol.unscopables) return unscopables; // avoid who using window.window or window.self to escape the sandbox environment to touch the really window // see https://github.com/eligrey/FileSaver.js/blob/master/src/FileSaver.js#L13 if (p === 'window' || p === 'self') { return proxy; } // hijack globalWindow accessing with globalThis keyword if (p === 'globalThis') { return proxy; } if ( p === 'top' || p === 'parent' || (process.env.NODE_ENV === 'test' && (p === 'mockTop' || p === 'mockSafariTop')) ) { // if your master app in an iframe context, allow these props escape the sandbox if (globalContext === globalContext.parent) { return proxy; } return (globalContext as any)[p]; } // proxy.hasOwnProperty would invoke getter firstly, then its value represented as globalContext.hasOwnProperty if (p === 'hasOwnProperty') { return hasOwnProperty; } if (p === 'document') { return document; } if (p === 'eval') { return eval; } const value = propertiesWithGetter.has(p) ? (globalContext as any)[p] : p in target ? (target as any)[p] : (globalContext as any)[p]; /* Some dom api must be bound to native window, otherwise it would cause exception like 'TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation' See this code: const proxy = new Proxy(window, {}); const proxyFetch = fetch.bind(proxy); proxyFetch('https://qiankun.com'); */ const boundTarget = useNativeWindowForBindingsProps.get(p) ? nativeGlobal : globalContext; return getTargetValue(boundTarget, value); }, // trap in operator // see https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/constants.js#L12 has(target: FakeWindow, p: string | number | symbol): boolean { return p in unscopables || p in target || p in globalContext; }, getOwnPropertyDescriptor(target: FakeWindow, p: string | number | symbol): PropertyDescriptor | undefined { /* 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)) { const descriptor = Object.getOwnPropertyDescriptor(target, p); descriptorTargetMap.set(p, 'target'); return descriptor; } if (globalContext.hasOwnProperty(p)) { const descriptor = Object.getOwnPropertyDescriptor(globalContext, p); descriptorTargetMap.set(p, 'globalContext'); // A property cannot be reported as non-configurable, if it does not exists as an own property of the target object if (descriptor && !descriptor.configurable) { descriptor.configurable = true; } return descriptor; } return undefined; }, // trap to support iterator with sandbox ownKeys(target: FakeWindow): ArrayLike { return uniq(Reflect.ownKeys(globalContext).concat(Reflect.ownKeys(target))); }, defineProperty(target: Window, p: PropertyKey, attributes: PropertyDescriptor): boolean { const from = descriptorTargetMap.get(p); /* Descriptor must be defined to native window while it comes from native window via Object.getOwnPropertyDescriptor(window, p), otherwise it would cause a TypeError with illegal invocation. */ switch (from) { case 'globalContext': return Reflect.defineProperty(globalContext, p, attributes); default: return Reflect.defineProperty(target, p, attributes); } }, deleteProperty: (target: FakeWindow, p: string | number | symbol): boolean => { this.registerRunningApp(name, proxy); if (target.hasOwnProperty(p)) { // @ts-ignore delete target[p]; updatedValueSet.delete(p); return true; } return true; }, // makes sure `window instanceof Window` returns truthy in micro app getPrototypeOf() { return Reflect.getPrototypeOf(globalContext); }, }); this.proxy = proxy; activeSandboxCount++; } } ``` 上面是ProxySandbox的全部源码，我拿其中一个细节聊一聊吧。里面有一个`uniq`方法，我单独放在下面。filter的第1个参数是一个函数，第二个参数是一个对象。具体参数的含义可以查阅相关文档。这里之所以提出来，就是里面巧妙的运用了这个this。通过在this上设置属性，并以之为条件来实现去重功能。另外关于这个this，会发现`function filter(this: PropertyKey[], element) `第一个参数是this，正常在javascript这是会运行出错的，其实出现在这里仅仅是typescript用作类型推断，编译后应该是没有这个参数的，所以我们可以认为这里的第一个参数就是element，我在第一次阅读到这里的时候因为对这个typescript的小语法点不清楚，疑惑了好一会查文档才搞清楚。 ```typescript /** * fastest(at most time) unique array method * @see https://jsperf.com/array-filter-unique/30 */ function uniq(array: Array) { return array.filter(function filter(this: PropertyKey[], element) { return element in this ? false : ((this as any)[element] = true); }, Object.create(null)); } ``` 里面还有很多细节，有些不太重要，还有一些地方我也还没搞清楚，比如里面为什么需要一个`propertiesWithGetter`变量来做一些条件判断，还要继续研究，后续明白了就补上相关解析。也欢迎读者朋友们留言多交流，深挖细节，共同进步。欢迎关注我的`微信订阅号`:`杨艺韬` 可以更早阅读新文章。