javascript / expert
Snippet
Objektorientierte Subklassifizierung von EventTarget für entkoppelte Svelte-Zustandsbenachrichtigungen
Erweitert die native EventTarget-Klasse unter Verwendung privater Klassenfelder (#state) zur Erstellung eines entkoppelten ereignisgesteuerten Zustands-Emitters. Svelte-Komponenten können statechange-Ereignisse über standardmäßige addEventListener-Logik abonnieren.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export class SvelteStateBridge extends EventTarget {#state;constructor(initialState) {super();this.#state = initialState;}get state() {return this.#state;}update(patch) {const previous = { ...this.#state };this.#state = Object.assign({}, this.#state, patch);this.dispatchEvent(new CustomEvent('statechange', { detail: { current: this.#state, previous } }));}}
svelte
Erklärung
1
export class SvelteStateBridge extends EventTarget {
Erbt Ereignisverarbeitungskapazitäten direkt von der nativen Browser-Klasse EventTarget.
2
#state;
Erzwingt strikte Kapselung mittels privater JavaScript-Klassenfelder.
3
get state() { return this.#state; }
Stellt einen schreibgeschützten Getter für den sicheren Zugriff auf Zustandsdaten bereit.
4
this.#state = Object.assign({}, this.#state, patch);
Wendet unveränderliche Zustandsaktualisierungen auf die interne Variable an.
5
this.dispatchEvent(new CustomEvent('statechange', { detail: { current: this.#state, previous } }));
Löst ein benutzerdefiniertes Ereignis aus, das angemeldete Svelte-Komponenten benachrichtigt.