Блог

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


Печать   E-mail

Интересные статьи

О хостинге

logo jurahost green white

Хостинг для сайтов JuraHost. Все сайты размещаются на быстрых и надежных серверах в лучших дата-центрах Европы.

Получать новости

Пожалуйста, включите javascript для отправки этой формы