რა არის 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('შეიყვანეთ მომხმარებლის სახელი:')
      };
      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) გამოიყენება უფრო მოწინავე ვარიანტები ამ და სხვა არქიტექტურული ნიმუშების.