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

<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

class CounterModel {

Definiert eine objektorientierte Klasse zur Kapselung von Zustand und Methoden.

let model = new CounterModel(5);

Erstellt eine neue Instanz des Zählers mit einem Startwert von 5.

model.increment();

Ruft die Methode der Instanz auf, um den internen Wert um eins zu erhöhen.

model = model;

Weist die Variable erneut zu, um Sveltes Reaktivitätssystem über die Änderung zu benachrichtigen.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Kapselung von Komponenten-Geschäftslogik in ES6-Klassen in Svelte

Verwandt