Зачем нужна модель MVC?

Зачем нужна модель MVC

MVC (Model-View-Controller) — это архитектурный паттерн, который разделяет приложение на три независимых компонента. Это один из основных паттернов в разработке приложений, используется везде: веб, мобильные приложения, десктопные системы.

Что такое MVC

MVC делит приложение на три слоя:

┌──────────────┐         ┌──────────────┐         ┌──────────────┐
│     View     │ <-----> │  Controller  │ <-----> │    Model     │
│  (Визуал)    │         │  (Логика)    │         │  (Данные)    │
└──────────────┘         └──────────────┘         └──────────────┘

1. Model (Модель) — Данные

Model — это слой данных приложения. Содержит:

• Структуру данных (типы, схему)
• Бизнес-логику
• Взаимодействие с базой данных
• Валидацию данных

// Model: User
class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
  
  // Бизнес-логика в модели
  isValidEmail() {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.email);
  }
  
  async save() {
    // Сохранение в базу
    const response = await fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify(this)
    });
    return response.json();
  }
  
  async delete() {
    // Удаление из базы
    await fetch(`/api/users/${this.id}`, {
      method: 'DELETE'
    });
  }
}

2. View (Представление) — Визуальная часть

View — это то, что видит пользователь. Содержит:

• HTML структуру
• CSS стили
• Шаблоны
• Отображение данных

// View: UserProfile Component
function UserProfile({ user, onUpdate, onDelete }) {
  return (
    <div className="profile">
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <button onClick={() => onUpdate(user)}>Edit</button>
      <button onClick={() => onDelete(user.id)}>Delete</button>
    </div>
  );
}

3. Controller (Контроллер) — Логика управления

Controller — это промежуточный слой, который:

• Обрабатывает события пользователя
• Управляет Model
• Обновляет View
• Координирует взаимодействие

// Controller: UserController
class UserController {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }
  
  // Обработка события: пользователь нажал "Edit"
  handleUpdate = async (userId, newData) => {
    try {
      // Обновляем модель
      await this.model.update(userId, newData);
      
      // Обновляем представление
      const updatedUser = await this.model.getById(userId);
      this.view.render(updatedUser);
    } catch (error) {
      this.view.showError(error);
    }
  }
  
  // Обработка события: пользователь нажал "Delete"
  handleDelete = async (userId) => {
    try {
      await this.model.delete(userId);
      this.view.showSuccess('User deleted');
    } catch (error) {
      this.view.showError(error);
    }
  }
}

Поток данных в MVC

1. Пользователь взаимодействует с View (нажимает кнопку)
   ↓
2. View отправляет событие в Controller
   ↓
3. Controller обновляет Model
   ↓
4. Model меняет данные (в памяти или в БД)
   ↓
5. Controller уведомляет View об изменениях
   ↓
6. View отображает обновленные данные

Зачем нужна MVC

1. Разделение ответственности

Без MVC (плохо):

// Всё смешано в одном файле
class UserPage {
  constructor() {
    this.name = '';
    this.email = '';
  }
  
  // Визуальная часть
  render() {
    document.body.innerHTML = `
      <input id="name" value="${this.name}" />
      <input id="email" value="${this.email}" />
    `;
  }
  
  // Логика обновления
  async updateUser() {
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    
    // Валидация — эта логика должна быть в модели
    if (!email.includes('@')) {
      alert('Invalid email');
      return;
    }
    
    // Взаимодействие с API
    const response = await fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify({ name, email })
    });
    
    // Обновление визуала
    if (response.ok) {
      this.render();
    }
  }
}

С MVC (хорошо):

// Model — только данные и логика
class UserModel {
  async save(data) {
    // Валидация
    if (!this.isValid(data)) throw new Error('Invalid data');
    
    // Сохранение
    return fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify(data)
    });
  }
}

// View — только отображение
class UserView {
  render(user) {
    document.body.innerHTML = `
      <input value="${user.name}" />
      <input value="${user.email}" />
    `;
  }
  
  getFormData() {
    return {
      name: document.getElementById('name').value,
      email: document.getElementById('email').value
    };
  }
}

// Controller — управление
class UserController {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }
  
  async handleSave() {
    const data = this.view.getFormData();
    await this.model.save(data);
    this.view.render(data);
  }
}

2. Тестируемость

// Легко тестировать каждый слой отдельно

// Тест Model
test('User validation', () => {
  const user = new User('John', 'invalid-email');
  expect(user.isValidEmail()).toBe(false);
});

// Тест Controller
test('Controller updates view', () => {
  const model = new MockModel();
  const view = new MockView();
  const controller = new UserController(model, view);
  
  controller.handleUpdate({ name: 'Jane' });
  
  expect(view.renderCalled).toBe(true);
});

// Тест View
test('View displays user name', () => {
  const view = new UserView();
  view.render({ name: 'John' });
  
  expect(document.body.textContent).toContain('John');
});

3. Переиспользование кода

// Один Model используется в разных View

class UserModel { /* ... */ }

// View для веб
class WebUserView { /* ... */ }
const webController = new UserController(new UserModel(), new WebUserView());

// View для мобильного приложения (React Native)
class MobileUserView { /* ... */ }
const mobileController = new UserController(new UserModel(), new MobileUserView());

// View для админ-панели
class AdminUserView { /* ... */ }
const adminController = new UserController(new UserModel(), new AdminUserView());

4. Сменяемость компонентов

// Легко заменить View без изменения Model и Controller

// Было: jQuery View
class jQueryUserView { /* ... */ }

// Стало: React View
class ReactUserView { /* ... */ }

// Controller не меняется
const controller = new UserController(model, new ReactUserView());

5. Масштабируемость

С MVC легче добавлять новые функции:

• Новый Controller для новой страницы
• Новый View для нового интерфейса
• Новые методы в Model

MVC в различных фреймворках

Django (Python)

# Model
class User(models.Model):
    name = models.CharField()
    email = models.EmailField()

# View (в Django это Template)
class UserListView(View):
    def get(self, request):
        users = User.objects.all()
        return render(request, 'users.html', {'users': users})

# Controller (в Django это View, но концептуально — контроллер)
# URL маршруты связывают view функции с URL

React (JavaScript)

// Model (Zustand store или Redux)
const userStore = create(store => ({ /* ... */ }));

// View (React Component)
function UserComponent() {
  const users = useUserStore(state => state.users);
  return <div>{users.map(u => <p key={u.id}>{u.name}</p>)}</div>;
}

// Controller (Hook или middleware)
function useUserController() {
  const { fetchUsers, deleteUser } = useUserStore();
  return { fetchUsers, deleteUser };
}

Преимущества MVC

Когда MVC становится сложным

// Проблема: Model становится слишком большой
class UserModel {
  // Слишком много ответственности
  async register() { /* ... */ }
  async login() { /* ... */ }
  async updateProfile() { /* ... */ }
  async uploadAvatar() { /* ... */ }
  async deleteAccount() { /* ... */ }
  async sendPasswordReset() { /* ... */ }
  // ...
}

// Решение: разделить на несколько моделей
class AuthModel { /* register, login, logout */ }
class ProfileModel { /* updateProfile, deleteAccount */ }
class FileModel { /* uploadAvatar */ }

Вывод

MVC — это фундаментальный паттерн архитектуры, который обеспечивает:

• Чёткое разделение ответственности
• Простоту тестирования и отладки
• Масштабируемость приложения
• Переиспользование компонентов

Даже если ты не используешь MVC явно (например, в React с Redux), эти принципы всё равно применяются: State (Model) -> Store (Controller) -> Components (View).