Τι είναι το αρχιτεκτονικό μοτίβο MVP;

Το MVP (Model-View-Presenter) είναι ένα αρχιτεκτονικό μοτίβο για τον διαχωρισμό της επιχειρηματικής λογικής, των δεδομένων και του περιβάλλοντος χρήστη.

Βασικά συστατικά:

• Model: Αντιπροσωπεύει δεδομένα και επιχειρηματική λογική. Δεν έχει γνώση του View ή του Presenter.
• View: Εμφανίζει δεδομένα, παρέχει το περιβάλλον χρήστη και ανακατευθύνει τις ενέργειες του χρήστη στον Presenter. Δεν περιέχει επιχειρηματική λογική. Το View είναι παθητικό και εμφανίζει μόνο τα δεδομένα που λαμβάνει από τον Presenter.
• Presenter: Δρα ως μεσολαβητής μεταξύ Model και View. Επεξεργάζεται τα γεγονότα του περιβάλλοντος χρήστη, αντλεί δεδομένα από το Model και ενημερώνει το View. Ο Presenter περιέχει τη λογική παρουσίασης, αλλά όχι την επιχειρηματική λογική. Διαχειρίζεται την κατάσταση του View.

Αλληλεπίδραση:

1. Ο χρήστης αλληλεπιδρά με το View.
2. Το View αναθέτει την ενέργεια στον Presenter.
3. Ο Presenter επεξεργάζεται την ενέργεια:
   • Ενημερώνει το Model αν χρειάζεται.
   • Ζητά δεδομένα από το Model.
   • Ενημερώνει το View με τα νέα δεδομένα.

Πλεονεκτήματα:

• Βελτιωμένη δοκιμαστικότητα (ο Presenter και το Model μπορούν να δοκιμαστούν ανεξάρτητα από το View).
• Διαχωρισμός ευθυνών.
• Καλύτερη συντηρησιμότητα.

Παράδειγμα (σχηματικά):

// Μοντέλο
class DataModel {
    getData() {
        // ... λογική λήψη δεδομένων ...
        return { message: "Γειά από το μοντέλο!" };
    }
}

// Προβολή (ψευδοκώδικας UI)
class TextView {
    display(data) {
        // Ενημέρωση κειμένου στην οθόνη
        console.log(data.message);
    }

    onClickButton(handler) {
        // Συνδέστε τον χειριστή στο κουμπί
    }
}

// Παρουσιαστής
class Presenter {
    constructor(model, view) {
        this.model = model;
        this.view = view;
        this.view.onClickButton(this.handleButtonClick.bind(this)); // Σύνδεση γεγονότος
    }

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

// Χρήση
const model = new DataModel();
const view = new TextView(); // Πραγματική UI προβολή
const presenter = new Presenter(model, view);