Sobes.tech
Middle

Модели архитектурии MVP чист?

sobes.tech AI

Ҷавоб аз AI

МVP (Модел-Вижн-Представител) — архитектурии намуна барои ҷудо кардани логикаи бизнес, маълумот ва интерфейси корбар.

Компонентҳои асосӣ:

  • Модел: Намояндагии маълумот ва логикаи бизнес. Дар бораи View ё Presenter маълумот надорад.
  • Вижн: Маълумотҳоро намоиш медиҳад, интерфейси корбарро таъмин мекунад ва амалҳои корбарро ба Presenter равона мекунад. Логикаи бизнесро дар бар намегирад. Вижн бетараф аст ва танҳо маълумотҳоро, ки аз Presenter гирифтааст, нишон медиҳад.
  • Presenter: Вай ҳамчун миёнарав байни Model ва View амал мекунад. Воқеаҳоро дар интерфейси корбар коркард мекунад, маълумотро аз Model мегирад ва View-ро навсозӣ мекунад. Логикаи намоишро дорад, аммо логикаи бизнесро надорад. Ҳолати 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);