Qu'est-ce que le modèle d'architecture MVP?

MVP (Modèle-Vue-Présentateur) est un patron architectural pour séparer la logique métier, les données et l'interface utilisateur.

Composants clés :

• Modèle : Représente les données et la logique métier. N'a pas connaissance de la Vue ou du Présentateur.
• Vue : Affiche les données, fournit l'interface utilisateur et redirige les actions de l'utilisateur vers le Présentateur. Ne contient pas de logique métier. La vue est passive et affiche uniquement les données reçues du Présentateur.
• Présentateur : Agit comme intermédiaire entre le Modèle et la Vue. Traite les événements de l'interface utilisateur, extrait les données du Modèle et met à jour la Vue. Le Présentateur contient la logique de présentation, mais pas la logique métier. Gère l'état de la Vue.

Interaction :

1. L'utilisateur interagit avec la Vue.
2. La Vue délègue l'action au Présentateur.
3. Le Présentateur traite l'action :
   • Met à jour le Modèle si nécessaire.
   • Demande des données au Modèle.
   • Met à jour la Vue avec les nouvelles données.

Avantages :

• Amélioration de la testabilité (le Présentateur et le Modèle peuvent être testés indépendamment de la Vue).
• Séparation des responsabilités.
• Meilleure maintenabilité.

Exemple (schéma) :

// Modèle
class DataModel {
    getData() {
        // ... logique pour obtenir des données ...
        return { message: "Bonjour depuis le modèle!" };
    }
}

// Vue (pseudo-code UI)
class TextView {
    display(data) {
        // Mettre à jour le texte à l'écran
        console.log(data.message);
    }

    onClickButton(handler) {
        // Attacher un gestionnaire au bouton
    }
}

// Présentateur
class Presenter {
    constructor(model, view) {
        this.model = model;
        this.view = view;
        this.view.onClickButton(this.handleButtonClick.bind(this)); // Liaison de l'événement
    }

    handleButtonClick() {
        const data = this.model.getData();
        this.view.display(data);
    }
}

// Utilisation
const model = new DataModel();
const view = new TextView(); // Vue réelle UI
const presenter = new Presenter(model, view);