Что такое MVC

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

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

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

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

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

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Подписаться

Расшифровка паттерна 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 довольно проста в понимании. Идея проста, но научиться делать независимые блоки куда сложнее, чем кажется на первый взгляд. Для этого потребуется длительная практика, но оно того точно стоит.

Hello World! Гайды и обзоры для девелоперов разных мастей.

Комментарии

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