weakmap 是管理视图与模型无侵入绑定的理想工具,因其键必须为对象且不阻止垃圾回收,天然适配 dom 元素与数据对象的弱关联;通过 set/get 建立单向映射,元素移除后条目自动消失,无需手动清理。

WeakMap 是管理视图与模型之间无侵入绑定的理想工具,核心在于它不阻止键对象被垃圾回收,且键必须是对象——这天然适配 DOM 元素(视图)与数据对象(模型)的弱关联关系。
用 WeakMap 建立视图到模型的单向映射
将 DOM 元素作为键、对应模型对象作为值存入 WeakMap,既避免给元素添加自定义属性(如 element.__model),也不影响元素生命周期。一旦元素从 DOM 中移除且无其他引用,WeakMap 中的条目自动消失,无需手动清理。
- 创建 WeakMap 实例:const viewToModel = new WeakMap();
- 绑定时:viewToModel.set(domElement, modelObject);
- 读取时:const model = viewToModel.get(domElement); // 元素存在才返回,否则 undefined
- 不支持遍历和 clear(),符合“隐式、不可观测”的无侵入原则
配合 Proxy 实现模型变更自动同步视图
WeakMap 本身不触发响应,需结合 Proxy 对模型做代理。在 Proxy 的 set 拦截中,通过 WeakMap 查找所有绑定该模型的视图,并更新其内容或状态。
Java JDK 25 来自 OpenJDK 官方归档,版本为 JDK 25,本条下载地址已指向官方 Windows x64 zip 安装包直链,适合调试旧项目或兼容旧版 Java 运行环境。
- 每个模型可被多个视图绑定,WeakMap 支持一对多(需存储数组或 Set)
- 例如:
viewToModels.set(domEl, new Set([modelA, modelB])) - Proxy 更新时遍历 Set,调用各自视图的渲染逻辑(如
render(el, model)) - 避免强引用模型导致内存泄漏——WeakMap 的键(DOM)释放后,关联的 Set 若无其他引用也会被回收
避免常见陷阱:键必须是同一对象实例
WeakMap 的键是对象身份(引用相等),不是结构相等。不能用新创建的对象去 get 已 set 的条目。
- 错误示例:
viewToModel.set(el, m); viewToModel.get({ ...el }); // undefined - 正确做法:始终复用原始 DOM 元素引用;若需跨函数传递,确保传参是原对象
- 注意框架中虚拟节点或封装元素(如 React 的 ref.current、Vue 的 $refs)可能不是原生元素,需解包后再用
扩展场景:绑定事件处理器并自动解绑
可在绑定模型的同时,把事件监听器也存进 WeakMap(或另一个 WeakMap),在元素卸载时统一清理——但更推荐利用 WeakMap + MutationObserver 或框架生命周期钩子间接实现。
- 例如:
viewToHandlers.set(el, { input: handler, click: handler2 }) - 不主动监听 remove,而是依赖 WeakMap 自动失效 + 视图销毁时检查
viewToModel.has(el)判断是否仍有效 - 真正需要解绑时(如手动移除),先 get 再 removeEventListener,再 delete WeakMap 条目(虽非必须,但更清晰)
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










