Implementieren des Observer-Entwurfsmusters in TypeScript

Implementieren des Observer-Entwurfsmusters in TypeScript

Ein Entwurfsmuster ist eine Vorlage, die ein häufig wiederkehrendes Problem im Softwaredesign löst.





Nehmen Sie den Besitz von Windows 10 kostenlos herunter

Das Beobachtermuster, auch bekannt als Publish-Subscribe-Muster, ist ein Verhaltensmuster. Es ermöglicht Ihnen, mehrere Objekte oder Abonnenten über jedes Ereignis zu benachrichtigen, das in dem von ihnen beobachteten Objekt veröffentlicht wird.





MAKEUSEOF VIDEO DES TAGES

Hier erfahren Sie, wie Sie das Observer-Entwurfsmuster in TypeScript implementieren.





Das Beobachtermuster

Das Beobachtermuster funktioniert, indem es eine Eins-zu-Viele-Beziehung zwischen dem Herausgeber und seinen Abonnenten definiert. Wenn ein Ereignis im Herausgeber auftritt, benachrichtigt er alle Abonnenten dieses Ereignisses. Ein weit verbreitetes Beispiel für dieses Muster ist JavaScript-Ereignis-Listener .

Nehmen wir zum Kontext an, Sie bauen einen Bestandstracker, der die Anzahl der Produkte in Ihrem Geschäft verfolgt. In diesem Fall ist Ihr Geschäft der Betreff/Herausgeber und Ihr Inventar der Beobachter/Abonnent. Die Verwendung des Beobachter-Entwurfsmusters wäre in dieser Situation optimal.



Im Beobachter-Entwurfsmuster muss Ihre Fachklasse drei Methoden implementieren:

  • Ein anfügen Methode. Diese Methode fügt dem Subjekt einen Beobachter hinzu.
  • EIN ablösen Methode. Diese Methode entfernt einen Beobachter von einem Subjekt.
  • EIN benachrichtigen/aktualisieren Methode. Diese Methode benachrichtigt die Beobachter des Subjekts, wenn sich der Zustand des Subjekts ändert.

Ihre Beobachterklasse muss eine Methode implementieren, die aktualisieren Methode. Diese Methode reagiert, wenn sich der Zustand des Objekts ändert.





Implementieren der Subjekt- und Beobachterklassen

Der erste Schritt zur Implementierung dieses Musters besteht darin, Schnittstellen für die Subjekt- und Beobachterklasse zu erstellen, um sicherzustellen, dass sie die richtigen Methoden implementieren:

Home-Button funktioniert nicht auf iPhone 6
// Subject/Publisher Interface 
interface Subject {
attachObserver(observer: Observer): void;
detachObserver(observer: Observer): void;
notifyObserver(): void;
}

// Observer/Subscriber Interface
interface Observer {
update(subject: Subject): void;
}

Die Schnittstellen im obigen Codeblock definieren die Methoden, die Ihre konkreten Klassen implementieren müssen.





Eine konkrete Themenklasse

Der nächste Schritt besteht darin, eine konkrete Subjektklasse zu implementieren, die die implementiert Thema Schnittstelle:

// Subject 
class Store implements Subject {}

Als nächstes initialisieren Sie die Thema s Zustand in der Speichern Klasse. Die Beobachter des Subjekts werden auf Änderungen dieses Zustands reagieren.

In diesem Fall ist der Zustand eine Zahl, und die Beobachter werden auf eine Erhöhung der Zahl reagieren:

Was ist die beste Sprachlern-App
// Subject state 
private numberOfProducts: number;

Als nächstes initialisieren Sie ein Array von Beobachtern. Mit diesem Array behalten Sie die Beobachter im Auge:

// initializing observers 
private observers: Observer[] = [];