Modèle de conception frontal : créez avec élégance des applications frontales maintenables (singleton, observer, modèle d'usine)

introduire

      Les modèles de conception front-end sont un ensemble de solutions largement acceptées aux problèmes fréquemment rencontrés dans le développement front-end. Cet article présentera des modèles de conception frontaux courants, tels que le mode singleton, le mode observateur et le mode usine, et discutera de leurs scénarios d'application pratiques dans le développement frontal pour vous aider à créer des applications frontales élégantes et maintenables.

Partie 1 : modèle de singleton

      Le modèle singleton est un modèle de conception simple qui garantit une seule instance d'une classe et fournit un point d'accès global. Dans le développement frontal, le modèle singleton est souvent utilisé pour gérer l'état, la configuration ou les données globales de l'application.

Exemple de mise en œuvre :

class AppConfig {
  constructor() {
    if (!AppConfig.instance) {
      this.apiUrl = "https://api.example.com";
      AppConfig.instance = this;
    }
    return AppConfig.instance;
  }
}

const appConfig1 = new AppConfig();
const appConfig2 = new AppConfig();

console.log(appConfig1 === appConfig2); // true
console.log(appConfig1.apiUrl); // "https://api.example.com"

Scénario d'application :

• Gérer la configuration globale de l'application, telle que l'adresse API, le titre du site Web, etc.
• Gérer l'état global de l'application, comme les informations de connexion de l'utilisateur, les thèmes, etc.

Partie II : Le modèle d'observateur

      Le modèle d'observateur est un modèle de conception comportemental qui définit une relation de dépendance un-à-plusieurs entre les objets. Lorsqu'un objet change d'état, ses objets dépendants sont notifiés et automatiquement mis à jour. Dans le développement frontal, le modèle d'observateur est souvent utilisé pour gérer l'abonnement et la publication d'événements.

Exemple de mise en œuvre :

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

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    this.observers = this.observers.filter((o) => o !== observer);
  }

  notify(data) {
    this.observers.forEach((observer) => observer.update(data));
  }
}

class Observer {
  update(data) {
    console.log("Received data:", data);
  }
}

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notify("Hello, observers!");

Scénario d'application :

• Écoutez les événements d'interaction de l'utilisateur, tels que les clics, le défilement, etc.
• Gère les notifications de rappel pour les opérations asynchrones.

Partie III : modèle d'usine

      Le modèle de fabrique est un modèle de conception créationnel qui crée des instances d'autres classes via une classe de fabrique, masquant ainsi la complexité de la création d'instances. Dans le développement front-end, le modèle d'usine est souvent utilisé pour créer différents types d'objets en fonction de différentes conditions.

Exemple de mise en œuvre :

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

  display() {
    console.log(`${this.name} - $${this.price}`);
  }
}

class ProductFactory {
  createProduct(type) {
    switch (type) {
      case "A":
        return new Product("Product A", 100);
      case "B":
        return new Product("Product B", 200);
      default:
        throw new Error("Invalid product type");
    }
  }
}

const factory = new ProductFactory();
const productA = factory.createProduct("A");
const productB = factory.createProduct("B");

productA.display(); // "Product A - $100"
productB.display(); // "Product B - $200"

Scénario d'application :

• Créez des objets complexes en masquant les détails de la création d'objets.
• Créez des objets dynamiquement en fonction de conditions.

épilogue

      Les modèles de conception front-end nous fournissent des solutions élégantes aux problèmes, nous permettant de créer des applications front-end maintenables et évolutives. Dans le développement réel, il est important de choisir un modèle de conception approprié en fonction de différents besoins et scénarios. En apprenant et en appliquant ces modèles de conception, nous pouvons mieux organiser le code, améliorer la lisibilité et la réutilisabilité du code, et ainsi rendre notre développement front-end plus efficace et élégant.

annexe

Bonnes ressources pour en savoir plus sur les modèles de conception front-end :

• Modèles de conception JavaScript et pratiques de développement (Zeng Tan)
• Apprentissage des modèles de conception JavaScript (Addy Osmani)

Je vous souhaite de progresser et de réussir dans l'apprentissage et la pratique des design patterns front-end !