Implementera Observer Design Pattern i TypeScript

Implementera Observer Design Pattern i TypeScript

Ett designmönster är en mall som löser ett vanligt återkommande problem inom mjukvarudesign.





Observatörsmönstret, även känt som publicera-prenumerera-mönstret, är ett beteendemönster. Det låter dig meddela flera objekt eller prenumeranter om alla händelser som publiceras i objektet de observerar.



MAKEUSE AV DAGENS VIDEO

Här får du lära dig hur du implementerar observatörsdesignmönstret i TypeScript.





Observatörsmönstret

Observatörsmönstret fungerar genom att definiera en en-till-många-relation mellan utgivaren och dess prenumeranter. När en händelse inträffar i utgivaren kommer den att meddela alla prenumeranter till den händelsen. Ett utbrett exempel på detta mönster är JavaScript-händelselyssnare .

hur man får spel att springa snabbare windows 10

För sammanhanget, anta att du bygger en lagerspårare som håller reda på antalet produkter i din butik. I det här fallet är din butik ämnet/utgivaren och ditt lager är observatören/prenumeranten. Att använda observatörsdesignmönstret skulle vara optimalt i denna situation.



I observatörsdesignmönstret måste din ämnesklass implementera tre metoder:

  • En bifoga metod. Denna metod lägger till en observatör till ämnet.
  • A lösgöra metod. Denna metod tar bort en observatör från ett ämne.
  • A meddela/uppdatera metod. Denna metod meddelar försökspersonens observatörer när tillståndet ändras i ämnet.

Din observatörsklass måste implementera en metod, den uppdatering metod. Denna metod reagerar när det sker en förändring i ämnets tillstånd.



Implementering av ämnes- och observatörsklasserna

Det första steget för att implementera detta mönster är att skapa gränssnitt för ämnet och observatörsklassen, för att säkerställa att de implementerar de korrekta metoderna:

// Subject/Publisher Interface 
interface Subject { 
    attachObserver(observer: Observer): void; 
    detachObserver(observer: Observer): void; 
    notifyObserver(): void; 
} 
  
// Observer/Subscriber Interface 
interface Observer { 
    update(subject: Subject): void; 
}

Gränssnitten i kodblocket ovan definierar metoderna som dina betongklasser måste implementera.



En konkret ämnesklass

Nästa steg är att implementera en konkret ämnesklass som implementerar Ämne gränssnitt:

// Subject 
class Store implements Subject {}

Initiera sedan Ämne s tillstånd i Lagra klass. Ämnets observatörer kommer att reagera på förändringar i detta tillstånd.

I det här fallet är staten ett nummer, och observatörerna kommer att reagera på en ökning av antalet:

// Subject state 
private numberOfProducts: number;

Initiera sedan en rad observatörer. Den här arrayen är hur du kommer att hålla reda på observatörerna:

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