weakmap 适合绑定 dom 生命周期，因其键为弱引用对象，dom 元素被移除且无其他强引用时自动被 gc 回收，对应条目随之失效，无需手动清理，避免内存泄漏。
WeakMap 为什么适合绑定 DOM 生命周期
WeakMap 的键必须是对象，且对键的引用是弱引用——DOM 元素被移除时，只要没有其他强引用，它就能被 GC 回收，同时 WeakMap 中对应的条目自动失效。这正好匹配 DOM 节点的生命周期，不用手动清理，也不会造成内存泄漏。
对比 Map 或普通对象做 key（如用 element.id），前者需要开发者自己维护映射关系、监听 DOMNodeRemoved（已废弃）或 MutationObserver；后者容易因 ID 冲突、重复或未设置而失效。WeakMap 是唯一能“零干预”跟随 DOM 存活期的原生机制。
用 WeakMap 实现私有存储代理的关键结构
核心思路：把 WeakMap 当作外部不可访问的“私有字段容器”，用代理拦截对 DOM 元素的读写操作，所有数据只存于 WeakMap 内部，不污染元素自身属性。
- WeakMap 实例必须在闭包中定义，避免外部读取或篡改
- 代理目标不能是 DOM 元素本身（Proxy 无法代理非 extensible 对象，而大多数 DOM 元素是不可扩展的），要代理一个轻量 wrapper 对象
- wrapper 的 getter/setter 通过 WeakMap 存取数据，key 是原始 DOM 元素，value 是私有数据对象
示例结构：
const privateStore = new WeakMap();
class ElementPrivate {
constructor(el) {
if (!(el instanceof Node)) throw new TypeError('Expected DOM node');
this.element = el;
}
get(key) {
let data = privateStore.get(this.element);
if (!data) {
data = Object.create(null);
privateStore.set(this.element, data);
}
return data[key];
}
set(key, value) {
let data = privateStore.get(this.element);
if (!data) {
data = Object.create(null);
privateStore.set(this.element, data);
}
data[key] = value;
return this;
}
}
// 使用
const el = document.getElementById('app');
const $ = new ElementPrivate(el);
$.set('uid', Date.now()).set('config', { theme: 'dark' });
console.log($.get('uid')); // ✅ 安全、隔离、无泄漏
常见误用：试图直接 Proxy DOM 元素会失败
直接 new Proxy(document.body, {...}) 会抛出 TypeError: Cannot create proxy with a non-object as target 或更隐蔽的静默失败（取决于浏览器），因为：
- 多数 DOM 接口对象（
HTMLElement,Document）是不可扩展的（Object.isExtensible(el) === false） - 它们的内部属性和方法大多不可枚举、不可配置，Proxy 的
get/set拦截可能被忽略 - 某些浏览器（如旧版 Safari）甚至禁止对 DOM 对象使用 Proxy
所以必须绕过：用 wrapper 封装，而非代理元素本身。这也是为什么上面示例没用 Proxy，而是用显式 get/set 方法——更可控、兼容性更好、语义更清晰。
性能与边界注意点
WeakMap 查找是 O(1)，但每次 get 都需先查是否存在数据对象，再查 key，两次哈希查找。高频读写场景下，可考虑预分配数据对象或缓存常用 key 的访问器。
- WeakMap 不支持遍历（
keys(),values()），无法调试或批量清理——这不是缺陷，而是设计使然；若需调试，可在开发环境用普通Map替换 WeakMap 并打日志 - 如果元素被克隆（
el.cloneNode(true)），新节点不会继承 WeakMap 中的数据，这是正确行为，无需额外处理 - SSR 环境中 DOM 不存在，
privateStore.set(el, ...)会失败，应加if (el && 'nodeType' in el)守卫
真正难处理的不是 WeakMap 本身，而是当多个模块都依赖同一 DOM 节点的私有状态时，如何避免 key 冲突。建议用 Symbol 作为 key，或约定命名空间前缀（如 $.set('mylib:timeoutId', 123)）。
