Izvajanje oblikovalskega vzorca opazovalca v TypeScriptu

Izvajanje oblikovalskega vzorca opazovalca v TypeScriptu

Načrtovalni vzorec je predloga, ki rešuje pogosto ponavljajoče se težave pri načrtovanju programske opreme.





Vzorec opazovalca, znan tudi kot vzorec objave-naročnine, je vedenjski vzorec. Omogoča vam, da obvestite več predmetov ali naročnikov o katerem koli dogodku, ki je objavljen v objektu, ki ga opazujejo.



MAKEUSEOF VIDEO DNEVA

Tukaj se boste naučili, kako implementirati oblikovalski vzorec opazovalca v TypeScript.





Vzorec opazovalca

Vzorec opazovalca deluje tako, da definira razmerje ena proti mnogo med založnikom in njegovimi naročniki. Ko pride do dogodka v založniku, bo o tem obvestil vse naročnike. En zelo razširjen primer tega vzorca je poslušalci dogodkov JavaScript .

Za kontekst predpostavimo, da gradite sledilnik inventarja, ki spremlja število izdelkov v vaši trgovini. V tem primeru je vaša trgovina predmet/založnik, vaš inventar pa opazovalec/naročnik. V tej situaciji bi bila optimalna uporaba vzorca opazovalca.



V vzorcu načrtovanja opazovalca mora vaš predmetni razred izvajati tri metode:

  • An priložiti metoda. Ta metoda subjektu doda opazovalca.
  • A ločiti metoda. Ta metoda odstrani opazovalca od predmeta.
  • A obvesti/posodobi metoda. Ta metoda obvesti opazovalce subjekta, ko se stanje subjekta spremeni.

Vaš opazovalni razred mora izvajati eno metodo, nadgradnja metoda. Ta metoda se odzove, ko se spremeni stanje subjekta.



Izvajanje razredov predmet in opazovalec

Prvi korak pri izvajanju tega vzorca je ustvariti vmesnike za razred subjekta in opazovalca, da zagotovimo, da izvajata pravilne metode:

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

Vmesniki v zgornjem bloku kode določajo metode, ki jih morajo implementirati vaši konkretni razredi.



Konkreten predmetni razred

Naslednji korak je implementacija konkretnega predmetnega razreda, ki implementira Predmet vmesnik:

// Subject 
class Store implements Subject {}

Nato inicializirajte Predmet stanje v Trgovina razred. Opazovalci subjekta se bodo odzvali na spremembe tega stanja.

V tem primeru je stanje število in opazovalci se bodo odzvali na povečanje števila:

kako spremeniti privzetega uporabnika v Chromu 
// Subject state 
private numberOfProducts: number;

Nato inicializirajte niz opazovalcev. S tem nizom boste sledili opazovalcem:

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