Craftum — конструктор сайтов
Создайте сайт с помощью профессиональных шаблонов или придумайте дизайн с нуля

Что такое MVC

Обсудить
Что такое MVC

Рассказываю об одном из самых удобных паттернов построения приложений на любом языке и в любой области. 

Что такое паттерн?

Рядом с аббревиатурой MVC почти всегда фигурирует англицизм – паттерн. Это слово означает «шаблон», и этот перевод отлично подходит в нашем случае, так как MVC как раз описывает некую пошаговую модель поведения разработчика. 

Мы будем говорить об образце, по которому строится процесс разработки приложения. 

Паттерны используются в крупных компаниях и программистами-одиночками для поддержания кода программы в едином стиле и для создания менее абстрактного плана действий по реализации новых функций. Проще говоря, зная, как должно строиться ПО, легче начать над ним работу.

Расшифровка паттерна MVC

За аббревиатурой MVC стоят слова Model, View и Contoller. 

  • Model – это внутренняя структура с набором алгоритмов, которая решает поставленные перед ней задачи, обособленно от программы. Грубо говоря, эта функция выполняет код, обрабатывая входные данные. 
  • View – это то, что видит пользователь приложения. То есть интерфейс, в который он вносит данные или через который запрашивает какие-либо изменения. 
  • Controller – это прослойка между двумя сущностями, принимающая информацию из View и передающая их в Model. И обратно. 

Ключевые аспекты концепции MVC

Обычно разработчики, пытаясь объяснить идею MVC, начинают приводить аналогии из реального мира. В частности, аналогию с рестораном. 

Когда вы в него приходите, вы фактически сталкиваетесь с неким интерфейсом, пусть это будет меню. Делая заказ, вы указываете на позицию в меню и сообщаете о ней официанту, принимающему заказ. Он получает данные от вас через интерфейс и передает их модели, то есть повару.

Алгоритм работы официанта

Повар выполняет свою работу, ничего не зная о вас. Он лишь знает ту толику информации, что ему передал официант – «приготовь блюдо N». Затем повар, то есть модель, отдает обратно уже переработанную информацию в виде готового блюда. А вы получаете его от контроллера-официанта, вообще ничего не зная о процессе создания сделанного ранее заказа. 

Алгоритм работы повара

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

  • Model – не задает лишних вопросов и выполняет функцию, отрабатывая все входящие данные и не имея доступа к каким-либо внешним переменным и дополнительной информации. 

  • View – предоставляет внешний инструментарий для пользователя с той функциональностью, которая изначально было предусмотрена разработчиком. 

  • Controller – оперирует данными, чтобы каждый получил именно то, что требуется. 

Зачем использовать паттерн MVC?

Идея MVC заключается в создании приложения из слабо зависимых блоков. Таким образом, поддерживается общая абстрактность, а это позитивно сказывается на отказоустойчивости всей программы. Ведь можно внести изменения в блок Model, но не трогать View с Controller, и они продолжат стабильно выполнять свою работу. 

Вернувшись к примеру с рестораном, можно представить, что вы заменили повара. Он начал готовить блюда совершенно иным образом, выполняя при этом какие-то дополнительные задачи, но меню никак не изменилось. Как и официант. 

В приложении это может выглядеть как замена алгоритма поиска запрашиваемой информации (или любого другого алгоритма) без необходимости менять интерфейс программы. Для пользователя приложение останется все тем же, и ему не придется изучать новые алгоритмы взаимодействия с вашим продуктом. 

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

MVC в реальном приложении

Посмотрим, как это приблизительно оформлено в живом коде. Давайте сделаем калькулятор (ну а что еще делают начинающие программисты). 

Сначала напишем небольшой интерфейс в HTML-документе. Мы просто добавим пару кнопок и два поля для ввода данных. Да, калькулятор у нас будет довольно посредственный и не особо умный. 

Структура приложения-калькулятора

Потом добавим «слушатель», то есть дадим браузеру команду отслеживать клики по заранее определенным кнопкам. В нашем случае это кнопка с тегом summarize. Это и есть наш контроллер, он будет передавать данные из интерфейса в модель, а потом забирать их и возвращать в интерфейс. 

Функция addEventListener в JavaScript

Наша модель в этом случае производит элементарный расчет, принимая два аргумента и выполняя заданную в ней функцию (у нас это функция сложения).

Функция сложения в JavaScript

Пользователь перед собой увидит вот такой несложный интерфейс, и ему все равно, как вы реализовали вычисление. Он получает результат. Каждый компонент занят своим делом.

Приложение калькулятор на базе JavaScript

Я могу заменить сложение на вычитание в модели, и контроллер с интерфейсом ничего не будут иметь против (правда, удивится пользователь). 

Вместо заключения 

Как видите, концепция MVC довольно проста в понимании. Идея проста, но научиться делать независимые блоки куда сложнее, чем кажется на первый взгляд. Для этого потребуется длительная практика, но оно того точно стоит.

Комментарии

С помощью соцсетей
У меня нет аккаунта Зарегистрироваться
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
С помощью соцсетей
У меня уже есть аккаунт Войти
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.
Пожалуйста, укажите email вашего аккаунта
Ваш баланс 10 ТК
1 ТК = 1 ₽
О том, как заработать и потратить Таймкарму, читайте в этой статье
Чтобы потратить Таймкарму, зарегистрируйтесь на нашем сайте