Modèles de conception JavaScript: le modèle d'observateur

Points clés du modèle d'observateur JavaScript

• Le modèle d'observateur en JavaScript permet une liaison de données un-à-plusieurs entre les éléments, ce qui est particulièrement utile pour garder plusieurs éléments synchronisés avec les mêmes données.
• Le modèle d'observateur contient trois méthodes principales: subscribe (ajouter de nouveaux événements observables), unsubscribe (supprimer tous les événements à l'aide de données liées). broadcast
L'utilisation de fonctionnalités ES6 telles que les classes, les fonctions de flèche et les constantes peuvent implémenter efficacement les modèles d'observateurs, ce qui rend le code plus simple et plus facile à réutiliser.
Le mode observateur peut être utilisé pour résoudre des problèmes pratiques en JavaScript, tels que la mise à jour du nombre de mots dans les articles de blog à chaque touche et peut être encore amélioré pour créer de nouvelles fonctionnalités.

En JavaScript, il y a souvent un problème: une méthode est nécessaire pour mettre à jour une partie de la page en réponse à certains événements et utiliser les données fournies par ces événements. Par exemple, l'utilisateur entre puis le projette en un ou plusieurs composants. Cela provoque beaucoup d'opérations de poussée et de traction dans le code pour que tout garde en synchronisation. C'est là que le modèle de conception de l'observateur peut aider - il met en œuvre une liaison de données un-à-plusieurs entre les éléments. Cette liaison de données unidirectionnelle peut être axée sur les événements. Avec ce modèle, vous pouvez créer du code réutilisable pour répondre à vos besoins spécifiques. Dans cet article, je veux explorer le modèle de conception de l'observateur. Il vous aidera à résoudre un problème commun que vous rencontrez souvent dans les scripts des clients. C'est une seule à plusieurs, une liaison à sens unique et axée sur les événements. Ce problème se produit souvent lorsque vous avez beaucoup d'éléments qui doivent être synchronisés. J'utiliserai Ecmascript 6 pour illustrer ce modèle. Oui, il y aura des cours, des fonctions de flèche et des constantes. Si vous ne le connaissez pas, vous pouvez explorer ces sujets vous-même. Je n'utiliserai que la pièce qui introduit le sucre syntaxique dans ES6, donc il peut également fonctionner avec ES5 si nécessaire. J'utiliserai le développement du test (TDD) pour gérer ce modèle. De cette façon, vous pouvez savoir comment chaque composant est utilisé. Les nouvelles fonctionnalités linguistiques dans ES6 rendent le code plus concis. Alors, commençons.

Observer d'événements

La vue avancée de ce mode est la suivante:

<code>EventObserver
│ 
├── subscribe: 添加新的可观察事件
│ 
├── unsubscribe: 移除可观察事件
│
└── broadcast: 使用绑定数据执行所有事件</code>

Après avoir élaboré sur le mode observateur, j'ajouterai une fonction de comptage de mots qui l'utilise. Le composant Word Count utilisera cet observateur et intégrera tout ensemble. Pour initialiser

, procédez comme suit: EventObserver

class EventObserver {
  constructor() {
    this.observers = [];
  }
}

Commencez par une liste vide d'événements d'observation, et chaque nouvelle instance le fait. À partir de maintenant, ajoutons plus de façons de perfectionner le modèle de conception dans

. EventObserver

Méthode d'abonnement

Pour ajouter un nouvel événement, procédez comme suit:

subscribe(fn) {
  this.observers.push(fn);
}

Obtenez la liste des événements d'observation et poussez de nouveaux éléments dans le tableau. La liste des événements est une liste de fonctions de rappel. Une façon de tester cette méthode en JavaScript pur est la suivante:

<code>EventObserver
│ 
├── subscribe: 添加新的可观察事件
│ 
├── unsubscribe: 移除可观察事件
│
└── broadcast: 使用绑定数据执行所有事件</code>

J'utilise Assertion de nœud pour tester ce composant dans Node. La même affirmation existe également dans l'affirmation de Chai. Notez que la liste des événements d'observation se compose de rappels simples. Nous vérifions ensuite la durée de la liste et affirmons que le rappel se trouve dans la liste.

Méthode de désabonnement

Pour supprimer un événement, procédez comme suit:

class EventObserver {
  constructor() {
    this.observers = [];
  }
}

Filtrez tout ce qui correspond à la fonction de rappel de la liste. S'il n'y a pas de correspondance, le rappel restera dans la liste. Le filtre renvoie une nouvelle liste et réaffecte la liste des observateurs. Pour tester cette bonne méthode, procédez comme suit:

subscribe(fn) {
  this.observers.push(fn);
}

Le rappel doit correspondre à la même fonction sur la liste. Si une correspondance existe, la méthode unsubscribe le supprime de la liste. Notez que le test utilise la référence de la fonction pour l'ajouter et le supprimer.

Méthode de diffusion

Pour appeler tous les événements, procédez comme suit:

// Arrange
const observer = new EventObserver();
const fn = () => {};

// Act
observer.subscribe(fn);

// Assert
assert.strictEqual(observer.observers.length, 1);

Cela iratera sur la liste des événements d'observation et exécutera tous les rappels. Avec cela, vous pouvez obtenir la relation un-à-plusieurs dont vous avez besoin pour vous abonner aux événements. Vous pouvez passer dans le paramètre data, ce qui rend la liaison des données de rappel. ES6 utilise les fonctions Arrow pour rendre le code plus efficace. Notez que la fonction (subscriber) => subscriber(data) fait la plupart du travail. Cette fonction flèche unique bénéficie de cette courte syntaxe ES6. Il s'agit d'une amélioration significative du langage de programmation JavaScript. Pour tester cette méthode broadcast:

