Návrhový vzor je šablóna, ktorá rieši bežne sa opakujúci problém pri návrhu softvéru.

Vzor pozorovateľa, známy aj ako vzor zverejnenia a predplatenia, je vzorom správania. Umožňuje vám upozorniť viaceré objekty alebo predplatiteľov na akúkoľvek udalosť, ktorá je zverejnená v objekte, ktorý pozorujú.

Tu sa dozviete, ako implementovať návrhový vzor pozorovateľa v TypeScript.

Vzor pozorovateľa

Vzor pozorovateľa funguje tak, že definuje vzťah jeden k mnohým medzi vydavateľom a jeho predplatiteľmi. Keď sa vo vydavateľstve vyskytne udalosť, upozorní na ňu všetkých predplatiteľov. Jedným z rozšírených príkladov tohto vzoru je Prijímače udalostí JavaScript.

Pre kontext predpokladajme, že vytvárate nástroj na sledovanie zásob, ktorý sleduje počet produktov vo vašom obchode. V tomto prípade je váš obchod subjekt/vydavateľ a váš inventár je pozorovateľ/odberateľ. V tejto situácii by bolo optimálne použiť návrhový vzor pozorovateľa.

Vo vzore návrhu pozorovateľa musí vaša trieda predmetov implementovať tri metódy:

instagram viewer
  • An priložiť metóda. Táto metóda pridáva k subjektu pozorovateľa.
  • A oddeliť metóda. Táto metóda odstraňuje pozorovateľa z objektu.
  • A upozorniť/aktualizovať metóda. Táto metóda upozorní pozorovateľov subjektu, keď sa u subjektu zmení stav.

Vaša trieda pozorovateľov musí implementovať jednu metódu, aktualizovať metóda. Táto metóda reaguje, keď dôjde k zmene stavu subjektu.

Implementácia tried subjekt a pozorovateľ

Prvým krokom k implementácii tohto vzoru je vytvorenie rozhraní pre triedu subjektu a pozorovateľa, aby sa zabezpečilo, že implementujú správne metódy:

// Rozhranie predmetu/vydavateľa
rozhraniePredmet{
 pripojiťObserver (pozorovateľ: Observer): neplatné;
 odpojiťObserver (pozorovateľ: Observer): neplatné;
 notifyObserver(): neplatné;
}
// Rozhranie pozorovateľ/predplatiteľ
rozhraniePozorovateľ{
aktualizovať(predmet: Predmet): neplatné;
}

Rozhrania v bloku kódu vyššie definujú metódy, ktoré musia implementovať vaše konkrétne triedy.

Trieda konkrétnych predmetov

Ďalším krokom je implementácia konkrétnej triedy predmetov, ktorá implementuje Predmet rozhranie:

// Predmet
triedaObchodnáradiaPredmet{}

Ďalej inicializujte Predmetstav v Obchod trieda. Pozorovatelia subjektu budú reagovať na zmeny tohto stavu.

V tomto prípade je stav číslo a pozorovatelia budú reagovať na zvýšenie počtu:

// Stav predmetu
súkromné numberOfProducts: number;

Ďalej inicializujte pole pozorovateľov. Toto pole je spôsob, akým budete sledovať pozorovateľov:

// inicializácia pozorovateľov
súkromné pozorovatelia: Pozorovateľ[] = [];

Niektoré implementácie vzoru pozorovateľa môžete nájsť pomocou a Nastavte dátovú štruktúru namiesto poľa na sledovanie pozorovateľa. Použitie Setu zabezpečí, že sa ten istý pozorovateľ neobjaví dvakrát. Ak chcete namiesto toho použiť pole, mali by ste skontrolovať duplicitných pozorovateľov vo svojom priložiť metóda.

Ďalej by ste mali implementovať Predmetmetódy -priložiť, oddeliť, a upozorniť/aktualizovať– vo vašej konkrétnej triede.

Na implementáciu priložiť najprv skontrolujte, či je už pozorovateľ pripojený, a ak áno, vyhoďte chybu. V opačnom prípade pridajte pozorovateľa do poľa pomocou metóda poľa JavaScript, TAM:

// Pripájame pozorovateľa (ov)
pripojiťObserver (pozorovateľ: Observer): neplatné {
// Skontrolujte, či už bol pozorovateľ pripojený
konšt pozorovateľExistuje = toto.pozorovateľov.zahŕňa (pozorovateľa);
if (observerExists) {
hodiťNovýChyba(„Pozorovateľ už bol prihlásený“);
 }
// Pridať nového pozorovateľa
toto.pozorovateľov.TAM(pozorovateľ);
}

