Exploiter la programmation fonctionnelle avec JavaScript

Les modèles de conception sont des solutions établies aux défis fréquents de la conception de logiciels. En les utilisant, les développeurs peuvent améliorer la lisibilité, l'évolutivité et la maintenabilité du code. Cet article explore comment TypeScript, un sur-ensemble de JavaScript de plus en plus populaire, améliore ces modèles grâce à sa sécurité de type et à ses fonctionnalités modernes. Que vous développiez une application à grande échelle ou un projet parallèle, la maîtrise des modèles de conception dans TypeScript renforcera vos compétences en développement.

Que sont les modèles de conception ?

Les modèles de conception sont des solutions génériques réutilisables aux défis courants de la conception de logiciels. Il ne s’agit pas de véritables codes mais plutôt de modèles permettant de résoudre ces problèmes. Issus du livre « Gang of Four » (GoF), ces modèles se répartissent en trois catégories principales :

1. Modèles de création : Concernés par les mécanismes de création d'objets.
2. Modèles structurels : Mettez l'accent sur la composition et l'organisation des objets.
3. Modèles comportementaux : Concentrez-vous sur les interactions et la communication entre les objets.

Pourquoi utiliser des modèles de conception dans TypeScript ?

Les fonctionnalités de TypeScript rendent la mise en œuvre de modèles de conception plus robustes :

1. Typage statique : Les erreurs sont détectées au moment de la compilation, ce qui réduit les bugs d'exécution.
2. Interfaces et génériques :Permettent des implémentations plus précises et flexibles.
3. Types Enum et Union : Simplifiez certains modèles, tels que la gestion de l'état.
4. Outils améliorés :Avec la prise en charge de l'IDE, TypeScript augmente la productivité.

Quelques modèles de conception clés dans TypeScript

1. Modèle singleton

Garantit qu'une classe n'a qu'une seule instance et fournit un point d'accès global à celle-ci.

Implémentation en TypeScript :

class Singleton {
  private static instance: Singleton;

  private constructor() {} // Prevent instantiation

  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

Cas d'utilisation : Gestion des paramètres de configuration ou des connexions à la base de données.

2. Modèle d'usine

Fournit une interface pour créer des objets sans spécifier leurs classes exactes.

Mise en œuvre :

interface Button {
  render(): void;
}

class WindowsButton implements Button {
  render() {
    console.log("Rendering Windows button");
  }
}

class MacButton implements Button {
  render() {
    console.log("Rendering Mac button");
  }
}

class ButtonFactory {
  static createButton(os: string): Button {
    if (os === "Windows") return new WindowsButton();
    if (os === "Mac") return new MacButton();
    throw new Error("Unknown OS");
  }
}

const button = ButtonFactory.createButton("Mac");
button.render(); // Output: Rendering Mac button

Cas d'utilisation : Frameworks d'interface utilisateur pour les applications multiplateformes.

3. Modèle d'observateur

Définit une relation un-à-plusieurs, où les modifications apportées à un objet sont notifiées à toutes ses personnes à charge.

Mise en œuvre :

class Subject {
  private observers: Array<() => void> = [];

  addObserver(observer: () => void) {
    this.observers.push(observer);
  }

  notifyObservers() {
    this.observers.forEach(observer => observer());
  }
}

const subject = new Subject();
subject.addObserver(() => console.log("Observer 1 notified!"));
subject.addObserver(() => console.log("Observer 2 notified!"));
subject.notifyObservers();

Cas d'utilisation : Réactivité dans les frameworks front-end comme Angular ou React.

4. Modèle de stratégie

Définit une famille d'algorithmes, encapsule chacun et les rend interchangeables.

Mise en œuvre :

interface PaymentStrategy {
  pay(amount: number): void;
}

class CreditCardPayment implements PaymentStrategy {
  pay(amount: number) {
    console.log(`Paid ${amount} using Credit Card`);
  }
}

class PayPalPayment implements PaymentStrategy {
  pay(amount: number) {
    console.log(`Paid ${amount} using PayPal`);
  }
}

class PaymentContext {
  constructor(private strategy: PaymentStrategy) {}

  executePayment(amount: number) {
    this.strategy.pay(amount);
  }
}

const payment = new PaymentContext(new PayPalPayment());
payment.executePayment(100); // Paid 100 using PayPal

Cas d'utilisation : Systèmes de paiement dans les plateformes de commerce électronique.

5. Modèle de décorateur

Ajoute dynamiquement une nouvelle fonctionnalité à un objet.

Mise en œuvre :

class Singleton {
  private static instance: Singleton;

  private constructor() {} // Prevent instantiation

  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

Cas d'utilisation : Ajout de fonctionnalités à un produit dans un panier.

Tableau des modèles de conception

Pattern	Category	Use Case	Benefit
Singleton	Creational	Managing global state like configurations	Guarantees single instance
Factory	Creational	UI components or APIs	Decouples creation logic
Observer	Behavioral	Event systems in frameworks	Simplifies communication
Strategy	Behavioral	Algorithm selection in runtime	Enhances flexibility
Decorator	Structural	Extending class functionality	Adds dynamic capabilities

Modèle

Catégorie

Cas d'utilisation

Avantage
ête> Célibataire Création Gérer l'état global comme les configurations Garantit une instance unique Usine Création Composants d'interface utilisateur ou API Dissocie la logique de création Observateur Comportemental Systèmes d'événements dans les frameworks Simplifie la communication Stratégie Comportemental Sélection d'algorithme en runtime Améliore la flexibilité Décorateur Structurel Extension des fonctionnalités de classe Ajoute des fonctionnalités dynamiques Meilleures pratiques pour la mise en œuvre de modèles de conception
1. Comprenez le problème :
Ne compliquez pas les choses avec des schémas inutiles. 2. Combiner des modèles : Pensez à utiliser des combinaisons telles que Singleton avec Factory.

3. Tirez parti des fonctionnalités de TypeScript :

Utilisez des interfaces, des génériques et des énumérations pour faciliter la mise en œuvre.
• 4. Écrire des tests : Assurez-vous que les modèles fonctionnent comme prévu. Ressources supplémentaires
• হাতে কলমে জাভাস্ক্রিপ্ট par Junayed Ahmed

Refactoring to Patterns

---

par

Joshua Kerievsky

---

On se retrouve dans le prochain article, mon garçon ! ?

Mon site personnel : https://shafayet.zya.me

Un peu venteux, n'est-ce pas bruv ???

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!