Hack Frontend Community

Паттерны проектирования MVC (Model-View-Controller) и MVP (Model-View-Presenter)

MVC (Model-View-Controller) и MVP (Model-View-Presenter) — это архитектурные паттерны, которые помогают организовать код в больших приложениях. Они разделяют логику приложения на отдельные компоненты, что делает его более понятным, поддерживаемым и тестируемым.

MVC (Model - View - Controller)

Model-View-Controller — один из самых популярных паттернов. Он делит приложение на три слоя:

Model

  • Отвечает за данные и бизнес-логику.
  • Получает и обрабатывает данные (например, из API или базы данных).

View

  • Отвечает за отображение данных пользователю.
  • Не содержит логики, кроме UI.

Controller

  • Связывает View и Model.
  • Обрабатывает пользовательские действия и обновляет модель или представление.

Пример потока данных: Пользователь ➜ ViewControllerModelControllerView

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

  • View может запрашивать данные напрямую у модели.
  • Контроллер «реагирует» на действия пользователя.

MVP (Model - View - Presenter)

Model-View-Presenter — это эволюция MVC, которая облегчает тестирование и сильнее изолирует View.

Model

  • Та же, что и в MVC — управляет данными и бизнес-логикой.

View

  • Отвечает только за отображение и имеет минимальную логику.
  • Ничего не знает о модели.

Presenter

  • Управляет логикой между View и Model.
  • Сам получает данные из Model и передаёт их View.
  • View и Presenter связаны интерфейсами, что упрощает тестирование Presenter без UI.

Пример потока данных: Пользователь ➜ ViewPresenterModelPresenterView


Сравнение MVC vs MVP

ХарактеристикаMVCMVP
Кто управляет логикой?ControllerPresenter
View знает о Model?Может знатьНет
Model знает о View?НетНет
Testability (тестируемость)СредняяВысокая
Где используетсяWeb-фреймворки, backendAndroid, десктоп, сложные UI

Когда использовать

СценарийПодход
Простое приложение с минимумом логикиMVC
Большое приложение, требующее модульности и тестируемостиMVP
Разработка под Android или с ограниченным UIMVP
React / Vue / AngularЧаще используется MVVM или FSD, но принципы схожи

Полезно знать:

В современном фронтенде чаще используются вариации этих паттернов: MVVM, Redux, Flux и архитектура Feature-Sliced Design (FSD).