MVC mimari deseni nedir?

MVC (Model-Görünüm-Denetleyici) mimari bir desen olup, kodun organizasyonunu geliştirmek ve geliştirme ile bakımı kolaylaştırmak için uygulamayı birbirine bağlı üç bölüme ayırır:

• Model (Model): Verileri ve iş mantığını temsil eder. Veri alma, depolama ve işleme ile bu verileri yöneten kurallardan sorumludur. Kullanıcı arayüzü hakkında doğrudan bir görünümü yoktur.
• View (Görünüm): Verilerin kullanıcıya gösterilmesinden sorumludur. Model'den veri alır ve bunları görselleştirir. İş mantığı içermez ve verilerle doğrudan etkileşime girmez, sadece onların çizimini yapar.
• Controller (Denetleyici): Model ile Görünüm arasında aracılık yapar. Kullanıcıyla etkileşimi (örneğin, tıklamalar, veri girişleri) işler, Model'den veri alır, bunları Görünüm'e ileterek gösterir ve kullanıcının yaptığı değişikliklerle Model'i günceller.

Ana ilişkiler:

• Kullanıcı Görünüm ile etkileşir.
• Görünüm, kullanıcı eylemlerini Denetleyiciye iletir.
• Denetleyici, kullanıcı eylemlerini işler ve Model ile etkileşir (veri ister veya günceller).
• Model, Veri değişiklikleri hakkında Denetleyiciye (veya bazı varyasyonlarda doğrudan Görünüm'e) bildirimde bulunur.
• Denetleyici, Model'deki değişikliklere dayanarak Görünüm'ü günceller (veya Görünüm, Model ile doğrudan etkileşimde bulunarak kendisi güncellenir).

Avantajlar:

• Sorumlulukların ayrılması: Bireysel bileşenlerin geliştirilmesini, test edilmesini ve bakımını kolaylaştırır.
• Kodun yeniden kullanımı: Model ve Denetleyici, farklı Görünümlerle kullanılabilir.
• Test kolaylığı: Bileşenler bağımsız olarak test edilebilir.
• Paralel geliştirme: Farklı ekipler aynı anda farklı bölümler üzerinde çalışabilir (Model, Görünüm, Denetleyici).

Dezavantajlar:

• Karmaşıklığın artması: Küçük uygulamalar için fazla olabilir.
• "Şişmiş Denetleyici" sorunu: Denetleyici, prensiplere uyulmazsa çok büyük ve karmaşık hale gelebilir.
• Sınırların belirlenmesinde zorluk: Bir bileşenin nerede bittiği ve diğerinin nerede başladığı bazen net olarak belirlenmesi zor olabilir.

Örnek (şematik):

// Model (örneğin, veri ile çalışma sınıfı)
class UserModel {
  constructor() {
    this.users = [{
      id: 1,
      name: 'Alice'
    }, {
      id: 2,
      name: 'Bob'
    }];
  }

  getUsers() {
    return this.users;
  }

  addUser(user) {
    this.users.push(user);
    // Değişiklikleri bildirme (gerçek bir uygulamada - olaylar aracılığıyla)
  }
}

// Görünüm (örneğin, listeyi çizmek için fonksiyon)
function renderUserList(users) {
  const list = document.getElementById('user-list');
  list.innerHTML = users.map(user => `<li>${user.name}</li>`).join('');
}

// Denetleyici (olayları yönetmek ve koordine etmek için)
class UserController {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    // Görünümü başlat
    this.updateView();

    // Olayları yönet (örneğin, buton tıklaması)
    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(); // Model değişikliğinden sonra görünümü güncelle
      }
    });
  }

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

// Kullanım
const model = new UserModel();
const controller = new UserController(model, renderUserList);

Bu, temel prensibi gösteren basitleştirilmiş bir örnektir. Gerçek frameworklerde (Angular, React, Vue gibi) bu ve diğer mimari desenlerin daha gelişmiş varyasyonları kullanılır.