Implementering af Observer Design Pattern i TypeScript

Implementering af Observer Design Pattern i TypeScript

Et designmønster er en skabelon, der løser et almindeligt tilbagevendende problem inden for softwaredesign.





Observatørmønsteret, også kendt som public-subscribe-mønsteret, er et adfærdsmønster. Det giver dig mulighed for at underrette flere objekter eller abonnenter om enhver begivenhed, der er offentliggjort i det objekt, de observerer.



MAKEUSE AF DAGENS VIDEO

Her vil du lære, hvordan du implementerer observatørdesignmønsteret i TypeScript.





Observer-mønsteret

Observatørmønsteret fungerer ved at definere et en-til-mange forhold mellem udgiveren og dens abonnenter. Når en begivenhed finder sted i udgiveren, vil den underrette alle abonnenter om den begivenhed. Et udbredt eksempel på dette mønster er JavaScript-begivenhedslyttere .

hvordan man laver en tjekliste i excel

For kontekst, antag, at du bygger en lagersporing, der holder styr på antallet af produkter i din butik. I dette tilfælde er din butik emnet/udgiveren, og din beholdning er observatøren/abonnenten. Brug af observatørdesignmønsteret ville være optimalt i denne situation.



I observatørdesignmønsteret skal din fagklasse implementere tre metoder:

hvordan man jailbreak ios 11 med computer
  • An vedhæfte metode. Denne metode tilføjer en observatør til emnet.
  • EN løsrive metode. Denne metode fjerner en observatør fra et emne.
  • EN underrette/opdatere metode. Denne metode underretter emnets observatører, når tilstanden ændrer sig i emnet.

Din observatørklasse skal implementere én metode, den opdatering metode. Denne metode reagerer, når der er en ændring i dens subjekts tilstand.



Implementering af fag- og observatørklasserne

Det første skridt til at implementere dette mønster er at skabe grænseflader til faget og observatørklassen for at sikre, at de implementerer de korrekte metoder:

// 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ænsefladerne i kodeblokken ovenfor definerer de metoder, dine konkrete klasser skal implementere.



En konkret fagklasse

Det næste trin er at implementere en konkret fagklasse, der implementerer Emne grænseflade:

// Subject 
class Store implements Subject {}

Dernæst skal du initialisere Emne 's tilstand i butik klasse. Emnets observatører vil reagere på ændringer i denne tilstand.

hvordan man spejler et billede i forhåndsvisningen

I dette tilfælde er staten et tal, og observatørerne vil reagere på en stigning i antallet:

// Subject state 
private numberOfProducts: number;

Derefter initialiseres en række observatører. Dette array er, hvordan du vil holde styr på observatørerne:

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