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

Un patron de style est une disposition qui corrige un problème généralement récurrent dans la mise en page d'un programme logiciel.

Le modèle d'observateur, également appelé modèle de publication et d'abonnement, est un modèle comportemental. Il vous permet d'alerter plusieurs choses ou clients concernant tout type d'occasion qui est publiée dans l'objet qu'ils observent.

Vous allez découvrir ici comment réaliser le pattern de style onlooker en TypeScript.

Le patron de style observateur

Le pattern d'observateur fonctionne en spécifiant une connexion one-to-many entre l'auteur et ses clients. Lorsqu'un événement a lieu chez l'éditeur, il informe tous les clients à cette occasion. Un exemple prévalent de ce pattern est le JavaScript occasion audiences.

Pour le contexte, supposons que vous développez un traqueur d'inventaire qui suit le nombre d'articles dans votre magasin. Dans cette situation, votre magasin est le sujet/éditeur, et aussi votre approvisionnement est l'observateur/abonné. Faire usage du pattern de style observateur serait certainement optimal dans cette situation.

Dans le modèle de style observateur, votre cours sujet doit effectuer trois techniques :

  • Un attache technique. Cette approche ajoute un spectateur au sujet.
  • A détacher méthode. Cette méthode permet d'éliminer un spectateur d'un sujet.
  • A notifier/ mettre à niveau méthode. Cette technique informe les spectateurs du sujet lorsque les ajustements d'état dans le sujet.

Votre classe d'observateurs doit appliquer une approche, la méthode de la mise à jour méthode. Cette technique réagit lorsqu'il y a un changement dans l'état de son sujet.

Implémentation des classes de sujets ainsi que des classes d'observateurs.

La première étape de la mise en œuvre de ce patron est de produire des interfaces utilisateur pour le cours sujet ainsi que pour le cours observateur, afin de s'assurer qu'ils appliquent les bonnes méthodes :

Les interfaces dans le bloc de code ci-dessus spécifient les approches que vos classes concrètes doivent appliquer.

Voir aussi :  Que sont les applications monopage et les applications Web progressives ?

Une classe concrète de sujet

L'action suivante consiste à réaliser une classe de sujet concret qui exécute le... Sujet interface utilisateur :

Ensuite, démarrez le Sujet : 'état dans le Magasin classe. Les spectateurs du sujet réagiront aux ajustements de cet état.

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

Ensuite, démarrez une variété d'observateurs. Cette variété est juste la façon dont vous allez garder un œil sur les observateurs :

Vous pouvez trouver certaines applications du motif de l'observateur utilisant un cadre d'information Set au lieu d'une gamme pour garder un œil sur l'observateur. L'utilisation d'un Set permet de s'assurer que le même observateur n'apparaîtra pas deux fois. Si vous souhaitez plutôt utiliser une sélection, vous devez vérifier les observateurs en double dans votre fichier attacher méthode.

Ensuite, vous devez implémenter la méthode Sujet 's techniques - joindre , détacher et aussi notify/ upgrade -- dans votre classe concrète.

Pour appliquer le attacher vérifiez tout d'abord si le spectateur est actuellement connecté et lancez une erreur si c'est le cas. Sinon, ajoutez le visualiseur à la sélection en utilisant la technique de variété JavaScript, pousser :

Ensuite, appliquez votre détachement en trouvant l'index et en le retirant également de la variété en utilisant la méthode JavaScript. splice technique.

Voir aussi :  Les 7 meilleurs frameworks Python pour personnaliser vos interfaces graphiques.

Il peut y avoir des circonstances où l'observateur que vous essayez de détacher a actuellement été séparé ou n'était pas abonné au départ. Vous devez traiter ces circonstances en incluant une déclaration conditionnelle pour vérifier si l'observateur reste dans la variété ou l'ensemble probablement.

Ensuite, mettez en œuvre votre notify/ update en nouant sur votre listing d'observateurs ainsi qu'en appelant la fonction mise à jour de chacun d'eux :

Enfin, pour la méthode Sujet exécutez une approche qui ajuste l'état et après cela notifie les spectateurs de l'ajustement en appelant leur classe notify/ update technique. Cette instance est une simplification de la façon exacte dont un sujet pourrait faire une activité et ensuite éduquer les observateurs :

Classes d'observateurs concrets

Créer une ou plusieurs classes d'observateurs, pour s'inscrire à l'éditeur. Chaque classe d'observateur doit exécuter la fonction Observer interface.

Les classes de spectateurs appliqueront une notification/ mise à niveau approche que seul le sujet qu'elles observent doit appeler. Cette approche doit avoir toute la logique métier que vous devez exécuter en réaction à un changement d'état du sujet :

Utilisation du modèle de l'observateur

Pour utiliser ce pattern, instanciez les cours concrets du sujet et de l'observateur. Une fois que vous l'avez fait, appelez le cours du sujet. attacher et passez également l'instance de l'observateur comme un désaccord. En réponse, le sujet va certainement inclure cette instance à sa liste de contrôle des observateurs :

Ce code reproduit un changement d'état. Le changement déclenchera l'approche notify sur l'approche Sujet classe. Cette approche, par conséquent, appelle la classe notifier sur chacun de ses observateurs. Chaque observateur va ensuite exécuter sa propre logique d'organisation.

Voir aussi :  Comment centrer des images avec CSS

Vous devez utiliser ce motif uniquement lorsque les ajustements de l'état d'un objet affectent d'autres objets, ainsi que la collection d'éléments impliqués est non identifiée ou vibrante.

Avantages de l'utilisation du patron d'observateur

L'utilisation de ce pattern dans votre code vous permet de préserver le concept d'ouverture/fermeture. Vous pouvez ajouter autant d'abonnés que vous le souhaitez, et développer des relations entre les objets au moment de l'exécution, sans transformer le code du sujet.

Qu'est-ce que le modèle Observer dans TypeScript ?

Observer est un modèle de conception comportemental qui permet à certains objets d'informer d'autres objets des changements de leur état. Le modèle Observer fournit un moyen de s'abonner et de se désabonner à ces événements pour tout objet qui implémente une interface d'abonné.

Qu'est-ce qu'un modèle d'observateur, donnez un exemple ?

Observer est un modèle de conception comportemental. Il spécifie la communication entre les objets : observables et observateurs. Un observable est un objet qui informe les observateurs des changements de son état. Par exemple, une agence de presse peut avertir les chaînes lorsqu'elle reçoit des informations.

Quelles sont les considérations d'implémentation du modèle Observer ?

Mise en œuvre. Le modèle d'observateur utilise trois classes d'acteurs. Sujet, Observateur et Client. Le sujet est un objet ayant des méthodes pour attacher et détacher des observateurs à un objet client.

Cliquez pour évaluer cet article !
[Total: Moyenne : ]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.