Návrhový vzor je šablona, ​​která řeší běžně se opakující problém v návrhu softwaru.

Vzorec pozorovatele, také známý jako vzor publikování-odběr, je vzorem chování. Umožňuje vám upozornit více objektů nebo předplatitelů na jakoukoli událost, která je zveřejněna v objektu, který sledují.

Zde se dozvíte, jak implementovat návrhový vzor pozorovatele v TypeScriptu.

Vzor pozorovatele

Vzor pozorovatel funguje tak, že definuje vztah jedna k mnoha mezi vydavatelem a jeho předplatiteli. Když ve vydavateli dojde k události, upozorní na tuto událost všechny předplatitele. Jedním z rozšířených příkladů tohoto vzoru je Posluchače událostí JavaScriptu.

Pro kontext předpokládejme, že vytváříte sledovač zásob, který sleduje počet produktů ve vašem obchodě. V tomto případě je subjektem/vydavatelem váš obchod a pozorovatelem/předplatitelem je váš inventář. V této situaci by bylo optimální použít návrhový vzor pozorovatele.

V návrhovém vzoru pozorovatele musí vaše třída předmětu implementovat tři metody:

  • An připojit metoda. Tato metoda přidává k subjektu pozorovatele.
    • instagram viewer
  • A odpojit metoda. Tato metoda odstraňuje pozorovatele z předmětu.
  • A upozornit/aktualizovat metoda. Tato metoda upozorní pozorovatele subjektu, když se u subjektu změní stav.

Vaše třída pozorovatelů musí implementovat jednu metodu, Aktualizace metoda. Tato metoda reaguje, když dojde ke změně stavu jejího subjektu.

Implementace tříd Předmět a Pozorovatel

Prvním krokem k implementaci tohoto vzoru je vytvoření rozhraní pro třídu subjektu a pozorovatele, aby bylo zajištěno, že implementují správné metody:

// Rozhraní předmětu/vydavatele
rozhraníPředmět{
 připojitObserver (pozorovatel: Observer): prázdnota;
 odpojitObserver (pozorovatel: Observer): prázdnota;
 notifyObserver(): prázdnota;
}
// Rozhraní pozorovatel/předplatitel
rozhraníPozorovatel{
Aktualizace(předmět: Předmět): prázdnota;
}

Rozhraní v bloku kódu výše definují metody, které musí vaše konkrétní třídy implementovat.

Třída konkrétních předmětů

Dalším krokem je implementace konkrétní třídy předmětu, která implementuje Předmět rozhraní:

// Předmět
třídaObchodnářadíPředmět{}

Dále inicializujte Předmětstav v Obchod třída. Pozorovatelé subjektu budou reagovat na změny tohoto stavu.

V tomto případě je stav číslo a pozorovatelé budou reagovat na zvýšení počtu:

// Stav předmětu
soukromé numberOfProducts: number;

Dále inicializujte pole pozorovatelů. Toto pole je způsob, jakým budete sledovat pozorovatele:

// inicializace pozorovatelů
soukromé pozorovatelé: Pozorovatel[] = [];

Můžete najít některé implementace vzoru pozorovatele pomocí a Nastavit datovou strukturu místo pole pro sledování pozorovatele. Použití sady zajistí, že se stejný pozorovatel neobjeví dvakrát. Pokud chcete místo toho použít pole, měli byste zkontrolovat duplicitní pozorovatele ve vašem připojit metoda.

Dále byste měli implementovat Předmětmetody -připojit, odpojit, a upozornit/aktualizovat– ve vaší konkrétní třídě.

K implementaci připojit Nejprve zkontrolujte, zda je pozorovatel již připojen, a pokud ano, vyhoďte chybu. V opačném případě přidejte pozorovatele do pole pomocí Metoda pole JavaScript, TAM:

// Připojování pozorovatelů
připojitObserver (pozorovatel: Observer): prázdnota {
// Zkontrolujte, zda již byl pozorovatel připojen
konst pozorovatelExistuje = tento.pozorovatele.zahrnuje (pozorovatele);
if (observerExists) {
házetNovýChyba('Pozorovatel již byl přihlášen');
 }
// Přidání nového pozorovatele
tento.pozorovatelé.TAM(pozorovatel);
}

