前端 - 用微前端前应该了解的一些知识点

最新推荐文章于 2024-03-21 18:32:45 发布

kelly0721

最新推荐文章于 2024-03-21 18:32:45 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/kelly0721/article/details/127195468

版权

前端专栏收录该内容

47 篇文章 3 订阅

订阅专栏

一、微前端

微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。微前端不是单纯的前端框架或者工具，而是一套架构体系。

目前的微前端框架一般都具有以下三个特点：

技术栈无关：主框架不限制接入应用的技术栈，子应用具备完全自主权。
独立性强：独立开发、独立部署，子应用仓库独立。
状态隔离：运行时每个子应用之间状态隔离。

当然，微前端还存在许多的问题，比如应用间的样式冲突、消息通信、脚本互斥、公共依赖加载等等。

二、应用隔离

应用隔离主要分两种情况：

一种是主应用与微应用之间的隔离；
一种是微应用与微应用之间的隔离；

应用间所隔离的主要是 Javascript 的沙箱隔离和 CSS 的样式隔离。

CSS 样式隔离

由于在微前端场景下，不同技术栈的子应用会被集成到同一个运行池中，所以我们必须在框架层确保各个子主应用之间不会出现样式互相干扰的问题。

常见的解决方案

严格的命名约定，例如 BEM；
CSS Module；
各种 CSS-in-JS 库；
shadow DOM；

除了在css文件上做隔离，qiankun 也提供了样式隔离的功能。具体的方式有两种：严格样式隔离和 scoped 样式隔离。

qiankun 样式隔离方案

严格样式隔离

严格样式隔离，默认情况下是关闭的。如果需要开启，必须显示配置。

严格样式隔离，是基于 Web Component 的 shadow Dom 实现的。通过 shadow Dom, 我们可以将一个隐藏的、独立的 dom 附加到一个另一个 dom 元素上，保证元素的私有化，不用担心与文档的其他部分发生冲突。

scoped 样式隔离

scoped 样式隔离，是基于属性选择器实现的。类似 div["data-qiankun=react"]

html entry 解析以后的 html 模板字符串，在添加到 container 指定的节点之前，会先包裹一层 div，并且为这个 div 节点添加 data-qian 属性，属性值为子应用的 name 属性；然后遍历 html 模板字符串中所有的 style 节点，依次为内部样式表中的样式添加div["data-qiankun=xxx"]前缀。qiankun 中子应用的 name 属性值是唯一的，这样通过属性选择器的限制，就可实现样式隔离。

严格样式隔离和 scoped 样式隔离不能同时使用，当两者对应的配置项都为 true 时，严格样式隔离的优先级更高。

Javascript 沙箱隔离

通常，子应用在运行期间会有一些污染性的副作用产生，比如全局变量、全局事件、定时器、网络请求、localStorage、全局 Style 样式、全局 DOM 元素等。

为了保证应用能够稳定的运行且互不影响，需要提供安全的运行环境，能够有效地隔离、收集、清除应用在运行期间所产生的副作用，也就是沙箱的设计目标。

JS隔离的方式主要有两种，一种是快照拷贝的方式，一个是基于proxy的方式。

qiankun 优先使用 proxy沙盒，如果浏览器不支持 proxy ，那么再使用快照沙盒。

快照沙箱 - snapshotSandbox

在创建微应用的时候会实例化一个沙盒对象，它有两个方法，active是在激活微应用的时候执行，而inactive是在离开微应用的时候执行。

整体的思路是在激活微应用时将当前的window对象拷贝存起来，然后从modifyPropsMap中恢复这个微应用上次修改的属性到window中。在离开微应用时会与原有的window对象做对比，将有修改的属性保存起来，以便再次进入这个微应用时进行数据恢复，然后把有修改的属性值恢复到以前的状态。

代理沙箱 - proxySandbox

微应用中的script内容都会加with(global)来执行，这里global是全局对象，如果是proxy的隔离方式那么他就是下面新创建的proxy对象。

我们知道with可以改变里面代码的作用域，也就是我们的微应用全局对象会变成下面的这个proxy。

当设置属性的时候会设置到proxy对象里，在读取属性时先从proxy里找，没找到再从原始的window中找。

也就是你在微应用里修改全局对象的属性时不会在window中修改，而是在proxy对象中修改。因为不会破坏window对象，这样就会隔离各个应用之间的数据影响。

三、跨应用通信

微前端最常见的问题之一是如何让微应用之间能够相互通信。

一般而言，我们建议让微应用之间尽可能少地交流，因为这通常会重新引入我们最初试图避免的那种不适当的耦合代码。也就是说，通常我们只需要某种程度的跨应用通信即可。

常见的通信方式：

使用自定义事件通信，是降低耦合的一种好方法；
可以考虑 React 或 Vue 应用中常见的全局 state store 机制；
发布-订阅（pub/sub）模式的通信机制；
使用地址栏作为通信机制；

qiankun - Actions 通信

qiankun 内部提供了 initGlobalState 方法用于注册 MicroAppStateActions 实例用于通信，该实例有三个方法，分别是：

setGlobalState：设置 globalState - 设置新的值时，内部将执行浅检查，如果检查到 globalState 发生改变则触发通知，通知到所有的观察者函数。
onGlobalStateChange：注册观察者函数 - 响应 globalState 变化，在 globalState 发生改变时触发该观察者函数。
offGlobalStateChange：取消观察者函数 - 该实例不再响应 globalState 变化。

Actions 通信方案是通过全局状态池和观察者函数进行应用间通信，该通信方式适合大部分的场景。