Czym jest wzorzec architektoniczny MVP?

MVP (Model-View-Presenter) to wzorzec architektoniczny służący do oddzielenia logiki biznesowej, danych i interfejsu użytkownika.

Kluczowe komponenty:

• Model: Reprezentuje dane i logikę biznesową. Nie posiada wiedzy o View ani Presenter.
• View: Wyświetla dane, zapewnia interfejs użytkownika i przekierowuje działania użytkownika do Presenter. Nie zawiera logiki biznesowej. View jest pasywne i tylko wyświetla dane otrzymane od Presenter.
• Presenter: Działa jako pośrednik między Model a View. Obsługuje zdarzenia interfejsu użytkownika, pobiera dane z Model i aktualizuje View. Presenter zawiera logikę prezentacji, ale nie logikę biznesową. Zarządza stanem View.

Interakcja:

1. Użytkownik wchodzi w interakcję z View.
2. View deleguje akcję do Presenter.
3. Presenter obsługuje akcję:
   • Aktualizuje Model, jeśli to konieczne.
   • Pobiera dane z Model.
   • Aktualizuje View nowymi danymi.

Zalety:

• Lepsza testowalność (Presenter i Model mogą być testowane niezależnie od View).
• Podział odpowiedzialności.
• Lepsza utrzymanie.

Przykład (schemat):

// Model
class DataModel {
    getData() {
        // ... logika pobierania danych ...
        return { message: "Witaj z modelu!" };
    }
}

// Widok (pseudo-kod UI)
class TextView {
    display(data) {
        // Aktualizuj tekst na ekranie
        console.log(data.message);
    }

    onClickButton(handler) {
        // Podłącz obsługę do przycisku
    }
}

// Presenter
class Presenter {
    constructor(model, view) {
        this.model = model;
        this.view = view;
        this.view.onClickButton(this.handleButtonClick.bind(this)); // Wiązanie zdarzenia
    }

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

// Użycie
const model = new DataModel();
const view = new TextView(); // Rzeczywisty UI
const presenter = new Presenter(model, view);