unsubscribe(fn) {
  this.observers = this.observers.filter((subscriber) => subscriber !== fn);
}

Utiliser let au lieu de const afin que nous puissions modifier la valeur de la variable. Cela rend la variable mutable, me permettant de réaffecter sa valeur dans le rappel. Utilisez let dans votre code pour signaler à d'autres programmeurs que la variable change à un moment donné. Cela augmente la lisibilité et la clarté du code JavaScript. Ce test me donne suffisamment de confiance pour m'assurer que l'observateur fonctionne comme prévu. Avec TDD, il s'agit de construire du code réutilisable en JavaScript pur. Il y a de nombreux avantages à rédiger du code testable en JavaScript pur. Testez tout et gardez ce qui est bénéfique pour la réutilisation du code. Avec cela, nous l'avons perfectionné. La question est, que pouvez-vous construire avec? EventObserver

Application pratique du mode d'observateur: Démonstration du nombre de mots de blog

Pour la démo, il est temps de créer un article de blog qui garde le nombre de mots pour vous. Chaque frappe que vous entrez sera synchronisée par le modèle de conception de l'observateur. Considérez-le comme une entrée de texte libre, où chaque événement déclenche une mise à jour de l'endroit où vous en avez besoin. Pour obtenir le nombre de mots à partir de la saisie du texte libre, vous pouvez effectuer ce qui suit:

// Arrange
const observer = new EventObserver();
const fn = () => {};

observer.subscribe(fn);

// Act
observer.unsubscribe(fn);

// Assert
assert.strictEqual(observer.observers.length, 0);

terminé! Il y a beaucoup de contenu dans cette fonction pure apparemment simple, alors que diriez-vous d'un simple test unitaire? De cette façon, mes intentions sont claires:

<code>EventObserver
│ 
├── subscribe: 添加新的可观察事件
│ 
├── unsubscribe: 移除可观察事件
│
└── broadcast: 使用绑定数据执行所有事件</code>

Veuillez noter la chaîne d'entrée légèrement étrange dans blogPost. Mon objectif est d'avoir cette fonction couvre autant de cas de bord que possible. Tant que cela me donne un nombre de mots correct, nous allons dans la bonne direction. Soit dit en passant, c'est le véritable pouvoir du TDD. Cette implémentation peut être itérée et couvre autant de cas d'utilisation que possible. Les tests unitaires vous indiquent comment je m'attends à ce qu'il se comporte. Si le comportement est imparfait, il est facile de l'aller et de l'ajuster pour une raison quelconque. En testant, laissez suffisamment de preuves pour que d'autres apportent les modifications. Il est temps de connecter ces composants réutilisables au DOM. Ceci est la partie que vous prenez pur javascript et que vous le soudez dans votre navigateur. Une façon consiste à utiliser le HTML suivant sur la page:

class EventObserver {
  constructor() {
    this.observers = [];
  }
}

Ensuite, il y a le javascript suivant:

subscribe(fn) {
  this.observers.push(fn);
}

Obtenez tout le code réutilisable et définissez le mode de conception de l'observateur. Cela suivra les changements dans la zone de texte et vous donnera le nombre de mots en dessous. J'utilise body.appendChild() dans l'API DOM pour ajouter ce nouvel élément. Ensuite, un auditeur d'événements est attaché pour le donner vie. Notez que l'utilisation des fonctions Arrow peut connecter une seule ligne d'événements. En fait, vous pouvez l'utiliser pour diffuser des modifications axées sur les événements à tous les abonnés. () => blogObserver.broadcast() La plupart des travaux ont été effectués ici. Il transmet même les dernières modifications de la zone de texte directement dans la fonction de rappel. Oui, les scripts clients sont plutôt cool. Aucune des démos que vous pouvez toucher et ajuster n'est complète, voici le codep: (le lien de codepen doit être inséré ici, qui ne peut pas être fourni en raison de l'incapacité d'accéder aux sites Web externes)

Maintenant, je n'appellerai pas cette fonctionnalité une fonctionnalité complète. Mais ce n'est que le point de départ du modèle de conception de l'observateur. La question dans mon esprit est: jusqu'où êtes-vous prêt à aller?

Dans l'attente de

Vous pouvez développer cette idée davantage. Vous pouvez utiliser le modèle de conception de l'observateur pour créer de nombreuses nouvelles fonctionnalités. Vous pouvez améliorer la démo en utilisant les méthodes suivantes:

• Un autre composant calcule le nombre de paragraphes
• Un autre composant affiche un aperçu du texte d'entrée
• Aperçu amélioré avec le support Markdown, par ex.

Ce ne sont que quelques idées dans lesquelles vous pouvez creuser. Les améliorations ci-dessus défieront vos capacités de programmation.

Conclusion

Le modèle de conception de l'observateur peut vous aider à résoudre des problèmes pratiques en JavaScript. Cela résout le problème à long terme de maintenir un tas d'éléments synchronisés avec les mêmes données. En règle générale, lorsque le navigateur déclenche un événement spécifique. Je crois que la plupart d'entre vous ont eu ce problème maintenant et se sont tournés vers des outils et des dépendances tierces. Ce modèle de conception vous permet d'aller le plus loin possible. En programmation, vous abstriez la solution en modèles et créez du code réutilisable. Les avantages que cela vous apporteront sont sans fin. J'espère que vous pouvez voir combien de travail vous pouvez faire en JavaScript pur avec juste un peu de discipline et d'effort. Les nouvelles fonctionnalités de la langue, telles que ES6, peuvent vous aider à écrire un code concis et réutilisable.

(La FAQ pour le modèle d'observateur JavaScript doit être incluse ici, mais en raison des limitations de l'espace, il a été omis.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!