MVP-MVC-MVVM.csv

Bir yapı, UI olaylarına doğrudan müdahale ediyor ve View’i manuel güncelliyorsa: o Presenter’dır.
Bir yapı, sadece durumu tutuyor, View kendisi onu izliyorsa ve otomatik güncelleniyorsa: o ViewModel’dir.

MVP’de Presenter, View'u tanır ve onun belirli metotlarını doğrudan çağırır:

Aşağıda view var ve biraz aşağıda presenter'ın view'a eriştiği ve onun fonksiyonlarını çağırdığını göreceksiniz:

// view.js
class UserView {
  constructor() {
    this.button = document.getElementById('load-users');
    this.list = document.getElementById('user-list');
  }

  bindLoadUsers(handler) {
    this.button.addEventListener('click', handler);
  }

  showUsers(users) {
    this.list.innerHTML = '';
    users.forEach(user => {
      const li = document.createElement('li');
      li.textContent = user.name;
      this.list.appendChild(li);
    });
  }

  showError(error) {
    this.list.innerHTML = `<li style="color: red;">Hata: ${error}</li>`;
  }
}

Presenter hem View hem Model katmanını yapıcı metoduna alır ve her iki modele doğrudan erişir:

// presenter.js
class UserPresenter {
  constructor(view, model) {
    this.view = view;
    this.model = model;

    // View'daki butona basıldığında ne olacağını tanımla
    this.view.bindLoadUsers(this.handleLoadUsers.bind(this));
  }

  async handleLoadUsers() {
    try {
      const users = await this.model.fetchUsers();
      this.view.showUsers(users);
    } catch (err) {
      this.view.showError('Veri alınamadı');
    }
  }
}

View pasif, sadece Presenter tarafından yönetilen bir arayüzdür.