MVC memarlıq nümunəsi nədir?

MVC (Model-Görünüş-Nəzarətçi) — bu, tətbiqi üç qarşılıqlı əlaqəli hissəyə bölən memarlıq nümunəsidir, kodun təşkili və inkişafı və dəstəyi asanlaşdırmaq üçün:

• Model (Model): Məlumatları və biznes məntiqini təmsil edir. Məlumatların alınması, saxlanması və işlənməsi, eləcə də bu məlumatları idarə edən qaydalar üçün cavabdehdir. İstifadəçi interfeysinin birbaşa nümayişi yoxdur.
• View (Görünüş): Məlumatların istifadəçiyə göstərilməsindən məsuldur. Model-dən məlumat alır və onları vizuallaşdırır. Biznes məntiqi daxil deyil və məlumatlarla birbaşa qarşılıqlı əlaqədə deyil, yalnız onların göstərilməsi üçün.
• Controller (Nəzarətçi): Model və Görünüş arasında vasitəçi rolunu oynayır. İstifadəçi ilə qarşılıqlı əlaqəni (məsələn, kliklər, məlumat daxil etmə) işləyir, Model-dən məlumat alır, onları Görünüşə ötürür və istifadəçi tərəfindən dəyişdirilən məlumatlar əsasında Model-i yeniləyir.

Əsas əlaqələr:

• İstifadəçi Görünüşlə qarşılıqlı əlaqədədir.
• Görünüş istifadəçinin fəaliyyətlərini Nəzarətçiyə ötürür.
• Nəzarətçi istifadəçinin fəaliyyətlərini işləyir, Model ilə qarşılıqlı əlaqədə olur (məlumatları sorğulayır və ya yeniləyir).
• Model Nəzarətçiyə (və ya bəzi varyasyonlarda Görünüşə) məlumatların dəyişiklikləri barədə xəbər verir.
• Nəzarətçi Model-dəki dəyişikliklərə əsasən Görünüşü yeniləyir (və ya Görünüş birbaşa Model ilə qarşılıqlı əlaqədə olduqda, özü yenilənir).

Üstünlüklər:

• Məsuliyyətlərin bölünməsi (Separation of Concerns): Komponentlərin inkişafını, test edilməsini və dəstəyini sadələşdirir.
• Kodun təkrar istifadəsi: Model və Nəzarətçi müxtəlif Görünüşlərlə istifadə oluna bilər.
• Testin asanlaşdırılması: Komponentlər müstəqil test edilə bilər.
• Paralel inkişaf: Müxtəlif komandalar müxtəlif hissələr üzərində (Model, Görünüş, Nəzarətçi) eyni zamanda işləyə bilər.

Əksikliklər:

• Çətinliklər: Kiçik tətbiqlər üçün çox ola bilər.
• "Fat Controller" problemi: Nəzarətçi çox böyük və mürəkkəb ola bilər, əgər bölünmə prinsiplərinə əməl olunmazsa.
• Sərhədlərin müəyyənləşdirilməsində çətinlik: Bəzən bir komponentin harada bitdiyini və digərinin harada başladığını dəqiq müəyyən etmək çətindir.

Nümunə (sxematik):

// Model (məsələn, məlumatlarla işləmək üçün sinif)
class UserModel {
  constructor() {
    this.users = [{
      id: 1,
      name: 'Alice'
    }, {
      id: 2,
      name: 'Bob'
    }];
  }

  getUsers() {
    return this.users;
  }

  addUser(user) {
    this.users.push(user);
    // Dəyişiklik barədə bildiriş (real tətbiqlərdə - hadisələr vasitəsilə)
  }
}

// Görünüş (məsələn, siyahını çəkmək üçün funksiya)
function renderUserList(users) {
  const list = document.getElementById('user-list');
  list.innerHTML = users.map(user => `<li>${user.name}</li>`).join('');
}

// Nəzarətçi (hadisələri idarə etmək və koordinasiya üçün)
class UserController {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    // Görünüşün ilkin qurulması
    this.updateView();

    // Hadisələrin idarə olunması (məsələn, düyməyə klik)
    document.getElementById('add-user-button').addEventListener('click', () => {
      const newUser = {
        id: this.model.getUsers().length + 1,
        name: prompt('İstifadəçi adını daxil edin:')
      };
      if (newUser.name) {
        this.model.addUser(newUser);
        this.updateView(); // Modeldə dəyişiklikdən sonra görünüşü yeniləmək
      }
    });
  }

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

// İstifadə
const model = new UserModel();
const controller = new UserController(model, renderUserList);

Bu, əsas prinsipı göstərən sadə bir nümunədir. Əsl çərçivələrdə (Angular, React, Vue kimi) bu və digər memarlıq nümunələrinin daha inkişaf etmiş varyasyonları istifadə olunur.