Sobes.tech
Middle

MVP архитектуралык үлгүсү эмне?

sobes.tech AI

AIден жооп

MVP (Модель-Көрүнүш-Презентер) — бул бизнес-логика, маалымат жана колдонуучу интерфейсин бөлүү үчүн архитектуралык үлгү:

Негизги компоненттер:

  • Модель: Маалыматтарды жана бизнес-логиканы көрсөтөт. View же Presenter жөнүндө билими жок:
  • Көрүнүш: Маалыматты көрсөтөт, колдонуучу интерфейсин камсыз кылат жана колдонуучунун аракеттерин Presenterге багыттайт. Бизнес-логика камтыбайт. Көрүнүш пассивдүү жана алынган маалыматтарды гана көрсөтөт:
  • Презентер: Модель менен Көрүнүш ортосундагы делдал болуп иштейт. Колдонуучунун иш-аракеттерин иштетет, Моделден маалымат алат жана Көрүнүштү жаңыланат. Презентер көрсөтүүнүн логикасын камтыйт, бирок бизнес-логиканы эмес. Ал Көрүнүштин абалын башкарат:

Өз ара аракеттенүү:

  1. Колдонуучу Көрүнүш менен иштешет:
  2. Көрүнүш аракетти Презентерге өткөрүп берет:
  3. Презентер аракетти иштетет:
    • Керек болсо Моделди жаңыланат:
    • Моделден маалымат сурайт:
    • Жаңы маалыматтар менен Көрүнүштү жаңыланат:

Артыкчылыктары:

  • Жакшыртылган тестирлөө мүмкүнчүлүгү (Презентер жана Модель Көрүнүштөн көз каранды эмес тестирлене алат):
  • Жоопкерчиликти бөлүштүрүү:
  • Жакшыртылган тейлөө:

Мисал (схематикалык):

// Модель
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);