Le développement Web moderne utilise de plus en plus JavaScript. Des modèles de conception efficaces sont d’autant plus nécessaires que la complexité des applications en ligne augmente. Dans cet article, nous examinerons quelques-uns des modèles de conception JavaScript les plus appréciés et comment ES6 peut les utiliser.
Modèle de singleton
Pour s’assurer qu’une seule instance d’une classe est créée tout au long du programme, le modèle de conception Singleton est utilisé. Lorsque nous voulons restreindre le nombre d’instances d’une classe ou d’un objet, telles que les connexions à la base de données, les services de journalisation ou les objets de configuration, nous pouvons utiliser ce modèle. Le modèle Singleton peut être implémenté dans ES6 en utilisant une classe, comme indiqué ci-dessous :
class Singleton {
constructor() {
if (!Singleton.instance) {
Singleton.instance = this;
}
return Singleton.instance;
}
}
Avec cette implémentation, une seule instance de la classe est créée et accessible de partout dans le programme.
Modèle d’observateur
Un ou plusieurs objets peuvent être informés d’un changement d’état dans un autre objet à l’aide du modèle d’observateur, qui est un modèle de conception. Lorsque nous souhaitons surveiller les changements dans un certain élément ou groupe d’objets, ce modèle est pratique. L’objet Proxy intégré dans ES6 peut être utilisé pour implémenter le modèle Observer des manières suivantes :
let target = {
value: 0
};
let observer1 = {
update: function() {
console.log(`Observer 1: ${target.value}`);
}
};
let observer2 = {
update: function() {
console.log(`Observer 2: ${target.value}`);
}
};
target = new Proxy(target, {
set: function(target, key, value) {
target[key] = value;
observer1.update();
observer2.update();
return true;
}
});
target.value = 1; // Output: Observer 1: 1, Observer 2: 1
Avec cette implémentation, un objet proxy est créé, qui garde une trace des modifications apportées à l’objet cible et alerte les objets observateurs chaque fois qu’une modification a lieu.
Modèle d’usine
Un objet peut être construit en utilisant le modèle Factory sans avoir à définir sa classe spécifique, selon la théorie de la conception. Lorsque nous souhaitons créer une gamme d’articles aux caractéristiques comparables, cette conception est pratique. Les classes et l’héritage peuvent être utilisés pour créer le modèle Factory dans ES6 comme suit :
class Animal {
constructor(name, type) {
this.name = name;
this.type = type;
}
speak() {
console.log(`${this.name} speaks.`);
}
}
class Dog extends Animal {
constructor(name) {
super(name, 'dog');
}
speak() {
console.log(`${this.name} barks.`);
}
}
class Cat extends Animal {
constructor(name) {
super(name, 'cat');
}
speak() {
console.log(`${this.name} meows.`);
}
}
class AnimalFactory {
static createAnimal(name, type) {
if (type === 'dog') {
return new Dog(name);
} else if (type === 'cat') {
return new Cat(name);
}
}
}
let dog = AnimalFactory.createAnimal('Rex', 'dog');
let cat = AnimalFactory.createAnimal('Fluffy', 'cat');
dog.speak(); // Output: Rex barks.
cat.speak(); // Output: Fluffy meows.
Dog et Cat sont deux classes issues de Animal et créées par cette implémentation. Sur la base du paramètre de type, la classe AnimalFactory crée des objets de types Dog et Cat.
Modèle de module
Un modèle de conception appelé modèle de module est utilisé pour encapsuler le code et se prémunir contre la pollution de portée globale.
Cette technique est utile si vous souhaitez établir des variables et des méthodes privées ou si vous disposez d’une énorme base de code et souhaitez éviter les conflits de nommage. Les instructions d’importation et d’exportation peuvent être utilisées pour implémenter le modèle de module dans ES6 comme suit :
// module.js
const privateVariable = "I am a private variable";
function privateMethod() {
console.log("I am a private method");
}
export function publicMethod() {
console.log("I am a public method");
}
export const publicVariable = "I am a public variable";
// app.js
import { publicMethod, publicVariable } from './module.js';
publicMethod(); // Output: I am a public method
console.log(publicVariable); // Output: I am a public variable
En utilisant l’instruction d’importation, cette approche produit un module avec des variables et des fonctions privées et publiques qui peuvent être utilisées par d’autres modules.
Patron Décorateur
Un modèle de conception appelé modèle Décorateur est utilisé pour ajouter dynamiquement des fonctionnalités à un objet. Ce modèle est pratique lorsque nous souhaitons ajouter ou modifier le comportement d’un objet sans altérer sa structure. En utilisant les instructions de classe et d’extension dans ES6, le modèle Décorateur peut être implémenté comme suit :
class Coffee {
getCost() {
return 1;
}
getDescription() {
return "Coffee";
}
}
class CoffeeWithMilk extends Coffee {
constructor(coffee) {
super();
this.coffee = coffee;
}
getCost() {
return this.coffee.getCost() + 0.5;
}
getDescription() {
return this.coffee.getDescription() + ", Milk";
}
}
let coffee = new Coffee();
coffee = new CoffeeWithMilk(coffee);
console.log(coffee.getCost()); // Output: 1.5
console.log(coffee.getDescription()); // Output: Coffee, Milk
Une classe Coffee et une classe CoffeeWithMilk, qui étend la classe Coffee, sont créées par cette implémentation. La classe CoffeeWithMilk ajoute dynamiquement des fonctionnalités à l’objet Coffee sans modifier sa structure.
Conclusion
L’utilisation de modèles de conception JavaScript est cruciale pour le développement Web contemporain. Ils nous permettent de produire un code fort, évolutif, facilement compréhensible et modifiable. Dans cet article, nous avons examiné certains des modèles de conception JavaScript les plus appréciés et leur compatibilité avec ES6. Vous pouvez créer des applications plus efficaces et plus fiables, ainsi que plus simples à entretenir et à mettre à jour au fil du temps en utilisant ces modèles.