feat: update

Author: funnycoderstar

docs/jsCode/LazyMan.md

@@ -111,6 +111,7 @@ class _LazyMan {
     // 每次调用时清楚timer，上一次设置的执行taskQueue就不会运行。
     // 重新设置timer,会在下一次调用完后进入执行。
     // 当所有调用结束后，就会顺利执行taskQueue队列里的事件
+    // 因为要收集好所有任务才开始执行，所以我们要用 setTimeout 构造一个异步的宏任务，确保任务的执行在同步代码后执行。
     next() {
         clearTimeout(this.timer);
         this.timer = setTimeout(async () => {
@@ -160,7 +161,28 @@ function LazyMan(name) {
 
 考察知识点：闭包，事件轮询机制，链式调用，队列
 
+从题目可以看出：
+
+1. 同步的代码调用，但是是异步的结果输出。
+2. 没有结束时刻，怎么知道调用哪个函数的时候应该输出
+
+### 思路分析
+
+1. LazyMan(“Hank”)调用，而不是 new LazyMan(“Hank”)创建 => 工厂方法返回 new 对象
+2. 链式调用实现 => 每次调用返回 this
+3. sleep 需要等待 10s => setTimeout 实现 sleep
+4. setTimeout 会放到事件列表中排队，继续执行后面的代码，但是题目中 sleep 需要阻塞后续操作。 => 考虑将 sleep 封装成 promise，使用 async/await 等待 sleep，实现阻塞。
+5. sleepFirst 每次在最开始执行，考虑将 sleepFirst 插入到事件第一个执行。
+6. 不到最后一刻，是不知道调用顺序是什么的，所以需要先是使用一个队列把时间收集起来，最后再统一执行
+
+
+    因此，首先我们需要 taskQueue 记录事件列表，直到调用完成后再执行 taskQueue 里面的事件。怎么实现调用完成后才开始执行 taskQueue 的事件呢？
+    答案：setTimeout 机制。setTimeout(function(){xxx},0)不是立马执行，这是因为 js 是单线程的，有一个事件队列机制，setTimeout 和 setInterval 的回调会插入到延迟时间塞入事件队列中，排队执行。
+
 ### 参考
 
 -   [如何实现一个 LazyMan?](https://zhuanlan.zhihu.com/p/22387417)
 -   [LazyMan 的 ES6 实现](https://segmentfault.com/a/1190000022958490)
+-   [多种方式实现 LazyMan](https://xie.infoq.cn/article/818cefbaf4ec318dda0e8eb2a)
+-   [编程题：实现一个 LazyMan 方法](https://developer.51cto.com/article/708855.html)
+-   [字节跳动面试：实现一个 LazyMan 函数](https://blog.csdn.net/qq_39261142/article/details/110425286)

docs/jsCode/沙箱.md

@@ -0,0 +1,179 @@
+## 什么是沙箱
+
+### 沙箱的应用场景
+
+### 沙箱的实现方式
+
+## 简单实现一个沙箱
+
+### 基于快照实现一个沙箱
+
+支持单应用的代理沙箱-极简版
+
+```js
+class SnapshotSandbox {
+    constructor() {
+        this.proxy = window;
+        this.sandboxSnapshot = {}; // 记录在沙箱上的所有属性快照
+        this.windowSnapshot = {}; // 存储window上的所有属性快照
+        this.active();
+    }
+    // 激活沙箱，在沙箱里进行操作
+    active() {
+        for (const prop in window) {
+            if (window.hasOwnProperty(prop)) {
+                // 激活时，先把window上的属性保存在 windowSnapshot
+                this.windowSnapshot[prop] = window[prop];
+            }
+        }
+        // 再把沙箱之前的属性重新赋值给 window
+        Object.keys(this.sandboxSnapshot).forEach((p) => {
+            window[p] = this.sandboxSnapshot[p];
+        });
+    }
+    //失活
+    inActive() {
+        for (const prop in window) {
+            if (window.hasOwnProperty(prop)) {
+                // 比较现在的window 和之前的 window对比有啥区别
+                if (window[prop] !== this.windowSnapshot[prop]) {
+                    // 如果不一样，就说明有变化，需要保存变化
+                    // 把沙箱的属性保存在sandboxSnapshot
+                    this.sandboxSnapshot[prop] = window[prop];
+                    // 需要将window上之间的属性 windowSnapshot 再赋值给window
+                    window[prop] = this.windowSnapshot[prop];
+                }
+            }
+        }
+    }
+}
+
+let sandBox = new SnapshotSandbox();
+// 应用的运行从开始到结束，切换后不会影响全局
+((window) => {
+    window.a = 1;
+    window.b = 2;
+    console.log(window.a, window.b); // 1, 2
+    // 失活
+    sandBox.inActive();
+    console.log(window.a, window.b); // undefined undefined
+    // 激活还原
+    sandBox.active();
+    console.log(window.a, window.b); // 1, 2
+})(sandBox.proxy); // sandBox.proxy就是window
+```
+
+存在的问题
+
+### 基于 proxy 实现一个沙箱
+
+```js
+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
+```
+
+支持多应用的代理沙箱-极简版
+
+```js
+class ProxySandBox {
+    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];
+            },
+        });
+    }
+    proxyWindow;
+    isRunning = false;
+    active() {
+        this.isRunning = true;
+    }
+    inactive() {
+        this.isRunning = false;
+    }
+}
+// 验证：
+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
+```
+
+## 参考
+
+-   [微前端 01 : 乾坤的 Js 隔离机制（快照沙箱、两种代理沙箱）](https://www.scanonly.com/article/298077)