一.思考

微前端应用加载 刚开始我加载A应用 window.a B应用 window.a 怎样可以俩个应用里的a属性互不影响

二.什么是沙箱

①应用的运行 从开始到结束 切换后不会影响全局
②创造一个干净的环境给这个子应用使用，当切换时，可以选择丢弃属性和恢复属性

三.实现

单应用切换 JS沙箱 乾坤的俩种机制

①快照沙箱

举例 : 比如想看你变没变样 一年前拍一张 再拍一张 (将区别保存起来) 在回到一年前 相当于这一年干了很多事 等会要是想还原 就可以把区别在应用到这一年

核心:前后比对，把区别保存起来，在回到以前，如果想在恢复这个沙箱就把刚才的区别运行回来

缺点: 如果是多个子应用就不能使用这种方式了,可以完全使用es6 proxy

class SanpshotSandbox {
    constructor() {
        this.proxy = window; //window属性
        this.modifyPropsMap = {} //记录在window上的修改
        this.active();
    }

    // 激活沙箱
    active() {
        this.windowSnapshot = {}; //拍照
        for (const prop in window) {
            if (window.hasOwnProperty(prop)) {
                this.windowSnapshot[prop] = window[prop];
            }
        }
        // 将上次的修改进行一个应用 到 当前的window上
        Object.keys(this.modifyPropsMap).forEach(p => {
            // 将上次修改过得赋到window上
            window[p] = this.modifyPropsMap[p];
        })
    }

    // 丢弃沙箱
    inactve() {
        for (const prop in window) {
            if (window.hasOwnProperty(prop)) {
                if (window[prop] !== this.windowSnapshot[prop]) {
                    // 拿现在的和一年前的作比较 如果他俩不一样了 说明换这个属性有变化 有变化就把变化记录在变化表里
                    this.modifyPropsMap[prop] = window[prop]
                    // 最后在将window变回一年前
                    window[prop] = this.windowSnapshot[prop]
                }
            }
        }
    }
}

let sandbox = new SanpshotSandbox();

//通过沙箱返回一个代理
((window) => {
    window.a = 1;
    window.b = 2;
    console.log(window.a, window.b); // 1  2
    sandbox.inactve(); //失去激活后
    console.log(window.a, window.b); // undefined  undefined
    sandbox.actve(); //激活
    console.log(window.a, window.b);  // 1  2
})(sandbox.proxy); //sandbox.proxy就是window

②proxy沙箱

原理 ：new俩个盒子 这俩个盒子传入的属性并不是window 取值的时候先会取代理的window 取不到才会取原window 这种方案不会影响全局window

优点:可以实现多应用沙箱 把不同的应用用不同的代理来处理
缺点:但是有些浏览器不支持proxy使用

class ProxySandbox {
    constructor(){
        const rawWindow = window;
        const fakeWindow = {};
        const proxy = new Proxy(fakeWindow,{
            set(target,p,value){
                target[p] = value;
                return true
            },
            get(target,p){
                return target[p] || fakeWindow[p];
            }
        });
        this.proxy = proxy;
    }
}

let sandbox1 = new ProxySandbox();
let sandbox2 = new ProxySandbox();
window.a = 1;
((window) => {
    window.a = 'hello';
    console.log(window.a); 
})(sandbox1.proxy); 
((window) => {
    window.a = 'hello';
    console.log(window.a); 
})(sandbox2.proxy); 

四.对比

俩种情况 ①父应用和子应用 ②多应用

image.png