javascript / expert
Snippet
Erweiterung von EventTarget-Klassen für Polymorphe Controller-Abonnements in Svelte-Komponenten
Die Kapselung von Logik in benutzerdefinierten EventTarget-Klassen bietet privaten Zustand (#field) bei gleichzeitiger Bereitstellung von Standard-Event-Bus-Funktionen für Svelte Context Injection.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export class FormStateController extends EventTarget {#state = Object.seal({ valid: false, value: '' });constructor(initialValue) {super();this.#state.value = initialValue;}updateValue(val) {this.#state.value = val;this.#state.valid = val.trim().length > 0;this.dispatchEvent(new CustomEvent('statechange', { detail: { ...this.#state } }));}get snapshot() {return Object.freeze({ ...this.#state });}}
svelte
Erklärung
1
export class FormStateController extends EventTarget {
Erbt native Event-Dispatching-Fähigkeiten, um als benutzerdefinierter Reaktivitäts-Bus in Svelte zu agieren.
2
#state = Object.seal({ valid: false, value: '' });
Definiert private Klassenfelder, die gegen Hinzufügen oder Löschen von Eigenschaften versiegelt sind.
3
this.dispatchEvent(new CustomEvent('statechange', { detail: { ...this.#state } }));
Löst ein benutzerdefiniertes DOM-Event aus, um Abonnenten über Zustandsänderungen zu informieren.