Ի՞նչ է MVP ճարտարապետական ձևանմուշը։

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);