WeakMap 为什么适合绑定 DOM 生命周期
WeakMap 的键必须是对象，且对键的引用是弱引用——DOM 元素被移除时，只要没有其他强引用，它就能被 GC 回收，同时 WeakMap 中对应的条目自动失效。这正好匹配 DOM 节点的生命周期：你不需要手动清理，也不用监听 DOMNodeRemoved（已废弃）或 MutationObserver 做兜底。
对比 Map 或对象属性（如 el.__privateData），WeakMap 不会阻止 GC，也不会污染 DOM 元素自身属性空间，更不会因反复挂载/卸载导致内存泄漏。
用 WeakMap 构建私有数据代理的最小可行结构
核心思路是：把 WeakMap 当作“外部私有存储桶”，所有读写都通过一个统一代理函数或类封装，避免直接暴露 WeakMap 实例。
不要把 WeakMap 实例挂到全局或模块顶层后随意导出——容易被误用或覆盖推荐封装成单例类或闭包工厂，确保实例唯一且不可篡改每个 DOM 元素只能对应一份私有数据，但数据结构可以任意（Object、Map、class 实例等）
示例（ES Module 封装）：
const privateStore = new WeakMap();export function getPrivateData(el) { if (!privateStore.has(el)) { privateStore.set(el, {}); } return privateStore.get(el);}export function setPrivateData(el, key, value) { const data = getPrivateData(el); data[key] = value;}
这样调用：setPrivateData(button, ‘clickCount’, 0)，getPrivateData(button).clickCount++。
避免踩坑：WeakMap 不能用于非对象键和序列化场景
WeakMap 的键只能是对象（包括 DOM 元素、Element、DocumentFragment 等），传入 string、number 或 null 会直接报错：TypeError: Invalid value used as weak map key。
别试图用字符串 ID 替代元素本身做键——那就失去“自动解绑”能力WeakMap 内容无法被 JSON.stringify 序列化，也不能被 structuredClone 拷贝（会丢弃）服务端渲染（SSR）中 DOM 不存在，getPrivateData(document.createElement(‘div’)) 生成的节点若未插入文档，仍可工作；但若用的是 JSDOM 环境，需确认其 Element 实现支持 WeakMap 键
进阶：配合 Custom Element 或 React 组件做自动清理
在自定义元素中，connectedCallback 和 disconnectedCallback 是天然钩子，但 WeakMap 本身无需手动清理——不过你可以利用它做“懒初始化”或“状态快照”。
例如，在 disconnectedCallback 中触发一次数据归档逻辑（仅当需要持久化时）：
class MyWidget extends HTMLElement { static #store = new WeakMap(); get #data() { if (!MyWidget.#store.has(this)) { MyWidget.#store.set(this, { createdAt: Date.now(), cache: new Map() }); } return MyWidget.#store.get(this); } disconnectedCallback() { // 只读取，不删除 —— WeakMap 自动处理 console.log(‘unmounting with’, this.#data.cache.size, ‘cached items’); }}
React 场景下，可在 useEffect 清理函数中调用 getPrivateData(el) 读取并上报指标，但切勿在清理函数里尝试 WeakMap.delete() ——既没必要，也删不掉（你拿不到原始键引用）。
真正容易被忽略的一点：WeakMap 不是“事件监听器替代品”。它只管数据存在性，不响应 DOM 结构变化。如果业务需要“元素被移动到另一个父节点时重置状态”，得额外结合 TreeWalker 或 parentElement 对比判断——WeakMap 本身不提供这类语义。
评论(0)