Implementarea modelului de proiectare Observer în TypeScript

Implementarea modelului de proiectare Observer în TypeScript

Un model de design este un șablon care rezolvă o problemă frecventă recurentă în proiectarea software.





de ce nu se încarcă laptopul meu?

Modelul de observator, cunoscut și sub numele de model de publicare-abonare, este un model de comportament. Vă permite să notificați mai multe obiecte sau abonați despre orice eveniment care este publicat în obiectul pe care îl observă.



REALIZAREA VIDEOCLIPULUI ZILEI

Aici veți învăța cum să implementați modelul de design al observatorului în TypeScript.





Modelul Observatorului

Modelul de observator funcționează prin definirea unei relații unu-la-mulți între editor și abonații săi. Când are loc un eveniment în editor, acesta va anunța toți abonații la acel eveniment. Un exemplu larg răspândit al acestui model este Ascultători de evenimente JavaScript .

Pentru context, presupuneți că construiți un instrument de urmărire a inventarului care ține evidența numărului de produse din magazinul dvs. În acest caz, magazinul dvs. este subiectul/editorul, iar inventarul dvs. este observatorul/abonatul. Utilizarea modelului de proiectare a observatorului ar fi optimă în această situație.



În modelul de proiectare al observatorului, clasa dvs. de subiect trebuie să implementeze trei metode:

  • Un atașați metodă. Această metodă adaugă un observator subiectului.
  • A desprinde metodă. Această metodă îndepărtează un observator dintr-un subiect.
  • A notifică/actualizează metodă. Această metodă anunță observatorii subiectului când starea subiectului se schimbă.

Clasa dvs. de observatori trebuie să implementeze o metodă, cea Actualizați metodă. Această metodă reacționează atunci când există o schimbare în starea subiectului său.



Implementarea claselor Subiect și Observator

Primul pas pentru implementarea acestui tipar este crearea interfețelor pentru clasa subiect și observator, pentru a vă asigura că implementează metodele corecte:

plugin Adobe Flash Player pentru Mac 
// Subject/Publisher Interface 
interface Subject { 
    attachObserver(observer: Observer): void; 
    detachObserver(observer: Observer): void; 
    notifyObserver(): void; 
} 
  
// Observer/Subscriber Interface 
interface Observer { 
    update(subject: Subject): void; 
}

Interfețele din blocul de cod de mai sus definesc metodele pe care clasele dumneavoastră concrete trebuie să le implementeze.



O clasă de subiecte concrete

Următorul pas este implementarea unei clase de subiecte concrete care implementează Subiect interfata:

// Subject 
class Store implements Subject {}

Apoi, inițializați Subiect starea lui în Magazin clasă. Observatorii subiectului vor reacționa la schimbările în această stare.

În acest caz, starea este un număr, iar observatorii vor reacționa la o creștere a numărului:

cum să organizezi cărți pe Kindle 
// Subject state 
private numberOfProducts: number;

Apoi, inițializați o serie de observatori. Această matrice este modul în care veți ține evidența observatorilor:

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