Architecture浙江鼎胜环保

Micro-Frontend (Qiankun)

Project: 环保监控大屏与管理后台
简历背景

"浙江鼎胜环保: 主导引入 Qiankun 架构,解耦 10+ 业务模块..."

面试题

Qiankun 的样式隔离和 JS 沙箱是如何实现的?为什么没用 iframe?

Qiankun 基于 single-spa 封装。JS 沙箱在支持 Proxy 的浏览器用 ProxySandbox,不支持的用 SnapshotSandbox。样式隔离主要靠 strictStyleIsolation (ShadowDOM) 或 experimentalStyleIsolation (Scoped CSS)。不用 iframe 是因为 iframe 在弹窗遮罩、路由状态同步、通信方面体验很差。
**1. JS 沙箱原理 (ProxySandbox):** Qiankun 会为每个子应用创建一个 Proxy 对象代理 window。 - **Active 状态**: 修改 window 属性时,实际修改的是 Proxy 上的 fakeWindow,同时记录修改。 - **Inactive 状态**: 卸载时,不需要还原 window,因为我们只修改了 fakeWindow。 *(LegacySandbox 和 SnapshotSandbox 是降级方案,原理是记录因为 Diff,卸载时还原)* **2. 样式隔离:** - **ShadowDOM**: 真正的强隔离,但 React/Vue 的事件代理机制在 ShadowDOM 下可能会有问题(事件冒泡被截断)。 - **Scoped CSS**: 类似 Vue 的 scoped,给子应用所有样式规则加一个 data-qiankun="app-name" 的前缀。这是目前最常用的方案。 **3. 为什么不用 iframe?** - **UI 不同步**: iframe 内部弹出的 Modal 只能覆盖 iframe 区域,不能覆盖整个浏览器窗口。 - **URL 状态**: iframe 内部路由变化不会反映在主应用的 URL 上,刷新就丢。 - **通信**: postMessage 通信繁琐。