微前端框架乾坤qiankun内实现Dom隔离

在微前端领域，qiankun依然占据着国内下载量榜首的地位，尽管其部分功能如资源共享、多应用保活、插件机制、元素隔离等尚未完善。手动加载模式下，CSS样式隔离存在无法规避的缺陷。在面对页面升级为多tab模式的需求时，我总结出三个关键技术点：路由响应隔离、样式隔离、元素隔离。

针对样式隔离问题，当同时加载两个相同的子应用时，关闭掉首次加载的应用后，第二个应用的样式会丢失。原因在于异步加载样式文件动态插入，导致只插入一份样式文件，关闭应用时，该文件被销毁，第二个应用仅保留节点，没有样式。解决方法有开启ShadowDom（strictStyleIsolation模式）或转化为style文件（experimentalStyleIsolation模式）。

在Document隔离问题上，通过ID选择器操作Dom节点时，可能出现选择其他tab下的节点。原因在于多个相同子应用存在多个相同的节点信息。解决方法包括开启ShadowDom、使用Ref获取精准节点（需所有子应用配合改动，影响范围大）。

对比strictStyleIsolation模式和experimentalStyleIsolation模式，shadowdom模式在兼容性上有挑战，而改动范围大。因此，我选择使用experimentalStyleIsolation模式。通过代理Document、Element原型链上的方法，实现选择器范围控制在当前子应用内。

在解决样式隔离和Document隔离问题后，最终实现“experimentalStyleIsolation”模式下，在手动加载模式下多个子应用间的Document隔离与样式隔离。项目采用默认模式的proxy沙箱。

通过上述方法的实现，我们成功解决了多tab模式下的样式与文档隔离问题。对于有进一步兴趣了解或有相关细节改动的同学，欢迎通过GitHub或评论进行交流。

您可能感兴趣问答

Collapsible

热门标签

热点问答