Kas ir MVC arhitektūras modelis?

MVC (Modeļa-Skats-Kontrollieris) — tas ir arhitektūras paraugs, kas sadala lietotni trīs savstarpēji saistītās daļās, lai uzlabotu koda organizāciju un atvieglotu izstrādi un uzturēšanu:

• Modeļa (Modelis): attēlo datus un biznesa loģiku. atbild par datu iegūšanu, glabāšanu un apstrādi, kā arī par noteikumiem, kas kontrolē šos datus. tam nav tiešas saiknes ar lietotāja saskarni:
• Skats (View): atbild par datu attēlošanu lietotājam. saņem datus no Modeļa un vizualizē tos. tam nav biznesa loģikas un tas tieši nesadarbojas ar datiem, izņemot to attēlošanu:
• Kontrolieris (Controller): darbojas kā starpnieks starp Modeļa un Skata komponentiem. apstrādā lietotāja mijiedarbību (piemēram, klikšķus, datu ievadi), saņem datus no Modeļa, nodod tos Skatam attēlošanai un atjauno Modeļa datus, ja lietotājs ir veicis izmaiņas:

Galvenās saistības:

• Lietotājs mijiedarbojas ar Skatu:
• Skats nodod lietotāja darbības Kontrolierim:
• Kontrolieris apstrādā lietotāja darbības, sadarbojoties ar Modeļa (pieprasot datus vai tos atjauninot):
• Modelis paziņo Kontrolierim (vai dažos variantos — Skatam) par datu izmaiņām:
• Kontrolieris atjauno Skatu, balstoties uz Modeļa izmaiņām (vai Skats tiek atjaunināts patstāvīgi, tieši sadarbojoties ar Modeļa):

Priekšrocības:

• Atbildības sadalījums (Separation of Concerns): tas vienkāršo komponentu izstrādi, testēšanu un uzturēšanu:
• Koda atkārtota izmantošana: Modelis un Kontrolieris var tikt izmantoti ar dažādām Skatēm:
• Testēšanas vienkāršošana: komponenti var tikt testēti neatkarīgi:
• Paralēla izstrāde: dažādas komandas var strādāt pie dažādām daļām (Modelis, Skats, Kontrolieris) vienlaikus:

Trūkumi:

• Sarežģītības pieaugums: mazām lietojumprogrammām tas var būt pārmērīgi:
• "Lielais Kontrolieris" problēma: Kontrolieris var kļūt pārāk liels un sarežģīts, ja netiek ievēroti sadalījuma principi:
• Robežu noteikšanas grūtības: dažreiz ir grūti skaidri noteikt, kur beidzas viens komponents un sākas cits:

Piemērs (schematisks):

// Modelis (piemēram, datu apstrādes klase)
class UserModel {
  constructor() {
    this.users = [{
      id: 1,
      name: 'Alice'
    }, {
      id: 2,
      name: 'Bob'
    }];
  }

  getUsers() {
    return this.users;
  }

  addUser(user) {
    this.users.push(user);
    // Paziņot par izmaiņām (reālajā lietojumā — caur notikumiem)
  }
}

// Skats (piemēram, saraksta attēlošanas funkcija)
function renderUserList(users) {
  const list = document.getElementById('user-list');
  list.innerHTML = users.map(user => `<li>${user.name}</li>`).join('');
}

// Kontrolieris (apstrādei un koordinācijai)
class UserController {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    // Sākotnējā skata atjaunināšana
    this.updateView();

    // Notikumu apstrāde (piemēram, pogas klikšķis)
    document.getElementById('add-user-button').addEventListener('click', () => {
      const newUser = {
        id: this.model.getUsers().length + 1,
        name: prompt('Ievadiet lietotāja vārdu:')
      };
      if (newUser.name) {
        this.model.addUser(newUser);
        this.updateView(); // Skata atjaunināšana pēc izmaiņām
      }
    });
  }

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

// Lietošana
const model = new UserModel();
const controller = new UserController(model, renderUserList);

Šis ir vienkāršots piemērs, kas ilustrē galveno principu. Reālos ietvaros (piemēram, Angular, React, Vue) tiek izmantoti sarežģītāki varianti šim un citiem arhitektūras modeļiem.