weakMap使用场景

场景1:当我们想要为DOM添加数据时,可使用 WeakMap 。
好处在于,当DOM元素移除时,对应 WeakMap 记录也会自动移除:

// DOM部分
<div id="WeakMap"></div> 

const wm = new WeakMap();
const weakMap = document.getElementById('WeakMap');
wm.set(weakMap, 'some information');
wm.get(weakMap) //"some information"


场景2:当我们想要为DOM元素添加事件监听时,可使用 WeakMap 。

<button id="button1">按钮1</button>
<button id="button2">按钮2</button>


const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2');
const handler1 = () => {  console.log("button1 被点击") };
const handler2 = () => {  console.log("button2 被点击") };// 代码1
button1.addEventListener('click', handler1, false);
button2.addEventListener('click', handler2, false); // 代2
const listener = new WeakMap(); 
listener.set(button1, handler1);
listener.set(button2, handler2);
button1.addEventListener('click', listener.get(button1), false);
button2.addEventListener('click', listener.get(button2), false);


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容