Parlez-moi de la conception de modèles que vous avez…

J'ai utilisé les modèles de conception suivants:

MVC (Modèle-Vue-Contrôleur): Séparation de la logique de l'application. Le modèle gère les données, la vue est responsable de l'affichage, et le contrôleur traite l'interaction de l'utilisateur et met à jour le modèle ou la vue. Je l'ai appliqué dans Angular, où les composants implémentent partiellement cette idéologie.

MVVM (Modèle-Vue-ViewModel): Semblable à MVC, mais introduit le ViewModel comme intermédiaire entre la Vue et le Modèle. Le ViewModel contient la logique métier pour afficher les données et gérer les actions de l'utilisateur. Je l'ai utilisé activement avec React et Vuex (Vue), où l'état de l'application est géré de manière centralisée.

// Exemple de réactivité en React avec useState
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // useState fait partie du mécanisme MVVM

  const increment = () => {
    setCount(count + 1); // Mise à jour de l'état via le setter
  };

  return (
    <div>
      <p>Count: {count}</p> {/* Affichage de l'état */}
      <button onClick={increment}>Increment</button> {/* Action affectant l'état */}
    </div>
  );
}

Patron de composant: Diviser l'interface utilisateur en composants indépendants et réutilisables. Chaque composant encapsule sa logique, son balisage et ses styles. Il est à la base des frameworks modernes comme React, Vue et Angular.
```
// Exemple d'un composant React simple
function Button(props) {
  return (
    <button className="my-button" onClick={props.onClick}>
      {props.label}
    </button>
  );
}
```

Adaptateur (Adapter): Transforme l'interface d'une classe en une autre que les clients attendent. Permet à des classes avec des interfaces incompatibles de travailler ensemble. Je l'ai appliqué pour intégrer des bibliothèques ou API externes avec différentes signatures de méthodes.

// Exemple d'adaptateur pour travailler avec différents clients API
class OldApi {
  getDataOld(id) {
    console.log(`Obtention des données de l'API ancienne pour id ${id}`);
    return { id: id, name: `Item ${id}` };
  }
}

class NewApi {
  fetchDataNew(itemId) {
    console.log(`Récupération des données de la nouvelle API pour l'id de l'élément ${itemId}`);
    return { itemId: itemId, label: `Produit ${itemId}` };
  }
}

class ApiAdapter {
  constructor(apiClient) {
    this.apiClient = apiClient;
  }

  getData(id) {
    if (this.apiClient instanceof OldApi) {
      return this.apiClient.getDataOld(id);
    } else if (this.apiClient instanceof NewApi) {
      // Transformation des données du nouveau format
      const newData = this.apiClient.fetchDataNew(id);
      return { id: newData.itemId, name: newData.label };
    }
    throw new Error("Client API non supporté");
  }
}

const oldApiAdapter = new ApiAdapter(new OldApi());
console.log(oldApiAdapter.getData(1));

const newApiAdapter = new ApiAdapter(new NewApi());
console.log(newApiAdapter.getData(2));

Itérateur (Iterator): Fournit un moyen d'accéder séquentiellement aux éléments d'un objet composé sans révéler sa représentation interne. Utilisé dans les boucles (for...of) et les méthodes de tableaux (forEach, map, filter).

// Exemple d'utilisation d'un itérateur en JavaScript
const numbers = [1, 2, 3, 4, 5];

// Obtention explicite de l'itérateur
const iterator = numbers[Symbol.iterator]();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
// ...
console.log(iterator.next()); // { value: undefined, done: true }

// Utilisation de l'itérateur dans for...of
for (const number of numbers) {
  console.log(number);
}

Décorateur (Decorator): Ajoute dynamiquement de nouvelles responsabilités à un objet, permettant d'étendre ses fonctionnalités sans modifier sa structure. Je l'ai utilisé sous forme de HOC (Composants de Haut Niveau) en React ou de décorateurs en Angular/TypeScript.

// Exemple de HOC en React
function withLogging(WrappedComponent) {
  return function WithLogging(props) {
    console.log(`Composant ${WrappedComponent.name} rendu avec props:`, props);
    return <WrappedComponent {...props} />;
  };
}

// Utilisation du HOC
const EnhancedButton = withLogging(Button);

// Utilisation du composant amélioré
// <EnhancedButton label="Cliquez-moi" onClick={() => console.log('Cliqué!')} />

Singleton (Singleton): Garantit qu'une classe n'a qu'une seule instance et fournit un point d'accès global à celle-ci. Je l'ai appliqué pour gérer l'état global de l'application ou pour créer une instance unique d'un service (par exemple, service de journalisation, configuration).

// Exemple du patron Singleton
class ConfigManager {
  constructor() {
    if (ConfigManager.instance) {
      return ConfigManager.instance;
    }
    this.settings = {}; // Initialisation des paramètres
    ConfigManager.instance = this;
  }

  setSetting(key, value) {
    this.settings[key] = value;
  }

  getSetting(key) {
    return this.settings[key];
  }
}

const config1 = new ConfigManager();
const config2 = new ConfigManager();

console.log(config1 === config2); // true (même instance)

config1.setSetting('apiUrl', 'https://api.exemple.com');
console.log(config2.getSetting('apiUrl')); // https://api.exemple.com

Méthode de fabrique (Factory Method): Définit une interface pour créer un objet, mais laisse aux sous-classes le soin de décider quelle classe instancier. Je l'ai utilisé pour créer différents types d'éléments d'interface utilisateur ou d'objets basés sur la configuration.
Stratégie (Strategy): Définit une famille d'algorithmes, en encapsule chacun et les rend interchangeables. Permet à l'algorithme de varier indépendamment des clients qui l'utilisent. Je l'ai utilisé pour implémenter différentes approches pour trier des données, valider des formulaires ou gérer des événements.

L'utilisation de ces modèles a permis de créer un code plus structuré, modulaire, testable et maintenable.

Parlez-moi de la conception de modèles que vous avez utilisée dans votre développement.