如何利用 WeakMap 在微前端沙箱中隔离不同子应用的全局对象引用-js教程-PHP中文网

weakmap适合子应用内部隔离，因其在js沙箱中为各子应用提供独立实例，键仅限对象且天然防冲突，卸载时依赖弱引用自动gc回收，避免内存泄漏与跨应用污染。

如何利用 weakmap 在微前端沙箱中隔离不同子应用的全局对象引用

WeakMap 本身不能穿透微前端沙箱，但它可以在每个子应用**内部**安全地隔离对象状态，避免跨应用污染和内存泄漏。关键不是用 WeakMap 做跨应用共享，而是利用它的“弱引用 + 实例私有”特性，在沙箱内为各自环境建立独立、自动清理的元数据映射。

为什么 WeakMap 适合子应用内部隔离

micro-app 的 JS 沙箱（如 with 沙箱或 proxy 沙箱）会为每个子应用创建独立的执行上下文：window、document、全局变量均被代理或重绑定。这意味着：

每个子应用拥有自己独立的 WeakMap 实例，彼此不互通；
WeakMap 的键必须是对象，且只在该实例内有效 —— 天然避免键名冲突；
当子应用卸载、DOM 元素被移除、组件实例销毁时，只要没有其他强引用，WeakMap 中对应的条目会随对象一起被 GC 回收，无需手动清理。

典型使用场景与写法

1. 为 DOM 元素附加沙箱内私有状态
例如子应用中需记录某个按钮是否被点击过，又不想挂载到 element.dataset（可能被其他脚本覆盖）或全局对象（可能跨应用误读）：

// 子应用 A 内部

const buttonState = new WeakMap();<br>const btn = document.querySelector('#submit-btn');<br>buttonState.set(btn, { clicked: false, count: 0 });<br><br>// 后续操作中<br>if (buttonState.has(btn)) {<br>  const state = buttonState.get(btn);<br>  state.clicked = true;<br>  state.count++;<br>}

当 btn 被从 DOM 移除且子应用 A 卸载后，该状态自动消失，不残留内存。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

2. 封装子应用专属的私有配置或缓存
比如子应用 B 需对某类业务对象做昂贵计算并缓存结果，但不希望影响主应用或其他子应用：

// 子应用 B 内部

const computeCache = new WeakMap();<br>function computeExpensive(obj) {<br>  if (computeCache.has(obj)) return computeCache.get(obj);<br>  const result = heavyTransform(obj);<br>  computeCache.set(obj, result);<br>  return result;<br>}

obj 若在子应用 B 中被销毁（如组件 unmount），缓存条目随之释放 —— 不依赖 componentWillUnmount 或 dispose 手动调用。

不能做什么：常见误区提醒

WeakMap 不解决跨子应用通信问题，也不绕过沙箱限制：

❌ 不要试图把 WeakMap 实例挂到 window 上（如 window.appBCache = new WeakMap()），沙箱会劫持 window，子应用读写的仍是代理副本；
❌ 不要用 WeakMap 替代主应用暴露的全局通信机制（如 window.microAppGlobal）；
❌ 不要期望在子应用 A 中 set 的对象，能在子应用 B 中用同一个 WeakMap 实例 get 到 —— 它们根本不是同一个 WeakMap。