Dále implementujte svůj odpojit vyhledáním indexu a jeho odstraněním z pole pomocí JavaScriptu spoj metoda.

Mohou nastat scénáře, kdy pozorovatel, kterého se pokoušíte odpojit, již byl odpojen nebo nebyl původně přihlášen. Tyto scénáře byste měli zvládnout přidáním podmíněného příkazu, abyste zkontrolovali, zda je pozorovatel v poli nebo v sadě.

// Odpojení pozorovatele (observerů)
odpojitObserver (pozorovatel: Observer): prázdnota {
řídicí panel.log(„Odpojuji pozorovatele ${JSON.stringify (pozorovatel)}`);
konst pozorovatelIndex = tento.observers.indexOf (pozorovatel);
if (observerIndex -1) {
házetNovýChyba(„Pozorovatel neexistuje“);
 }
tento.pozorovatelé.split(pozorovatelIndex, 1);
 console.log('Pozorovatel odpojen...');
}

Dále implementujte svůj upozornit/aktualizovat metodou procházením seznamu pozorovatelů a voláním metody Aktualizace metoda každého z nich:

// Oznámení pozorovatelům
notifyObserver(): prázdnota {
 console.log('Informování pozorovatelů...');
pro (konst pozorovatel ztento.observers) {
 pozorovatel.aktualizace(tento);
 }
}

Konečně, pro Předmět třídy implementujte metodu, která manipuluje se stavem a poté upozorní pozorovatele na změnu voláním jejich upozornit/aktualizovat metoda. Tento příklad je zjednodušením toho, jak může subjekt provést akci a poté informovat pozorovatele:

// Změna stavu a upozornění pozorovatelů
novýProdukt (produkty: číslo): prázdnota {
tento.početProduktů += produktů;
 console.log('Do obchodu přidán nový produkt');
tento.notifyObserver();
}

Kurzy konkrétních pozorovatelů

Vytvořte třídu nebo třídy pozorovatelů a přihlaste se k odběru vydavatele. Každá třída pozorovatelů musí implementovat Pozorovatel rozhraní.

Třídy pozorovatelů budou implementovat a upozornit/aktualizovat metodu, kterou by měl volat pouze subjekt, který sledují. Tato metoda by měla obsahovat veškerou obchodní logiku, kterou potřebujete spustit v reakci na změnu stavu subjektu:

// Pozorovatel betonu 1
třídaInventářnářadíPozorovatel{
Aktualizace(): prázdnota {
 console.log('Do obchodu přidán nový produkt, aktualizace zásob...');
// Tady jde skutečná obchodní logika...
	}
}
// Pozorovatel betonu 2
třídaZákazníknářadíPozorovatel{
Aktualizace(): prázdnota {
 console.log('Do obchodu přidán nový produkt, musím se na něj jít podívat...');
// Tady jde skutečná obchodní logika...
 }
}

Použití Observer Pattern

Chcete-li použít tento vzor, ​​vytvořte instanci konkrétní třídy předmětu a pozorovatele. Jakmile to uděláte, zavolejte subjektu připojit a předat instanci Observer jako argument. V reakci na to subjekt přidá tuto instanci do svého seznamu pozorovatelů:

// Instanciování předmětu a pozorovatele
konst obchod = Nový Obchod();
konst inventář = Nový Inventář();
konst zákazník = Nový Zákazník()
// Odebírání objektů vydavateli
obchod.attachObserver(inventář);
obchod.attachObserver(zákazník);
// Změna stavu předmětu
obchod.nový výrobek(30);

Tento kód simuluje změnu stavu. Změna spustí metodu upozornění na Předmět třída. Tato metoda zase volá oznámit metoda na každého z jejích pozorovatelů. Každý pozorovatel pak bude provozovat svou vlastní obchodní logiku.

Tento vzor byste měli používat pouze tehdy, když změny stavu jednoho objektu ovlivní jiné objekty a množina zahrnutých objektů je neznámá nebo dynamická.

Výhody použití Observer Pattern

Použití tohoto vzoru ve vašem kódu vám umožní zachovat princip otevření/zavření. Můžete přidat tolik odběratelů, kolik chcete, a vytvořit vztahy mezi objekty za běhu, aniž byste měnili kód subjektu.