javascript / beginner
Snippet
Kapselung von Komponenten-Geschäftslogik in ES6-Klassen in Svelte
Objektorientierte Entwurfsmuster ermöglichen es, Daten und Methoden in wiederverwendbaren ES6-Klassen zu bündeln. In Svelte löst die erneute Zuweisung der Instanzvariable die Reaktivität aus, wenn sich interne Eigenschaften ändern.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>class CounterModel {constructor(initial = 0) {this.count = initial;}increment() {this.count += 1;}}let model = new CounterModel(5);function handleStep() {model.increment();model = model;}</script><button on:click={handleStep}>Count: {model.count}</button>
svelte
Erklärung
1
class CounterModel {
Definiert eine objektorientierte Klasse zur Kapselung von Zustand und Methoden.
2
let model = new CounterModel(5);
Erstellt eine neue Instanz des Zählers mit einem Startwert von 5.
3
model.increment();
Ruft die Methode der Instanz auf, um den internen Wert um eins zu erhöhen.
4
model = model;
Weist die Variable erneut zu, um Sveltes Reaktivitätssystem über die Änderung zu benachrichtigen.