微服务之间CSS的沙箱实现——深挖 Qiankun

2023-12-09 14:39:33

微服务作为当下系统架构的设计趋势，在很大程度上解决分布式系统中单体服务的臃肿问题，同时也能提升系统中的服务的稳定性与隔离性，降低耦合度。在微服务架构体系中，各业务模块之间的数据和逻辑相互隔离，但表现层始终是整个系统对外的直接窗口，这直接导致微服务架构体系中各业务模块之间的样式很难独立维护。使用CSS的Scoped(隔离)方案能够有效地解决此问题，但这需要一些配套的基础设施才能真正地落地实施。

在此文章中，我们将使用CSS沙箱技术来详细解析微服务之间的CSS隔离，并提供了一个完整的使用说明。

Qiankun 是一款京东内部的开源微前端框架，其特性如下：

内核是上层封装
天然适合中后台应用
支持多种加载模式
无侵入接入
标准化 API 接口

CSS沙箱是针对微前端系统中的样式隔离问题提出的一种解决方案，它通过将不同子应用的样式进行隔离，防止它们互相影响，从而使微前端系统中的样式能够独立维护。CSS沙箱的工作原理是，将每个子应用的样式都放在一个单独的CSS文件中，然后使用Shadow DOM技术将这些CSS文件与主应用的样式进行隔离。

使用Shadow DOM来实现CSS沙箱，我们需要完成以下三个步骤：

将子应用的样式都放在一个单独的CSS文件中；
将子应用的根元素放在一个Shadow DOM中；
将子应用的CSS文件应用到Shadow DOM中；

下面分别对这三个步骤进行详细说明：

步骤1：将子应用的样式都放在一个单独的CSS文件中

将子应用的样式都放在一个单独的CSS文件中，这样做的好处是，可以使子应用的样式独立维护，不会受到主应用的样式的影响。同时，这也便于我们对子应用的样式进行管理。
步骤2：将子应用的根元素放在一个Shadow DOM中

使用Shadow DOM来实现CSS沙箱，我们需要将子应用的根元素放在一个Shadow DOM中。Shadow DOM是HTML5中引入的一种新特性，它允许我们在HTML文档中创建一个新的DOM树，这个新的DOM树与主DOM树是隔离的，也就是说，主DOM树中的元素无法影响Shadow DOM中的元素，反之亦然。
步骤3：将子应用的CSS文件应用到Shadow DOM中

将子应用的根元素放在一个Shadow DOM中后，我们需要将子应用的CSS文件应用到Shadow DOM中。我们可以使用appendChild方法将子应用的CSS文件添加到Shadow DOM中。