Ďalej implementujte svoje oddeliť nájdením indexu a jeho odstránením z poľa pomocou JavaScriptu spájať metóda.

Môžu nastať scenáre, v ktorých pozorovateľ, ktorého sa pokúšate odpojiť, už bol oddelený alebo ešte nebol prihlásený. Tieto scenáre by ste mali zvládnuť pridaním podmieneného príkazu, aby ste skontrolovali, či je pozorovateľ v poli alebo v množine, podľa okolností.

// Odpojenie pozorovateľa (ov)
odpojiťObserver (pozorovateľ: Observer): neplatné {
konzoly.log(„Odpájajúci sa pozorovateľ ${JSON.stringify (pozorovateľ)}`);
konšt pozorovateľIndex = toto.observers.indexOf (pozorovateľ);
if (observerIndex -1) {
hodiťNovýChyba(„Pozorovateľ neexistuje“);
 }
toto.pozorovateľov.splietať(pozorovateľIndex, 1);
 console.log('Pozorovateľ oddelený...');
}

Ďalej implementujte svoje upozorniť/aktualizovať metódu prejdením cez zoznam pozorovateľov a zavolaním aktualizovať metóda každého z nich:

// Oznamovanie pozorovateľov
notifyObserver(): neplatné {
 console.log('Oznamujem pozorovateľom...');
pre (konšt pozorovateľ ztoto.observers) {
 pozorovateľ.update(toto);
 }
}

Nakoniec, pre Predmet triedy, implementujte metódu, ktorá manipuluje so stavom a následne upozorní pozorovateľov na zmenu volaním ich upozorniť/aktualizovať metóda. Tento príklad je zjednodušením toho, ako môže subjekt vykonať akciu a potom informovať pozorovateľov:

// Zmena stavu a informovanie pozorovateľov
novýProdukt (produkty: číslo): neplatné {
toto.početProduktov += produktov;
 console.log('Do obchodu pridaný nový produkt');
toto.notifyObserver();
}

Konkrétne triedy pozorovateľov

Vytvorte triedu alebo triedy pozorovateľov, aby ste sa prihlásili na odber vydavateľa. Každá trieda pozorovateľov musí implementovať Pozorovateľ rozhranie.

Triedy pozorovateľov budú realizovať a upozorniť/aktualizovať metódu, ktorú by mal volať iba subjekt, ktorý pozorujú. Táto metóda by mala obsahovať všetku obchodnú logiku, ktorú potrebujete spustiť v reakcii na zmenu stavu subjektu:

// Pozorovateľ betónu 1
triedaInventárnáradiaPozorovateľ{
aktualizovať(): neplatné {
 console.log('Do obchodu bol pridaný nový produkt, aktualizujeme inventár...');
// Tu je skutočná obchodná logika...
	}
}
// Pozorovateľ betónu 2
triedaZákazníknáradiaPozorovateľ{
aktualizovať(): neplatné {
 console.log('Do obchodu pridaný nový tovar, musím si ho ísť pozrieť...');
// Tu je skutočná obchodná logika...
 }
}

Použitie vzoru pozorovateľa

Ak chcete použiť tento vzor, ​​vytvorte inštanciu konkrétnych tried predmetov a pozorovateľov. Keď tak urobíte, zavolajte Subjektu priložiť a odovzdať inštanciu Observer ako argument. V odpovedi subjekt pridá túto inštanciu do svojho zoznamu pozorovateľov:

// Instanciovanie subjektu a pozorovateľa
konšt obchod = Nový Store();
konšt inventár = Nový Inventár();
konšt zákazník = Nový zákazník()
// Odoberanie objektov vydavateľovi
obchod.attachObserver(inventár);
obchod.attachObserver(zákazníka);
// Zmena stavu predmetu
obchod.nový produkt(30);

Tento kód simuluje zmenu stavu. Zmena spustí metódu upozornenia na Predmet trieda. Táto metóda zase volá oznámiť metóda na každého z jej pozorovateľov. Každý pozorovateľ potom bude riadiť svoju vlastnú obchodnú logiku.

Tento vzor by ste mali použiť len vtedy, keď zmeny stavu jedného objektu ovplyvňujú iné objekty a množina zahrnutých objektov je neznáma alebo dynamická.

Výhody použitia vzoru pozorovateľa

Použitie tohto vzoru vo vašom kóde vám umožňuje zachovať princíp otvorenia/zatvorenia. Môžete pridať toľko odberateľov, koľko chcete, a vytvoriť vzťahy medzi objektmi za behu bez toho, aby ste zmenili kód subjektu.