Implementacja wzorca projektowego Observer w TypeScript

Implementacja wzorca projektowego Observer w TypeScript

Wzorzec projektowy to szablon, który rozwiązuje często powtarzający się problem w projektowaniu oprogramowania.





oglądanie bezpłatnej telewizji online bez pobierania

Wzorzec obserwatora, znany również jako wzorzec publikowania-subskrypcji, jest wzorcem behawioralnym. Umożliwia powiadamianie wielu obiektów lub subskrybentów o dowolnym zdarzeniu opublikowanym w obserwowanym przez nich obiekcie.



MAKEUSEOF WIDEO DNIA

Tutaj dowiesz się, jak zaimplementować wzorzec projektowania obserwatora w TypeScript.





Wzór obserwatora

Wzorzec obserwatora działa poprzez zdefiniowanie relacji jeden-do-wielu między wydawcą a jego subskrybentami. Gdy zdarzenie wystąpi w wydawcy, powiadomi on wszystkich subskrybentów o tym zdarzeniu. Jednym z rozpowszechnionych przykładów tego wzorca jest detektory zdarzeń JavaScript .

Dla kontekstu załóżmy, że tworzysz narzędzie do śledzenia zapasów, które śledzi liczbę produktów w Twoim sklepie. W tym przypadku Twój sklep jest tematem/wydawcą, a Twoim ekwipunkiem jest obserwator/subskrybent. Użycie wzorca projektowego obserwatora byłoby w tej sytuacji optymalne.



We wzorcu projektowym obserwatora klasa przedmiotu musi implementować trzy metody:

  • jakiś przytwierdzać metoda. Ta metoda dodaje obserwatora do tematu.
  • A odłączyć metoda. Ta metoda usuwa obserwatora z podmiotu.
  • A powiadom/zaktualizuj metoda. Ta metoda powiadamia obserwatorów podmiotu o zmianie stanu podmiotu.

Twoja klasa obserwatora musi implementować jedną metodę, the aktualizacja metoda. Ta metoda reaguje, gdy następuje zmiana stanu pacjenta.



Implementacja klas tematu i obserwatora

Pierwszym krokiem do zaimplementowania tego wzorca jest stworzenie interfejsów dla klasy podmiotu i obserwatora, aby upewnić się, że implementują one poprawne metody:

jak zmienić kanał na moim routerze 
// Subject/Publisher Interface 
interface Subject { 
    attachObserver(observer: Observer): void; 
    detachObserver(observer: Observer): void; 
    notifyObserver(): void; 
} 
  
// Observer/Subscriber Interface 
interface Observer { 
    update(subject: Subject): void; 
}

Interfejsy w powyższym bloku kodu definiują metody, które muszą zaimplementować Twoje konkretne klasy.



co zrobić, jeśli zostałeś zhakowany na facebooku

Konkretna klasa przedmiotowa

Następnym krokiem jest zaimplementowanie konkretnej klasy przedmiotowej, która implementuje Temat interfejs:

// Subject 
class Store implements Subject {}

Następnie zainicjuj Temat stan w Sklep klasa. Obserwatorzy podmiotu zareagują na zmiany tego stanu.

W tym przypadku stan jest liczbą, a obserwatorzy zareagują na wzrost liczby:

// Subject state 
private numberOfProducts: number;

Następnie zainicjuj tablicę obserwatorów. Ta tablica pozwala śledzić obserwatorów:

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