Внедряване на шаблона за проектиране на наблюдателя в TypeScript

Внедряване на шаблона за проектиране на наблюдателя в TypeScript

Шаблонът за проектиране е шаблон, който решава често повтарящ се проблем в софтуерния дизайн.





Моделът на наблюдател, известен също като модел публикуване-абониране, е поведенчески модел. Тя ви позволява да уведомите множество обекти или абонати за всяко събитие, което е публикувано в обекта, който те наблюдават.



MAKEUSEOF ВИДЕО НА ДЕНЯ

Тук ще научите как да внедрите шаблона за проектиране на наблюдател в TypeScript.





Моделът на наблюдателя

Моделът на наблюдател работи, като дефинира връзка 'един към много' между издателя и неговите абонати. Когато възникне събитие в издателя, той ще уведоми всички абонати за това събитие. Един широко разпространен пример за този модел е JavaScript слушатели на събития .

За контекст, приемете, че създавате инструмент за проследяване на инвентара, който следи броя на продуктите във вашия магазин. В този случай вашият магазин е субект/издател, а вашият инвентар е наблюдател/абонат. Използването на шаблона за проектиране на наблюдателя би било оптимално в тази ситуация.



вижте кого сте блокирали във фейсбук

В шаблона за проектиране на наблюдателя вашият предметен клас трябва да имплементира три метода:

  • Ан прикачвам метод. Този метод добавя наблюдател към обекта.
  • А отделям се метод. Този метод премахва наблюдател от обект.
  • А уведомявам/актуализирам метод. Този метод уведомява наблюдателите на обекта, когато състоянието се промени в обекта.

Вашият клас наблюдател трябва да имплементира един метод, the актуализация метод. Този метод реагира, когато има промяна в състоянието на обекта.



Внедряване на класовете Subject и Observer

Първата стъпка към прилагането на този модел е да се създадат интерфейси за субект и клас наблюдател, за да се гарантира, че те прилагат правилните методи:

нямате разрешение за достъп до /index.html на този сървър. 
// Subject/Publisher Interface 
interface Subject { 
    attachObserver(observer: Observer): void; 
    detachObserver(observer: Observer): void; 
    notifyObserver(): void; 
} 
  
// Observer/Subscriber Interface 
interface Observer { 
    update(subject: Subject): void; 
}

Интерфейсите в кодовия блок по-горе дефинират методите, които вашите конкретни класове трябва да прилагат.



Конкретен предметен клас

Следващата стъпка е да се внедри конкретен предметен клас, който прилага Предмет интерфейс:

// Subject 
class Store implements Subject {}

След това инициализирайте Предмет състояние в Магазин клас. Наблюдателите на обекта ще реагират на промените в това състояние.

В този случай състоянието е число и наблюдателите ще реагират на увеличаване на числото:

// Subject state 
private numberOfProducts: number;

След това инициализирайте масив от наблюдатели. Този масив е начинът, по който ще следите наблюдателите:

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