Какие существуют паттерны проектирования (MVC, MVVM, MVP) и чем они отличаются?

Архитектурные паттерны проектирования

Эти паттерны помогают организовать код приложения, разделяя ответственность между различными компонентами.

1. MVC (Model-View-Controller)

Структура:

• Model - данные и бизнес-логика

• View - отображение данных, пользовательский интерфейс

• Controller - обработка пользовательского ввода, посредник между Model и View

Взаимодействие:

text

Пользователь → Controller → Model → View → Пользователь

Пример реализации:

javascript

// Model
class UserModel {
  constructor() {
    this.users = [];
  }
  
  addUser(user) {
    this.users.push(user);
  }
  
  getUsers() {
    return this.users;
  }
}

// View
class UserView {
  displayUsers(users) {
    users.forEach(user => {
      console.log(`User: ${user.name}, Email: ${user.email}`);
    });
  }
}

// Controller
class UserController {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }
  
  addUser(name, email) {
    this.model.addUser({ name, email });
    this.updateView();
  }
  
  updateView() {
    const users = this.model.getUsers();
    this.view.displayUsers(users);
  }
}

2. MVP (Model-View-Presenter)

Структура:

• Model - данные и бизнес-логика

• View - пассивный интерфейс, делегирует действия Presenter

• Presenter - получает данные от Model и подготавливает для View

Взаимодействие:

text

Пользователь → View → Presenter → Model → Presenter → View

Особенности:

• View пассивна, не знает о Model

• Presenter управляет View и обрабатывает события

• Более тесная связь между View и Presenter

Пример реализации:

javascript

// View interface
class IUserView {
  showUsers(users) {}
  getUserInput() {}
}

// Presenter
class UserPresenter {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }
  
  onAddUserButtonClick() {
    const userData = this.view.getUserInput();
    this.model.addUser(userData);
    this.updateView();
  }
  
  updateView() {
    const users = this.model.getUsers();
    this.view.showUsers(users);
  }
}

3. MVVM (Model-View-ViewModel)

Структура:

• Model - данные и бизнес-логика

• View - отображение, привязка к ViewModel

• ViewModel - представление данных для View, двустороннее связывание

Взаимодействие:

text

View ↔ ViewModel ↔ Model

Особенности:

• Двустороннее связывание данных (data binding)

• ViewModel не знает о View

• Автоматическое обновление View при изменении ViewModel

Пример реализации (Vue.js):

javascript

// ViewModel (Vue instance)
new Vue({
  el: '#app',
  data: {
    users: [],
    newUser: { name: '', email: '' }
  },
  methods: {
    addUser() {
      this.users.push({ ...this.newUser });
      this.newUser = { name: '', email: '' };
    }
  }
});

// View (HTML template)
/*
<div id="app">
  <input v-model="newUser.name" placeholder="Name">
  <input v-model="newUser.email" placeholder="Email">
  <button @click="addUser">Add User</button>
  <div v-for="user in users">
    {{ user.name }} - {{ user.email }}
  </div>
</div>
*/

Сравнение паттернов

Уровень связности:

• MVC: View знает о Model

• MVP: View не знает о Model, тесная связь с Presenter

• MVVM: View знает о ViewModel, но не о Model

Тестируемость:

• MVP: Легче всего тестировать (Presenter изолирован)

• MVVM: ViewModel легко тестируется

• MVC: Сложнее тестировать из-за связности

Применение:

• MVC: Традиционные веб-приложения (Ruby on Rails, Spring)

• MVP: Приложения с сложной бизнес-логикой

• MVVM: Современные SPA (Angular, Vue.js, WPF)

Вывод: Выбор паттерна зависит от сложности приложения, требований к тестируемости и предпочтений команды. MVC подходит для простых приложений, MVP - для лучшей тестируемости, MVVM - для приложений с богатым UI и двусторонним связыванием.