javascript / expert
Snippet
Kapselung von Zustand via funktionaler Runen
In Svelte 5 sind Klassen für komplexes Zustandsmanagement nicht mehr zwingend erforderlich. Factory-Funktionen, die Objekte mit 'get'-Accessoren zurückgeben, ermöglichen eine saubere Kapselung bei voller Reaktivität. Dieses Muster ist der Komposition überlegen, da es 'this'-Bindungsprobleme vermeidet und eine klare, schreibgeschützte Schnittstelle für Zustands-Properties bietet. So wird sichergestellt, dass der Zustand nur über definierte Methoden wie 'add' oder 'toggle' verändert werden kann.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
export function createLogger(prefix: string) {let logs = $state<string[]>([]);let isPaused = $state(false);return {get history() { return logs; },get status() { return isPaused ? 'Paused' : 'Active'; },add: (msg: string) => {if (!isPaused) logs.push(`[${prefix}] ${msg}`);},toggle: () => isPaused = !isPaused};}
svelte
Erklärung
1
let logs = $state<string[]>([]);
Initialisiert einen reaktiven Zustand innerhalb des Funktions-Closures.
2
get history() { return logs; }
Die Verwendung eines Getters stellt sicher, dass jeder Konsument des Objekts eine reaktive Referenz auf das 'logs'-Array erhält.
3
add: (msg: string) => { ... }
Eine an den Closure gebundene Funktion, die die Logik zur Mutation des privaten Zustands kapselt.