Ի՞նչ է MVC ճարտարապետական դիզայնը։

MVC (Մոդել-Դիտարկում-Կառավարիչ) — դա ճարտարապետական դիզայն է, որը բաժանում է հավելվածը երեք փոխկապակցված մասերի՝ բարելավելու համար կոդի կազմակերպությունը և հեշտացնելու զարգացման և սպասարկման գործընթացը:

• Մոդել (Model): ներկայացնում է տվյալները և բիզնես-լոգիկան: պատասխանատու է տվյալների ստացման, պահպանում և մշակման համար, ինչպես նաև տվյալների կառավարման կանոնների համար: չունի ուղիղ կապ օգտագործողի ինտերֆեյսի հետ:
• Դիտարկում (View): պատասխանատու է տվյալների ցուցադրման համար օգտվողին: ստանում է տվյալները Մոդելից և վիզուալացնում է դրանք: չունի բիզնես-լոգիկա և չի փոխկապակցվում տվյալների հետ ուղիղ, բացի դրանց ցուցադրման համար:
• Կառավարիչ (Controller): հանդես է որպես միջնորդ Մոդելի և Դիտարկման միջև: մշակվում է օգտվողի փոխազդեցությունները (օրինակ՝ սեղմումներ, տվյալների մուտք), ստանում է տվյալները Մոդելից, փոխանցում է դրանք Դիտարկմանը ցուցադրման համար և թարմացնում է Մոդելն օգտվողի փոփոխությունների դեպքում:

Հիմնական փոխկապակցվածությունները:

• Օգտվողը փոխազդում է Դիտարկման հետ:
• Դիտարկումը փոխանցում է օգտվողի գործողությունները Կառավարիչին:
• Կառավարիչը մշակվում է օգտվողի գործողությունները՝ փոխազդելով Մոդելի հետ (ստանում կամ թարմացնում է տվյալները):
• Մոդելը տեղեկացնում է Կառավարիչին (կամ ուղիղ Դիտարկմանը, որոշ տարբերակներում) տվյալների փոփոխությունների մասին:
• Կառավարիչը թարմացնում է Դիտարկումը՝ հիմնվելով Մոդելի փոփոխությունների վրա (կամ Դիտարկումը ինքնուրույն թարմացվում է ուղիղ Մոդելի հետ փոխազդեցության ժամանակ):

Առավելությունները:

• Պատասխանատվության բաժանում (Separation of Concerns): հեշտացնում է բաղադրիչների զարգացումը, թեստավորումը և սպասարկումը:
• Կոդի կրկնակի օգտագործում: Մոդելը և Կառավարիչը կարող են օգտագործվել տարբեր Դիտարկումների հետ:
• Թեստավորման հեշտացում: բաղադրիչները կարող են անկախ թեստավորվել:
• Համատեղ զարգացում: տարբեր թիմեր կարող են աշխատել տարբեր մասերի վրա՝ Մոդել, Դիտարկում, Կառավարիչ՝ միաժամանակ:

Թերությունները:

• Բարդության աճ: փոքր հավելվածների համար կարող է լինել ավելորդ:
• "Մեծ Կառավարիչ" խնդիր: Կառավարիչը կարող է շատ մեծ և բարդ դառնալ, եթե չպահպանվեն բաժանման սկզբունքները:
• Սահմանների որոշման դժվարություն: երբեմն դժվար է հստակ սահմանել, որտեղ ավարտվում է մեկ բաղադրիչը և սկսվում մյուսը:

Նմուշ (սիմվոլիկ):

// Մոդել (օրինակ՝ տվյալների հետ աշխատելու դաս)
class UserModel {
  constructor() {
    this.users = [{
      id: 1,
      name: 'Alice'
    }, {
      id: 2,
      name: 'Bob'
    }];
  }

  getUsers() {
    return this.users;
  }

  addUser(user) {
    this.users.push(user);
    // Տեղեկացնել փոփոխության մասին (իրական հավելվածում՝ միջոցառումների միջոցով)
  }
}

// Դիտարկում (օրինակ՝ ցուցակների արտապատկերման ֆունկցիա)
function renderUserList(users) {
  const list = document.getElementById('user-list');
  list.innerHTML = users.map(user => `<li>${user.name}</li>`).join('');
}

// Կառավարիչ (մշակման և համակարգեցման համար)
class UserController {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    // Դիտարկման սկզբնական թարմացում
    this.updateView();

    // Իրադարձությունների մշակող (օրինակ՝ կոճակի սեղմում)
    document.getElementById('add-user-button').addEventListener('click', () => {
      const newUser = {
        id: this.model.getUsers().length + 1,
        name: prompt('Enter user name:')
      };
      if (newUser.name) {
        this.model.addUser(newUser);
        this.updateView(); // Դիտարկման թարմացում
      }
    });
  }

  updateView() {
    const users = this.model.getUsers();
    this.view(users);
  }
}

// Օգտագործում
const model = new UserModel();
const controller = new UserController(model, renderUserList);

Սա պարզեցված օրինակ է, որը ցույց է տալիս հիմնական սկզբունքը: Իրական ֆրեյմվորկներում (օրինակ՝ Angular, React, Vue) օգտագործվում են ավելի առաջադեմ տարբերակներ այս և այլ ճարտարապետական դիզայնների։