MVP arxitektura naqshasi nima?

MVP (Model-View-Presenter) — bu biznes logikasini, ma'lumotlarni va foydalanuvchi interfeysini ajratish uchun arxitektura naqshidir.

Asosiy komponentlar:

• Model: Ma'lumotlar va biznes logikasini ifodalaydi. View yoki Presenter haqida ma'lumotga ega emas.
• View: Ma'lumotlarni ko'rsatadi, foydalanuvchi interfeysini ta'minlaydi va foydalanuvchi harakatlarini Presenterga yo'naltiradi. Biznes logikasini o'z ichiga olmaydi. View passiv bo'lib, faqat Presenterdan olingan ma'lumotlarni ko'rsatadi.
• Presenter: Model va View o'rtasida vositachi sifatida harakat qiladi. Foydalanuvchi interfeysining voqealarini ishlaydi, Modeldan ma'lumot oladi va Viewni yangilaydi. Presenter taqdimot logikasini o'z ichiga oladi, lekin biznes logikasini emas. View holatini boshqaradi.

Interaksiya:

1. Foydalanuvchi View bilan harakat qiladi.
2. View harakatni Presenterga topshiradi.
3. Presenter harakatni ishlaydi:
   • Zarur bo'lsa, Modelni yangilaydi.
   • Modeldan ma'lumot so'raydi.
   • Yangi ma'lumotlar bilan Viewni yangilaydi.

Afzalliklar:

• Test qilish imkoniyatining yaxshilanishi (Presenter va Model Viewdan mustaqil ravishda test qilinishi mumkin).
• Mas'uliyatlarning ajralishi.
• Yaxshiroq texnik xizmat ko'rsatish.

Misol (sxema):

// Model
class DataModel {
    getData() {
        // ... ma'lumotlarni olish logikasi ...
        return { message: "Modeldan salom!" };
    }
}

// Ko'rinish (psevdo-UI kod)
class TextView {
    display(data) {
        // Matnni ekranda yangilash
        console.log(data.message);
    }

    onClickButton(handler) {
        // Tugmaga handler qo'shish
    }
}

// Presenter
class Presenter {
    constructor(model, view) {
        this.model = model;
        this.view = view;
        this.view.onClickButton(this.handleButtonClick.bind(this)); // Voqeani bog'lash
    }

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

// Foydalanish
const model = new DataModel();
const view = new TextView(); // Haqiqiy UI ko'rinishi
const presenter = new Presenter(model, view);