WeakMap 是实现 DOM 元素私有状态存储的理想工具，它通过弱引用映射、内部 Map 分状态、AbortController 自动取消、Proxy 沙箱控制及延迟初始化等机制，构建零泄漏、高性能、生命周期绑定的异步存储方案。
WeakMap 是实现 DOM 元素私有状态存储的理想工具——它能自动跟随元素的生命周期，不阻止 GC，且天然隔离、不可枚举、无法被外部访问。要构建一个“与 DOM 生命周期绑定的异步高性能私有存储沙箱”，核心不是封装 WeakMap 本身，而是围绕它设计一套安全、延迟可控、可组合的异步状态管理协议。
用 WeakMap 建立元素到私有状态的弱引用映射
WeakMap 的键必须是对象（如 DOM 元素），值可以是任意类型（包括 Promise、AbortController、Proxy 等）。只要元素从 DOM 中移除且无其他强引用，对应条目自动消失，无需手动清理。
建议采用单例 WeakMap 实例统一管理，避免多个 WeakMap 导致内存碎片：
const elementState = new WeakMap<Element, Map<string, unknown>>();
每个元素对应一个内部 Map，用于存放多个命名状态（如 'data'、'loading'、'controller'），便于按需读写、复用和清理子项。
支持异步写入与取消：绑定 AbortController 到元素
当为元素发起异步操作（如 fetch、动画、定时器）时，将对应的 AbortController 存入其私有状态，并在元素卸载时自动调用 .abort()。
示例：为按钮绑定防抖点击请求，并自动取消未完成的请求
function bindAsyncRequest(el: Element, url: string) {
let state = elementState.get(el);
if (!state) {
state = new Map();
elementState.set(el, state);
}
const controller = new AbortController();
state.set('requestController', controller);
el.addEventListener('click', async () => {
try {
const res = await fetch(url, { signal: controller.signal });
state.set('lastResponse', await res.json());
} catch (err) {
if (err.name !== 'AbortError') console.error(err);
}
}, { once: true });
// 自动清理钩子：监听元素是否被移除
const observer = new MutationObserver(() => {
if (!document.body.contains(el)) {
controller.abort();
observer.disconnect();
elementState.delete(el); // 可选：显式删除，WeakMap 也会自动丢弃
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
用 Proxy 封装读写，实现“沙箱式”访问控制
直接暴露 Map 不安全。可用 Proxy 拦截 get/set，加入类型校验、异步等待、命名空间隔离等逻辑：
- 读取 key 时，若值是 Promise，自动 await 并缓存结果（避免重复触发）
- 写入时校验 key 是否符合命名规范（如只允许字母数字下划线）
- 对敏感 key（如
'controller'）禁止外部覆盖 - 提供
.getAsync(key)和.setAsync(key, promise)方法，显式表达异步语义
这样使用者看到的是干净接口，底层仍是 WeakMap + Map + Proxy 协同工作，零内存泄漏风险。
性能优化关键点：延迟初始化 & 批量清理
不要在元素创建时就预分配状态；只在首次调用 useSandbox(el) 时才创建 Map。避免空 WeakMap 条目堆积。
对于频繁增删的列表场景（如虚拟滚动），避免为每个 item 都建 MutationObserver。改用事件委托 + el.isConnected 检查更轻量：
function cleanupOnDisconnect(el: Element) {
const originalRemove = el.remove.bind(el);
el.remove = function() {
const state = elementState.get(this);
if (state?.has('requestController')) {
(state.get('requestController') as AbortController).abort();
}
elementState.delete(this);
originalRemove();
};
}
该方式侵入性略高但零开销，适合性能敏感场景。
