javascript / expert
Snippet
Symbol-basierte WeakMap-Isolierung für benutzerdefinierte Direktiven-Instanzen
Benutzerdefinierte Direktiven an DOM-Elementen können zu Speicherlecks führen, wenn Event-Handler direkt auf Elementeigenschaften gespeichert werden. Das Speichern von Zuständen in einer WeakMap auf Modulebene mit Symbol-Schlüsseln garantiert Garbage-Collection-Kompatibilität und strikte Objekt-Isolierung.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const INSTANCE_KEY = Symbol('directive_state');const stateStore = new WeakMap();export const vSecureClick = {mounted(el, binding) {const handler = (event) => {if (!el.contains(event.target)) return;binding.value(event);};stateStore.set(el, { [INSTANCE_KEY]: handler });document.addEventListener('click', handler, true);},unmounted(el) {const state = stateStore.get(el);if (state && state[INSTANCE_KEY]) {document.removeEventListener('click', state[INSTANCE_KEY], true);stateStore.delete(el);}}};
vue
Erklärung
1
const INSTANCE_KEY = Symbol('directive_state');
Erstellt einen eindeutigen Symbol-Schlüssel zur Vermeidung von Eigenschaftskollisionen.
2
stateStore = new WeakMap();
Hält DOM-Elementreferenzen schwach, um automatische Speicherbereinigung nach dem Demontieren zu ermöglichen.
3
stateStore.set(el, { [INSTANCE_KEY]: handler });
Verknüpft den Direktiven-Handler-Status strikt außerhalb der DOM-Objekteigenschaften.
4
document.removeEventListener('click', state[INSTANCE_KEY], true);
Entfernt Capture-Phase-Event-Listener beim Demontieren, um ausstehende Speicherreferenzen zu verhindern.