微前端的设计思想

快来打我* 2022-09-04 06:52 126阅读 0赞

#  大厂技术  坚持周更  精选好文 #

> 记得作为实习生刚到公司的第一天就被什么monorepo、微前端等名词搞得一头雾水，经过一段时间的学习终于摸清了一点门道，那么今天就来和大家聊一下我对微前端设计的看法和理解。

# 1、引入：什么是微服务？ #

微服务是近几年在互联网业界内非常???? 的一个词，在俺们大学沸点工作室Java组也已经有Spring Cloud微服务的实践先例，那我们作为前端的角度，该怎么理解微服务呢？

可以看看下面这个???? ：

一个系统有PC Web端、手机H5、和后台管理系统，那么整个系统的结构大概就像这样：

![54e00db57c1f71420ce8ce62eeca5b2c.png][] image.png

这样会造成什么问题嘞？

*  单体服务端项目过大，不利于**快速上手**和**打包编译**；
 *  不同系统会有相同的功能点，导致**产生大量重复的无意义的接口**；
 *  **数据库设计复杂**。

那么微服务又是怎么解决的嘞？

核心就是就是将系统拆分成不同的服务，通过网关和controller来进行简单的控制和调用，各服务分而治之、互不影响。

我们现在再看一哈新的项目结构：

![a605ee172e89c84cb47ccfa31e9faccf.png][] image.png

通过服务的拆分后，我们的系统是不是更加清晰了???? ，那么问题来了？

> 这和我们本次的主题，微前端有什么关系吗

前端的微前端思想其实同样来自于此：**通过拆分服务，实现逻辑的解耦**。

# 2、前端微服务设计 #

## 2.1 为什么前端需要微服务？ ##

当我们create一个新项目后，想必各位都有以下体会：

> 写项目的第一天：打包 20s

> 写项目的一周：打包 1min

> 写项目的一个月：打包 5min

*之前体验过公司老项目，代码量非常大，可读性不高，打包需要10+分钟*。

随着项目体量的增加，一个巨大的单体应用是难以维护的，从而导致：开发效率低、上线困难等一系列问题。

## 2.2 微前端的应用场景 ##

对于一个管理系统，它的页面通常是长这个样子的：

![2a187ea27aecbc68944e456545ed4841.png][] image.png

侧边栏的每一个tab，下面可能还有若干的二级节点甚至是三级节点，久而久之，这样的一个管理系统，终究也会像前面提到的服务端一样，难以维护。

如果我们用微前端该如何设计呢？

每一个`tab`就是一个子应用，有自己的状态；自己的作用域；并且单独打包发布。在全局层面只需要用一个主应用（master）就可以实现管理和控制。

一句话来讲就是：**应用分发路由->路由分发应用。**

## 2.3 早期微前端思路——iFrame ##

> Why not iframe ?

对于路由分发应用这件事：我们只需要通过iFrame就可以实现了，当点击不同的tab时，view区域展示的是iFrame组件，根据路由动态的改变iframe的`src`属性，那不是so easy？

**它的好处有哪些？**

*  自带样式
 *  沙盒机制（环境隔离）
 *  前端之间可以相互独立运行

**那我们为什么没有使用iFrame做微前端呢？**

*  CSS问题（视窗大小不同步）
 *  子应用通信（使用postMessage并不友好）
 *  组件不能共享
 *  使用创建 iframe，可能会对性能或者内存造成影响

微前端的设计构思：不仅能继承iframe的优点，又可以解决它的不足。

# 3、微前端核心逻辑 #

## 3.1 子应用加载（Loader） ##

先来看看微前端的流程：

![c0909c584deee70d172e7f7b64f2045e.png][] image.png

我们可以达成的共识是：**需要先加载基座（master），再把选择权交给主应用，由主应用根据注册过的子应用来抉择加载谁，当子应用加载成功后，再由vue-router或react-router来根据路由渲染组件。**

### 3.1.1 注册 ###

如果精简代码逻辑，在基座中实际上只需要做三件事：

// 假设我们的微前端框架叫hailuo
    
    import Hailuo from './lib/index';
    
    
    
    // 1. 声明子应用
    
    const routers = [
    
        {
    
            path: 'http://localhost:8081',
    
            activeWhen: '/subapp1'
    
        },
    
        {
    
            path: 'http://localhost:8082',
    
            activeWhen: '/subapp2'
    
        }
    
    ];
    
    
    
    // 2. 注册子应用
    
    Hailuo.registerApps(routers);
    
    
    
    // 3. 运行微前端
    
    Hailuo.run();

注册非常好理解，用一个数组维护所有已经注册了的子应用：

registerApps(routers: Router[]) {
    
            (routers || []).forEach((r) => {
    
                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(
    
                    <App basename={basename} globalData={globalData} />,
    
                    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
    
    varBox = {
    
        'aWindow': '...',
    
        'bWindow': '...'
    
    }

我们把各个子应用的window放到map中，通过proxy代理，当访问时，直接就是访问到的各个子应用的window对象；如果没有，比如使用window.addEventListener，就会去真正的window中寻找。

### 3.2.3 CSS沙箱 ###

*  **前提：webpack在构建的时候，最终是通过appendChild去添加style标签到html里的**

解决方案：劫持appendChild，增加namespace。

## ❤️ 谢谢支持 ##

以上便是本次分享的全部内容，希望对你有所帮助^\_^

喜欢的话别忘了 **分享、点赞、收藏** 三连哦~。

欢迎关注公众号 **ELab团队** 收货大厂一手好文章~

> 我们来自字节跳动，是旗下大力教育前端部门，负责字节跳动教育全线产品前端开发工作。
> 
> 我们围绕产品品质提升、开发效率、创意与前沿技术等方向沉淀与传播专业知识及案例，为业界贡献经验价值。包括但不限于性能监控、组件库、多端技术、Serverless、可视化搭建、音视频、人工智能、产品设计与营销等内容。
> 
> 欢迎感兴趣的同学在评论区或使用内推码内推到作者部门拍砖哦 ????

字节跳动校/社招内推码: 9UQJ2J2  
投递链接: https://jobs.toutiao.com/s/eX9dge

[54e00db57c1f71420ce8ce62eeca5b2c.png]: /images/20220829/7b861898b4bf4c57a1d8c4ffebc36e29.png
[a605ee172e89c84cb47ccfa31e9faccf.png]: /images/20220829/2015bca5f7a54c8fa7fb25e0ce5e63c4.png
[2a187ea27aecbc68944e456545ed4841.png]: /images/20220829/02a75a5fa2824ffe8ae861c3435b7627.png
[c0909c584deee70d172e7f7b64f2045e.png]: /images/20220829/dbbf78a942bc41d4b8921aabc08c894d.png