Mi az MVP architektúrális minta?

Az MVP (Model-View-Presenter) egy architektúrális minta, amely a üzleti logika, adatok és felhasználói felület szétválasztására szolgál.

Fő komponensek:

• Model: Az adatok és az üzleti logika reprezentációja. Nem rendelkezik ismeretekkel a View vagy a Presenter felől.
• View: Megjeleníti az adatokat, biztosítja a felhasználói felületet, és átirányítja a felhasználói műveleteket a Presenternak. Nem tartalmaz üzleti logikát. Passzív, és csak a Presenter által kapott adatokat mutatja.
• Presenter: Közvetítőként működik a Model és a View között. Kezeli a felhasználói felület eseményeit, lekéri az adatokat a Modelből, és frissíti a View-t. Tartalmazza a megjelenítési logikát, de nem az üzleti logikát. Kezeli a View állapotát.

Interakció:

1. A felhasználó interakcióba lép a View-val.
2. A View átadja az eseményt a Presenternek.
3. A Presenter feldolgozza az eseményt:
   • Frissíti a Modelt, ha szükséges.
   • Lekéri az adatokat a Modelből.
   • Frissíti a View-t az új adatokkal.

Előnyök:

• Javított tesztelhetőség (a Presenter és a Model függetlenül tesztelhető a View-tól).
• Felelősségek szétválasztása.
• Jobb karbantarthatóság.

Példa (séma):

// Modell
class DataModel {
    getData() {
        // ... adatok lekérésének logikája ...
        return { message: "Helló a modellből!" };
    }
}

// Nézet (pszeudó UI kód)
class TextView {
    display(data) {
        // Szöveg frissítése a képernyőn
        console.log(data.message);
    }

    onClickButton(handler) {
        // Handler csatolása a gombhoz
    }
}

// Presenter
class Presenter {
    constructor(model, view) {
        this.model = model;
        this.view = view;
        this.view.onClickButton(this.handleButtonClick.bind(this)); // Esemény kötés
    }

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

// Használat
const model = new DataModel();
const view = new TextView(); // Valós UI megjelenés
const presenter = new Presenter(model, view);