Web前端最全微前端的设计思想(1)，2024年最新2024年面试

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

this.Apps.push({

entry: r.path,

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;

}

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】