javascript / beginner
Snippet
Verwaltung von Komponentenzustand mit OOP-Klassen
Prinzipien der objektorientierten Programmierung (OOP) können genutzt werden, um Zustand und Geschäftslogik in JavaScript-Klassen zu kapseln. Svelte-Komponenten können diese Klassen instanziieren und Zustandsänderungen über Callbacks an reaktive Variablen weiterleiten.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>class Stopwatch {constructor() {this.seconds = 0;this.timerId = null;}start(callback) {if (this.timerId) return;this.timerId = setInterval(() => {this.seconds += 1;callback(this.seconds);}, 1000);}stop() {clearInterval(this.timerId);this.timerId = null;}}const stopwatch = new Stopwatch();let elapsed = 0;</script><p>Elapsed time: {elapsed}s</p><button on:click={() => stopwatch.start(val => elapsed = val)}>Start</button><button on:click={() => stopwatch.stop()}>Stop</button>
svelte
Erklärung
1
class Stopwatch {
Definiert eine ES6-Klasse, die interne Timer-Eigenschaften und Methoden kapselt.
2
const stopwatch = new Stopwatch();
Erzeugt eine Instanz der Klasse, um die Stoppuhr-Logik unabhängig vom Rendern der Komponente zu verwalten.