Modèles de conception en JavaScript avec exemples : de A à Z

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

Modèles de conception en JavaScript avec exemples : de A à Z

Les modèles de conception (design patterns) sont des solutions éprouvées aux problèmes typiques rencontrés lors du développement de logiciels. En JavaScript, en particulier dans l'environnement Node.js, la compréhension de ces patrons aide à écrire un code plus propre, modulaire et évolutif. Dans cet article, nous allons passer en revue les principales catégories de modèles avec des exemples concrets.

1. Patrons de création (Creational Patterns)

Ces patrons gèrent le processus de création d'objets, rendant le système indépendant de la manière dont ils sont instanciés.

1.1. Singleton

Garantit qu'une classe n'a qu'une seule instance et fournit un point d'accès global à celle-ci. Dans Node.js, les modules sont mis en cache par défaut, ce qui simplifie l'implémentation.

class DatabaseConnection {  constructor() {    if (DatabaseConnection.instance) {      return DatabaseConnection.instance;    }    this.connection = null;    DatabaseConnection.instance = this;  }

  connect() {    if (!this.connection) {      this.connection = { status: 'connected' };      console.log('Nouvelle connexion à la base de données');    }    return this.connection;  }}

const db1 = new DatabaseConnection();const db2 = new DatabaseConnection();console.log(db1 === db2); // true

1.2. Méthode de fabrique (Factory Method)

Définit une interface pour créer un objet, mais permet aux sous-classes de modifier le type d'objet créé. Idéal pour créer différents types de journaux.

class LoggerFactory {  createLogger(type) {    switch (type) {      case 'console':        return new ConsoleLogger();      case 'file':        return new FileLogger();      default:        throw new Error('Type de journal inconnu');    }  }}

class ConsoleLogger {  log(message) { console.log(message); }}

class FileLogger {  log(message) { console.log(`[Fichier] : ${message}`); }}

const factory = new LoggerFactory();const logger = factory.createLogger('console');logger.log('Message de test');

2. Patrons structurels (Structural Patterns)

Décrivent les moyens de combiner des classes et des objets pour créer des structures plus grandes.

2.1. Décorateur (Decorator)

Ajoute dynamiquement de nouvelles responsabilités à un objet. En JavaScript, les décorateurs sont souvent implémentés via des fonctions d'ordre supérieur ou des prototypes.

class Coffee {  cost() { return 10; }  description() { return 'Café'; }}

function withMilk(coffee) {  coffee.cost = () => coffee.cost() + 5;  coffee.description = () => coffee.description() + ', avec du lait';  return coffee;}

function withSugar(coffee) {  coffee.cost = () => coffee.cost() + 2;  coffee.description = () => coffee.description() + ', avec du sucre';  return coffee;}

let myCoffee = new Coffee();myCoffee = withMilk(myCoffee);myCoffee = withSugar(myCoffee);console.log(`${myCoffee.description()}: ${myCoffee.cost()} roubles.`); // Café, avec du lait, avec du sucre: 17 roubles.

2.2. Adaptateur (Adapter)

Convertit l'interface d'une classe en une autre interface attendue par le client. Particulièrement utile lors de l'intégration de bibliothèques tierces.

class OldAPI {  getUserData() {    return { name: 'Ivan', age: 25, email: 'ivan@example.com' };  }}

class NewAPI {  fetchUser() {    return { fullName: 'Ivan Petrov', yearsOld: 26, contact: 'ivan@example.com' };  }}

class UserAdapter {  constructor(api) {    this.api = api;  }

  getUserData() {    const data = this.api.fetchUser();    return {      name: data.fullName,      age: data.yearsOld,      email: data.contact    };  }}

const adapter = new UserAdapter(new NewAPI());console.log(adapter.getUserData()); // { name: 'Ivan Petrov', age: 26, email: 'ivan@example.com' }