WeakMap 是实现 DOM 元素私有状态绑定的天然选择，需配合节点连通性检查、MutationObserver 清理、Symbol 私有属性及事件引用管控，才能真正实现与 DOM 生命周期零延迟同步。
WeakMap 是实现 DOM 元素私有状态绑定的天然选择——它不阻止垃圾回收，且键必须是对象（如 DOM 节点），正好契合“节点销毁、数据自动清理”的需求。关键不在“存”，而在“如何让存储真正与 DOM 生命周期零延迟同步”。
用 WeakMap 做键值容器，但绝不直接暴露原始引用
WeakMap 本身不提供生命周期钩子，所以不能只靠它被动等待 GC。你需要把 WeakMap 当作底层存储池，上层封装一层“代理式访问器”：
- 每次读写前，先检查对应 DOM 节点是否 still in document（
node.isConnected或node.ownerDocument?.contains(node)） - 若节点已离线（如被
remove()、innerHTML = ''清空父容器），立即从 WeakMap 中delete对应条目（虽 GC 会最终清理，但主动删除可避免残留无效引用影响调试或内存快照） - 不缓存 WeakMap 实例本身，而是通过闭包或模块作用域隔离，防止跨沙箱污染
绑定事件委托 + MutationObserver 捕获“隐式销毁”
单纯依赖 node.isConnected 不够：节点可能还在文档中，但已被移出可视树（如被 display: none 父元素包裹）、或正被框架（如 React）暂存于内存未销毁。这时需监听 DOM 结构变动：
- 对 document 或根容器注册一个轻量级
MutationObserver，只观察childList和subtree: true - 在
callback中遍历mutations，对所有removedNodes执行 WeakMap 清理 - 避免高频触发：用
setTimeout(..., 0)或queueMicrotask批量去重处理，防止重复清理同一节点
用 Symbol 作为属性键，配合 defineProperty 阻止外部枚举
WeakMap 存储的是“私有数据对象”，但这个对象本身不应被随意读写。更安全的做法是：用 Symbol 创建唯一键名，再用 Object.defineProperty 将其设为不可枚举、不可配置：
- 每个沙箱初始化时生成唯一
const PRIVATE_KEY = Symbol('sandbox-data') - 通过
Object.defineProperty(node, PRIVATE_KEY, { value: {}, writable: true, enumerable: false, configurable: false })直接挂载到节点上 - WeakMap 中的 value 可以是该私有对象的弱引用（例如存一个指向它的 WeakRef，或直接存对象本身——因为 WeakMap 键是节点，value 是否弱引用不影响节点回收）
- 这样即使开发者用
console.dir(node)也看不到私有字段，比纯 WeakMap 更隐蔽
规避常见陷阱：不要在事件回调中保留强引用
最容易破坏“生命周期同步”的是事件处理器：
- 避免在
addEventListener回调中直接使用闭包捕获 WeakMap 实例或私有数据对象（这会让它们无法被 GC） - 推荐使用
handleEvent接口或绑定this到类实例，并确保类方法不意外持有 DOM 节点引用 - 若需异步操作（如
fetch后更新 UI），在发起前检查node.isConnected；返回后再次检查，避免“回调执行时节点已消失”导致报错或内存泄漏
不复杂但容易忽略：WeakMap 不是魔法，它只是让 JS 引擎知道“这个映射不该阻止键对象被回收”。真正的生命周期同步，靠的是你主动检查、主动清理、主动解绑。把 WeakMap 当成保险丝，而不是自动开关。
