微前端的设计思想

activeRule: (location) => (location.href.indexOf(r.activeWhen) !== -1)

});

});

}

3.1.2 拦截

我们需要通过拦截注册路由事件以保证主/子应用的逻辑处理时机。

import Hailuo from “.”;

// 需要拦截的实践

const EVENTS_NAME = [‘hashchange’, ‘popstate’];

// 实践收集

const EVENTS_STACKS = {

hashchange: [],

popstate: []

};

// 基座切换路由后的逻辑

const handleUrlRoute = (…args) => {

// 加载对应的子应用

Hailuo.loadApp();

// 执行子应用路由的方法

callAllEventListeners(…args);

};

export const patch = () => {

// 1. 先保证基座的事件监听路由的变化

window.addEventListener(‘hashchange’, handleUrlRoute);

window.addEventListener(‘popstate’, handleUrlRoute);

// 2. 重写addEventListener和removeEventListener

// 当遇到路由事件后：收集到stack中

// 如果是其他事件：执行original事件监听方法

const originalAddEventListener = window.addEventListener;

const originalRemoveEventListener = window.removeEventListener;

window.addEventListener = (name, handler) => {

if(name && EVENTS_NAME.includes(name) && typeof handler === “function”) {

EVENTS_STACKS[name].indexOf(handler) === -1 && EVENTS_STACKS[name].push(handler);

return;

}

return originalAddEventListener.call(this, name, handler);

};

window.removeEventListener = (name, handler) => {

if(name && EVENTS_NAME.includes(name) && typeof handler === “function”) {

EVENTS_STACKS[name].indexOf(handler) === -1 &&

(EVENTS_STACKS[name] = EVENTS_STACKS[name].filter((fn) => (fn !== handler)));

return;

}

return originalRemoveEventListener.call(this, name, handler);

};

// 手动给pushState和replaceState添加上监听路由变化的能力

// 有点像vue2中数组的变异方法

const createPopStateEvent = (state: any, name: string) => {

const evt = new PopStateEvent(“popstate”, { state });

evt[‘trigger’] = name;

return evt;

};

const patchUpdateState = (updateState: (data: any, title: string, url?: string)=>void, name: string) => {

return function() {

const before = window.location.href;

updateState.apply(this, arguments);

const after = window.location.href;

if(before !== after) {

handleUrlRoute(createPopStateEvent(window.history.state, name));

}

};

}

window.history.pushState = patchUpdateState(

window.history.pushState,

“pushState”

);

window.history.replaceState = patchUpdateState(

window.history.replaceState,

“replaceState”

);

}

3.1.3 加载

通过路由可以匹配到符合的子应用后，那么该如何将它加载到页面呢？

我们知道SPA的html文件只是一个空模板，实质是通过js驱动的页面渲染，那么我们把某一个页面的js文件，全都剪切到另一个html的<script>标签中执行，就实现了A页面加载B的页面。

async loadApp() {

// 加载对应的子应用

const shouldMountApp = this.Apps.filter(this.isActive);

const app = shouldMountApp[0];

const subapp = document.getElementById(‘submodule’);

await fetchUrl(app.entry)

// 将html渲染到主应用里

.then((text) => {

subapp.innerHTML = text;

});

// 执行 fetch到的js

const res = await fetchScripts(subapp, app.entry);

if(res.length) {

execScript(res.reduce((t, c) => (t+c), ‘’));

}

}

Better实践 —— 【html-entry】

它是一个加载并处理html、js、css的库。

它不是去加载一个个的js、css资源，而是去加载微应用的入口html。

• 第一步 ：发送请求，获取子应用入口HTML。

• 第二步 ：处理该html文档，去掉html、head标签，处理静态资源。

• 第三步 ：处理sourceMap；处理js沙箱；找到入口js。

• 第四步 ：获取子应用provider内容

同时，约束了子应用提供加载和销毁函数（这个结构是不是很眼熟）：

export function provider({ dom, basename, globalData }) {

return {

render() {

ReactDOM.render(

,

dom ? dom.querySelector(‘#root’) : document.querySelector(‘#root’)

);

},

destroy({ dom }) {

if (dom) {

ReactDOM.unmountComponentAtNode(dom);

}

},

};

}

3.2 沙箱（Sandbox）

---

沙箱是什么：你可以理解为对作用域的一种比喻，在一个沙箱内，我的任何操作不会对外界产生影响。

Why we need sandbox？

当我们集成了很多子应用到一起后，势必会出现冲突，如全局变量冲突、样式冲突，这些冲突可能会导致应用样式异常，甚至功能不可用。所以想让微前端达到生产可用的程度，让每个子应用之间达到一定程度隔离的沙箱机制是必不可少的。

实现沙箱，最重要的是：控制沙箱的开启和关闭。

3.2.1 快照沙箱

原理就是运行在某一环境A时，打一个快照，当从别的环境B切换回来的时候，我们通过这个快照就可以立即恢复之前环境A时的情况，比如：

// 切换到环境A

window.a = 2;

// 切换到环境B

window.a = 3;

// 切换到环境A

console.log(a);    // 2

实现思路，我们假设有Sandbox这个类：

class Sandbox {

private original;

private mutated;

sandBoxActive: () => void;

sandBoxDeactivate: () => void;

}

const sandbox = new Sandbox();

const code = “…”;

sandbox.activate();

execScript(code);

sandbox.sandBoxDeactivate();

来理一下这个逻辑：

1. 在sandBoxActive的时候，把变量存到original里；

2. 在sandBoxDeactivate的时候，把当前变量和original对比，不同的存到mutated（保存了快照），然后把变量的状态恢复到original；

3. 当该沙箱再次触发sandBoxActive，就可以把mutated的变量恢复到window上，实现沙箱的切换。

3.2.2 VM沙箱

类似于node中的vm模块（可在 V8 虚拟机上下文中编译和运行代码）：http://nodejs.cn/api/vm.html#vm_vm_executing_javascript

快照沙箱的缺点是无法同时支持多个实例。 但是vm沙箱利用proxy就可以解决这个问题。

class SandBox {

execScript(code: string) {

const varBox = {};

const fakeWindow = new Proxy(window, {

get(target, key) {

return varBox[key] || window[key];

},

set(target, key, value) {

varBox[key] = value;

return true;

}

})

const fn = new Function(‘window’, code);

fn(fakeWindow);

}

}

export default SandBox;

// 实现了隔离

const sandbox = new Sandbox();

sandbox.execScript(code)；

const sandbox2 = new Sandbox();

sandbox2.execScript(code2)；

// map

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
nst sandbox = new Sandbox();

sandbox.execScript(code)；

const sandbox2 = new Sandbox();

sandbox2.execScript(code2)；

// map

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-eF66gj3V-1715244936093)]

[外链图片转存中…(img-QLhG91Tj-1715244936093)]

[外链图片转存中…(img-d9TSkDcQ-1715244936094)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！