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