It’s #FrontendFriday – State-Pattern

01.07.2022

Vor ein paar Wochen startete unsere Blogreihe mit JavaScript Coding Patterns. Als Ergänzung zu den bereits präsentierten Patterns (Adapter-Pattern, Facade-Patter, Memento-Pattern, Mediator-Pattern, Observer-Pattern) folgt nun noch das State-Pattern.

Was ist das State-Pattern?

Das State-Pattern wird verwendet, um unterschiedliches Verhalten für dasselbe Objekt zu kapseln. Dies ist eine saubere Möglichkeit, das Verhalten zur Laufzeit zu ändern und die Wartbarkeit zu verbessern. Über einen State können verschiede Komponenten auf dasselbe Datenobjekt zugreifen und darauf reagieren. Ein vereinfachtes Beispiel dafür wäre die Schaltung für eine oder mehrerer Ampeln. Eine Action wäre eine Funktion, um den Zustand eines States zu verändert. Die Ampeln selber sind verschiedene Komponenten, die das gleiche Datenobjekt verwenden aber unterschiedlich auf den State reagieren. Wenn der State „green“ ist, schalten manche Ampeln auf Grün, wohingegen andere Ampeln genau gegenteilig reagieren und auf Rot schalten.

Darstellung des State-Patterns
Quelle: Eigene Darstellung

 

 

 

 

 

 

 

Code-Example:

Anbei ein Beispiel, wie das ganze als Code aussehen könnte. Es gibt drei verschiedene vordefinierte States (GreenLight, YellowLight, RedLight). Über eine Zentrale setLight() Methode wird der neue Wert im State gesetzt.

class TrafficLight {
  constructor() {
    this.options = [new GreenLight(), new YellowLight(), new RedLight()];
    this.state = this.options[0];
  }

  setLight(status: string) {
    if(status === 'green'){ this.state = this.options [0]; }
    if(status === 'yellow'){ this.state = this.options [1]; }
    if(status === 'red'){ this.state = this.options [2]; }
  }
}

class RedLight {
  constructor() {
    super('red');
  }
  ...
}

class YellowLight {
  constructor() {
    super('yellow');
  }
  ...
}

class GreenLight {
   constructor() {
     super('green');
   }
   ...
}

// usage
const trafficLight = new TrafficLight();

trafficLight.setLight("green"); //GREEN

trafficLight.setLight("yellow"); //YELLOW

trafficLight.setLight("red"); //RED

Relevanz in JavaScript

Das Verwenden eines State-Patterns bringt einige Vorteile mit sich. Beispielweise werden Daten über mehrere Seiten hinweg zwischengespeichert. Diesen Daten können zwischen Komponenten geteilt und bearbeitet werden.

Zwischengespeicherte Daten müssten nicht zwingen neu aus dem Backend geladen werden, was wiederum die Performance optimiert und ein besseres UX Erlebnis bietet.

Ein State-Patter zieht jedoch auch einen Mehraufwand bei der Programmierung mit sich. Ein wirklicher Return of invest ergibt sich bei größeren Projekten mit vielen Komponenten die, die gleichen Daten verwenden.

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*Pflichtfelder

*