Kas yra MVC architektūros modelis?

MVC (Modelis-Peržiūra-Valdiklis) — tai architektūrinis modelis, kuris skiria programą į tris tarpusavyje susijusias dalis, siekiant pagerinti kodo organizaciją ir palengvinti kūrimą bei palaikymą:

• Modelis (Model): atstovauja duomenis ir verslo logiką. atsakingas už duomenų gavimą, saugojimą ir apdorojimą, taip pat už taisykles, valdančias šiuos duomenis. neturi tiesioginio ryšio su naudotojo sąsaja:
• Peržiūra (View): atsakinga už duomenų rodymą vartotojui. gauna duomenis iš Modelio ir vizualizuoja juos. neturi verslo logikos ir tiesiogiai nesusijusi su duomenimis, išskyrus jų atvaizdavimą:
• Valdiklis (Controller): veikia kaip tarpininkas tarp Modelio ir Peržiūros. apdoroja vartotojo sąveikas (pvz., paspaudimus, duomenų įvedimą), gauna duomenis iš Modelio, perduoda juos Peržiūrai atvaizdavimui ir atnaujina Modelį, kai vartotojas keičia duomenis:

Pagrindiniai ryšiai:

• Vartotojas sąveikauja su Peržiūra:
• Peržiūra perduoda vartotojo veiksmus Valdikliui:
• Valdiklis apdoroja vartotojo veiksmus, sąveikauja su Modeliu (prašydamas duomenis arba juos atnaujindamas):
• Modelis praneša Valdikliui (arba kai kuriose variacijose — Peržiūrai) apie duomenų pakeitimus:
• Valdiklis atnaujina Peržiūrą remiantis Modelio pakeitimais (arba Peržiūra atnaujinama savarankiškai tiesiogiai sąveikaujant su Modeliu):

Privalumai:

• Atsakomybės pasidalijimas (Separation of Concerns): palengvina komponentų kūrimą, testavimą ir palaikymą:
• Kodo pakartotinis naudojimas: Modelis ir Valdiklis gali būti naudojami su skirtingomis Peržiūromis:
• Testavimo palengvinimas: komponentai gali būti testuojami nepriklausomai:
• Lygiagretus kūrimas: skirtingos komandos gali dirbti su skirtingomis dalimis (Modeliu, Peržiūra, Valdikliu) vienu metu:

Trūkumai:

• Sudėtingumo didėjimas: mažiems programoms gali būti perteklinis:
• "Storas valdiklis" problema: Valdiklis gali tapti pernelyg didelis ir sudėtingas, jei nesilaikoma atskyrimo principų:
• Ribų nustatymo sunkumai: kartais sunku aiškiai apibrėžti, kur baigiasi vienas komponentas ir prasideda kitas:

Pavyzdys (schematinis):

// Modelis (pvz., duomenų tvarkymo klasė)
class UserModel {
  constructor() {
    this.users = [{
      id: 1,
      name: 'Alice'
    }, {
      id: 2,
      name: 'Bob'
    }];
  }

  getUsers() {
    return this.users;
  }

  addUser(user) {
    this.users.push(user);
    // Pranešti apie pakeitimą (realiame taikyme — per įvykius)
  }
}

// Peržiūra (pvz., sąrašo atvaizdavimo funkcija)
function renderUserList(users) {
  const list = document.getElementById('user-list');
  list.innerHTML = users.map(user => `<li>${user.name}</li>`).join('');
}

// Valdiklis (apdorojimui ir koordinavimui)
class UserController {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    // Pradinio vaizdo atnaujinimas
    this.updateView();

    // Įvykių apdorojimas (pvz., mygtuko paspaudimas)
    document.getElementById('add-user-button').addEventListener('click', () => {
      const newUser = {
        id: this.model.getUsers().length + 1,
        name: prompt('Įveskite naudotojo vardą:')
      };
      if (newUser.name) {
        this.model.addUser(newUser);
        this.updateView(); // Vaizdo atnaujinimas po pakeitimo
      }
    });
  }

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

// Naudojimas
const model = new UserModel();
const controller = new UserController(model, renderUserList);

Tai supaprastintas pavyzdys, rodantis pagrindinį principą. Tikruosiuose karkasuose (pvz., Angular, React, Vue) naudojami sudėtingesni šio ir kitų architektūros modelių variantai.