Comment utiliser les modèles de conception JavaScript

Les modèles de conception JavaScript fournissent des solutions éprouvées aux problèmes courants du développement logiciel. Comprendre et appliquer ces modèles vous permettra d'écrire un code JavaScript meilleur et plus efficace.

Introduction aux modèles de conception JavaScript

Les concepts contenus dans les modèles de conception JavaScript servent à vous guider sur la façon de résoudre les problèmes courants auxquels vous serez confronté en tant que développeur JavaScript.

Vous devez comprendre les abstractions sous-jacentes derrière les modèles, afin de pouvoir les appliquer à votre problème particulier. Vous devriez également être en mesure d'identifier quand l'un de ces modèles peut être utile à votre code.

Le modèle de module

Le pattern Module, qui assure l'encapsulation, fait partie de Le système de modules de JavaScript. Il fournit un moyen de sécuriser les données privées et le comportement au sein d'un module tout en exposant une API publique. Il vous permet de créer des objets de module autonomes avec des niveaux d'accès privés et publics.

C'est un peu la façon dont vous pouvez utiliser des modificateurs d'accès sur une classe dans un langage comme Java ou C++.

En JavaScript, vous pouvez implémenter le modèle de module à l'aide de fermetures.

En utilisant une fermeture pour enfermer des membres privés (fonctions, variables, données), vous créez une portée où ces membres sont accessibles mais pas directement exposés au monde extérieur. Cela aide à réaliser l'encapsulation, en gardant les détails internes cachés du code externe.

De plus, le retour d'une API publique à partir de la fermeture permet un accès privé à certaines fonctions ou propriétés que vous souhaitez exposer dans le cadre de l'interface du module.

Cela vous donnera le contrôle sur les parties du module qui sont accessibles aux autres parties de la base de code. Cela maintient une frontière claire entre les fonctionnalités publiques et privées.

Voici un exemple:

constante ModuleCart d'Achat = (fonction () {
// Données privées
laisser CartItems = [] ;
// Méthode privée
fonctioncalculateTotalItems() {
retour cartItems.reduce((somme, article) => total + article.quantité, 0);
 }
// API publique
retour {
 addItem (élément) {
 cartItems.push (élément);
 },
 getTotalItems() {
retour calculateTotalItems();
 },
 vider le panier() {
 CartItems = [] ;
 }
 };
})();
// Exemple d'utilisation
ShoppingCartModule.addItem({ nom: 'Produit 1', quantité: 2 });
ShoppingCartModule.addItem({ nom: 'Produit 2', quantité: 1 });
console.log (ShoppingCartModule.getTotalItems()); // Sortie: 3
ShoppingCartModule.clearCart();
console.log (ShoppingCartModule.getTotalItems()); // Sortie: 0

Dans cet exemple, le ModuleCart d'Achat représente un module créé à l'aide du modèle de module. L'exécution du code se passe comme ceci :

1. Le IIFE enveloppe le bloc de code entier, créant une fonction qui est immédiatement exécutée lors de la déclaration. Cela établit une portée privée pour les membres du module.
2. CartItems est un tableau privé. Il n'est pas directement accessible depuis l'extérieur du module.
3. calculateTotalItems() est une méthode privée qui calcule le nombre total d'articles dans le panier. Il utilise le réduire() méthode pour itérer sur CartItems tableau et additionnez les quantités de tous les articles.
4. Le module renvoie son API publique sous la forme d'un littéral d'objet, exposant trois méthodes publiques: ajouter un item(), getTotalItems(), et vider le panier().
5. En dehors du module, vous pouvez accéder aux méthodes publiques du module pour interagir avec la fonctionnalité du panier.

Cet exemple montre comment le modèle de module vous permet d'encapsuler des données privées (CartItems) et le comportement (calculateTotalItems) dans le module tout en fournissant une interface publique (ajouter un item, getTotalItems, et vider le panier) pour interagir avec le module.

Le modèle d'observateur

Le modèle Observer établit une dépendance un-à-plusieurs entre les objets. Lorsque l'état d'un objet change, il en informe tous ses dépendants et ils se mettent à jour automatiquement. Ce modèle est particulièrement utile pour gérer les interactions événementielles ou découpler les composants d'un système.

En JavaScript, vous pouvez implémenter le modèle Observer en utilisant le addEventListener intégré, dispatchEvent méthodes, ou toute autre mécanismes de gestion des événements. En abonnant des observateurs à des événements ou à des sujets, vous pouvez les notifier et les mettre à jour lorsque des événements spécifiques se produisent.

