场景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);