Was ist das MVP-Architekturmuster?

MVP (Model-View-Presenter) ist ein Architektur-Muster zur Trennung von Geschäftslogik, Daten und Benutzeroberfläche.

Schlüss Komponente:

• Model: Repräsentiert Daten und Geschäftslogik. Hat kein Wissen über View oder Presenter.
• View: Zeigt Daten an, stellt die Benutzeroberfläche bereit und leitet Benutzeraktionen an den Presenter weiter. Enthält keine Geschäftslogik. Die View ist passiv und zeigt nur die vom Presenter empfangenen Daten.
• Presenter: Agiert als Vermittler zwischen Model und View. Verarbeitet Ereignisse der Benutzeroberfläche, extrahiert Daten aus dem Model und aktualisiert die View. Der Presenter enthält die Präsentationslogik, aber keine Geschäftslogik. Verwaltert den Zustand der View.

Interaktion:

1. Der Benutzer interagiert mit der View.
2. Die View delegiert die Aktion an den Presenter.
3. Der Presenter verarbeitet die Aktion:
   • Aktualisiert das Model, falls erforderlich.
   • Fordert Daten vom Model an.
   • Aktualisiert die View mit den neuen Daten.

Vorteile:

• Verbesserte Testbarkeit (der Presenter und das Model können unabhängig von der View getestet werden).
• Verantwortlichkeitsaufteilung.
• Verbesserte Wartbarkeit.

Beispiel (schematisch):

// Modell
class DataModel {
    getData() {
        // ... Logik zum Datenabruf ...
        return { message: "Hallo vom Modell!" };
    }
}

// Ansicht (Pseudocode UI)
class TextView {
    display(data) {
        // Text auf dem Bildschirm aktualisieren
        console.log(data.message);
    }

    onClickButton(handler) {
        // Handler an Button anhängen
    }
}

// Presenter
class Presenter {
    constructor(model, view) {
        this.model = model;
        this.view = view;
        this.view.onClickButton(this.handleButtonClick.bind(this)); // Ereignisbindung
    }

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

// Verwendung
const model = new DataModel();
const view = new TextView(); // Reale UI-Ansicht
const presenter = new Presenter(model, view);