Par exemple, vous pouvez utiliser le modèle Observer pour implémenter un système de notification simple :

// Implémentation du modèle d'observateur
fonctionSystème de notification() {
// Liste des abonnés
ce.abonnés = [] ;
// Méthode pour s'abonner aux notifications
ce.subscribe = fonction (abonné) {
ce.subscribers.push (abonné) ;
 };
// Méthode pour se désinscrire des notifications
ce.unsubscribe = fonction (abonné) {
constante indice = ce.subscribers.indexOf (abonné) ;
si (indice !== -1) {
ce.abonnés.splice (index, 1);
 }
 };
// Méthode pour notifier les abonnés
ce.notifier = fonction (message) {
ce.abonnés.forEach(fonction (abonné) {
 abonné.receiveNotification (message);
 });
 };
}
// Objet abonné
fonctionAbonné(nom) {
// Méthode pour recevoir et gérer les notifications
ce.receiveNotification = fonction (message) {
console.log (nom + ' notification reçue: ' + message);
 };
}
// Exemple d'utilisation
constante système de notification = nouveau NotificationSystem();
// Créer des abonnés
constante abonné1 = nouveau Abonné('Abonné 1');
constante abonné2 = nouveau Abonné('Abonné 2');
// Inscrire les abonnés au système de notification
notificationSystem.subscribe (abonné1);
notificationSystem.subscribe (abonné2);
// Avertir les abonnés
notificationSystem.notify('Nouvelle notification !');

L'objectif ici est de permettre à plusieurs abonnés de recevoir des notifications lorsqu'un événement spécifique se produit.

Le Système de notification la fonction représente le système qui envoie les notifications, et la fonction Abonné La fonction représente les destinataires des notifications.

Le NotificationSystem a un tableau appelé les abonnés pour stocker les abonnés qui souhaitent recevoir des notifications. Le s'abonner permet aux abonnés de s'enregistrer en s'ajoutant au tableau des abonnés. Le Se désabonner La méthode supprimerait les abonnés du tableau.

Le notifier méthode dans NotificationSystem parcourt le tableau des abonnés et appelle le recevoirNotification méthode sur chaque abonné, leur permettant de gérer les notifications.

Les instances de la fonction Abonné représentent les abonnés. Chaque abonné a une méthode receiveNotification qui détermine comment il gère les notifications reçues. Dans cet exemple, la méthode consigne le message reçu dans la console.

Pour utiliser le modèle d'observateur, créez une instance de NotificationSystem. Vous pouvez ensuite créer des instances de Subscriber et les ajouter au système de notification à l'aide de la méthode subscribe.

L'envoi d'une notification déclenchera la méthode receiveNotification pour chaque abonné et consignera le message pour chaque abonné.

Le modèle Observer permet un couplage lâche entre le système de notification et les abonnés, ce qui permet une flexibilité. Le modèle favorise la séparation des préoccupations, ce qui facilitera la maintenance dans les systèmes événementiels.

Utilisation de modèles JavaScript avancés

Voici quelques conseils généraux pour utiliser efficacement les modèles JavaScript avancés :

• Tenez compte des implications sur les performances: les modèles avancés peuvent introduire une complexité supplémentaire, ce qui peut avoir un impact sur les performances. Tenez compte des répercussions sur les performances et optimiser si nécessaire.
• Évitez les anti-modèles: comprenez bien les modèles et évitez de tomber dans les anti-modèles ou de les utiliser à mauvais escient. Utilisez des modèles là où ils ont du sens et s'alignent sur les exigences de votre application.
• Suivez les conventions de codage: suivez systématiquement les conventions de codage pour maintenir la lisibilité et la cohérence de votre base de code. Utilisez des noms de variables et de fonctions significatifs et fournissez une documentation claire pour vos modèles.

Soyez prudent lorsque vous appliquez ces modèles

Le modèle de module permet l'encapsulation et favorise la confidentialité des données, l'organisation du code et la création de modules autonomes.

D'autre part, le modèle Observateur facilite la communication entre les composants en établissant une relation sujet-abonné.

Vous devez être conscient des pièges potentiels et des erreurs courantes lors de la mise en œuvre de modèles JavaScript avancés. Évitez de surutiliser des modèles là où des solutions plus simples existent ou de créer un code trop complexe. Révisez et refactorisez régulièrement votre code pour vous assurer qu'il reste maintenable.