Implémentation du modèle de conception Observer dans TypeScript

Implémentation du modèle de conception Observer dans TypeScript

Un modèle de conception est un modèle qui résout un problème récurrent dans la conception de logiciels.





Le modèle d'observateur, également appelé modèle de publication-abonnement, est un modèle comportemental. Il vous permet d'informer plusieurs objets ou abonnés de tout événement publié dans l'objet qu'ils observent.



UTILISEZ LA VIDÉO DU JOUR

Ici, vous apprendrez à implémenter le modèle de conception d'observateur dans TypeScript.





Le modèle d'observateur

Le modèle d'observateur fonctionne en définissant une relation un-à-plusieurs entre l'éditeur et ses abonnés. Lorsqu'un événement se produit dans l'éditeur, il avertit tous les abonnés à cet événement. Un exemple répandu de ce modèle est Écouteurs d'événements JavaScript .

Pour le contexte, supposons que vous construisez un outil de suivi des stocks qui suit le nombre de produits dans votre magasin. Dans ce cas, votre magasin est le sujet/éditeur, et votre inventaire est l'observateur/abonné. L'utilisation du modèle de conception d'observateur serait optimale dans cette situation.



comment faire le mode portrait sur iphone 7

Dans le modèle de conception d'observateur, votre classe de sujet doit implémenter trois méthodes :

  • Un joindre méthode. Cette méthode ajoute un observateur au sujet.
  • UN détacher méthode. Cette méthode supprime un observateur d'un sujet.
  • UN notifier/mettre à jour méthode. Cette méthode avertit les observateurs du sujet lorsque l'état change dans le sujet.

Votre classe d'observateur doit implémenter une méthode, la mettre à jour méthode. Cette méthode réagit lorsqu'il y a un changement dans l'état de son sujet.



Implémentation des classes de sujet et d'observateur

La première étape de l'implémentation de ce modèle consiste à créer des interfaces pour le sujet et la classe d'observateur, afin de s'assurer qu'ils implémentent les bonnes méthodes :

// Subject/Publisher Interface 
interface Subject { 
    attachObserver(observer: Observer): void; 
    detachObserver(observer: Observer): void; 
    notifyObserver(): void; 
} 
  
// Observer/Subscriber Interface 
interface Observer { 
    update(subject: Subject): void; 
}

Les interfaces du bloc de code ci-dessus définissent les méthodes que vos classes concrètes doivent implémenter.



Une classe de sujets concrets

L'étape suivante consiste à implémenter une classe de sujet concrète qui implémente le Matière interface:

Windows ne peut pas redémarrer dans l'environnement de récupération 
// Subject 
class Store implements Subject {}

Ensuite, initialisez le Matière l'état dans le Magasin classer. Les observateurs du sujet réagiront aux changements de cet état.

Dans ce cas, l'état est un nombre, et les observateurs réagiront à une augmentation du nombre :

// Subject state 
private numberOfProducts: number;

Ensuite, initialisez un tableau d'observateurs. Ce tableau vous permet de suivre les observateurs :

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