Получите бесплатно 4 курса для лёгкого старта работы в IT
Получить курсы бесплатно
ГлавнаяБлогMVC: разбираемся в нюансах
MVC
1 859
Время чтения: 10 минут

MVC: разбираемся в нюансах

1 859
Время чтения: 10 минут
Сохранить статью:
Сохранить статью:

Что это такое? MVC расшифровывается как Model, View, Controller (модель, представление, контроллер) и является одним из паттернов программирования. Как следует из названия, программа получается разделенной на три части.

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

В статье рассказывается:

  1. Суть MVC
  2. Пример MVC
  3. Использование MVC пошагово
  4. Альтернативные паттерны
  5. Пройди тест и узнай, какая сфера тебе подходит:
    айти, дизайн или маркетинг.
    Бесплатно от Geekbrains

Суть MVC

MVC (Model-View-Controller) – это концепция для создания графического пользовательского интерфейса. Она была представлена норвежским специалистом в области информатики Трюгве Реенскаугом в 1978 году. На тот момент перед программистами стоял вопрос, как пользователь ПК может работать с большими объемами данных. Принцип Реенскауга решил эту проблему, предоставив человеку возможность управлять компьютерными системами интуитивно понятным способом.

Суть MVC
Суть MVC

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

Узнай, какие ИТ - профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Павел Симонов - исполнительный директор Geekbrains
Павел Симонов
Исполнительный директор Geekbrains
Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.
Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов - исполнительный директор Geekbrains
Павел Симонов
Исполнительный директор Geekbrains
pdf иконка

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

doc иконка

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

pdf иконка

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

pdf 3,7mb
doc 1,7mb
Уже скачали 27974 pdf иконка

Давайте рассмотрим их.

Модель

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

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

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

Представление (Вид)

Запрашиваемые из Модели данные предстают перед нами именно благодаря этому компоненту. В случае веб-приложений Представление генерирует и отображает HTML-код. Этот раздел также перехватывает действия пользователя и передает их контроллеру. Типичным примером результата работы Представления является кнопка. После нажатия на нее в Контроллере запускается действие.

Важно отметить, что информация передается Контроллеру не напрямую от Представления: связь между ними осуществляется через Модель.

Контроллер

Его работа заключается в обработке введенных данных и обновлении Модели. Непосредственное взаимодействие с пользователем происходит именно в этом разделе. Контроллер собирает информацию и передает ее в Модель, которая затем организует хранение. По сути, он не имеет никакой логики, кроме сбора данных. Важно понимать, что Контроллер связан только с одной Моделью и одним Представлением. Другого не дано. Это система одностороннего потока информации с одним входным и одним выходным обменом.

Контроллер
Контроллер

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

Пример MVC

Лучший способ понять концепцию MVC – использовать реальный пример. Рассмотрим ресторан быстрого питания. Здесь клиент (пользователь) подходит к кассиру (это и Представление, и Контроллер), просматривает меню и выбирает еду. Затем сотрудник проверяет заказ на наличие проблем, проводит оплату и отправляет необходимые данные повару (Модель). Шеф готовит еду, но не знает, как выглядит посетитель и осуществил ли он оплату.

Когда Модель завершает работу, она отправляет результат в Представление – сотруднику ресторана, который передает готовое блюдо потребителю.

В приложениях разделы выглядят иначе:

  • Представление – интерфейс.
  • Контроллер – устройство, которое обрабатывает действия пользователя (нажатие кнопок, заполнение полей, переход по ссылке).
  • Модель – инициируемый контролером процесс, осуществляющий проведение всех операций (выполнение вычислений, получение информации из хранилища данных).

В разных задачах реализация MVC может отличаться. Так, в приложении Модель сама может сообщать Представлению, что что-то изменилось, а при веб-разработке они взаимодействуют через Контроллер.

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

Пример MVC
Пример MVC

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

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

Использование MVC пошагово

Все вышеуказанное ведет к логичному вводу: сложные системы необходимо делить на модули.

Ниже приведен краткий обзор шагов по достижению такой разбивки.

Шаг 1: разделение бизнес-логики приложения от пользовательского интерфейса

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

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

Первый модуль реализует основную функциональность приложения. Он является ядром системы. Эта та самая буква М в концепции MVC.

Дарим скидку от 60%
на обучение «Инженер-программист» до 05 мая
Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей
Забронировать скидку

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

Шаг 2: повышение независимости модели и синхронизация пользовательского интерфейса с помощью использования шаблона Наблюдатель

На данном этапе реализуется одновременно две цели:

  • укрепление независимости модели;
  • синхронизация пользовательского интерфейса.

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

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

Использование MVC пошагово
Использование MVC пошагово

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

Одновременно места на сайте выбирают два пользователя.

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

Как этого можно достичь?

Если мы обновим интерфейс из ядра системы, получается, что Модель будет зависеть от интерфейса. Это добавляет лишние, ненужные действия. Придется помнить о различных способах обновления интерфейса при разработке и тестировании Модели.

Проще всего сделать шаблон Наблюдатель. Он используется для уведомления всех пользователей об изменениях. В качестве такого подписчика интерфейс уведомляется и автоматически обновляется.

С помощью шаблона Наблюдатель Модели уведомляет интерфейс (Представление и Контроллер) о том, что произошли изменения. При этом, она останется независимой от этого процесса, поскольку не осведомлена о происходящих действиях.

Шаг 3: разбивка интерфейса на Представление и Контроллер

Это тоже своего рода деление приложения, только уже более централизованное. Здесь разделяется на Представление и Контроллер тот самый пользовательский интерфейс, который был обособлен в шаге 1.

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

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

Поэтому в данном случае необходимо провести функциональное разделение. У интерфейса есть главная задача – позволить пользователю взаимодействовать с системой, а значит, он обладает лишь двумя функциями:

  • удобное отображение информации о системе;
  • ввод данных и команд пользователя в программу (передача их в систему).
Только до 6.05
Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней
Список документов:
ТОП-100 площадок для поиска работы от GeekBrains
20 профессий 2023 года, с доходом от 150 000 рублей
Чек-лист «Как успешно пройти собеседование»
Чтобы получить файл, укажите e-mail:
Введите e-mail, чтобы получить доступ к документам
Подтвердите, что вы не робот,
указав номер телефона:
Введите телефон, чтобы получить доступ к документам
Уже скачали 52300

Эти функции не связаны друг с другом, но они определяют, как грамотно разделить интерфейс.

Таким образом, мы имеем приложение, состоящее из трех модулей, называемых Модель, Представление и Контроллер.

Альтернативные паттерны

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

Так, например, MVVM (сокращение от Model-View-Viewmodel) наиболее ориентирован на современные платформы разработки. Он означает Модель, Представление и Модель представления. Вместо Контроллера используется Viewmodel. Это своего рода надстройка к Представлению, которая связывает его с данными таким образом, что разработчикам не нужно писать логику для обработки команд пользователя и обновления интерфейса.

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

Альтернативные паттерны
Альтернативные паттерны

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

В MVP (Model-View-Presenter) вместо Контролера есть Презентатор.

Основное отличие MVP и MVC в том, что в MVC обновлённая Модель сама говорит Представлению, что нужно показать другие данные. Если же этого не происходит и приложению нужен посредник в виде Представителя, то паттерн стоит называть MVP. В нем разделы расположены линейно. На обоих концах есть Модель и Представление, а в середине находится Презентатор. Он отвечает за всю логику обработки информации и команд пользователя, а также за обновление интерфейса.

В этом случае Представление пассивно. Оно занимается лишь выведением на экран информации. В MVC за форматирование вывода может отвечать Представление, а вот в MVP за это отвечает Презентатор.

У такого подхода есть неоспоримое преимущество: никогда не возникает вопроса, к чему относится тот или иной код. Недостатком является то, что Презентатор быстро разрастается в большую и сложную систему. Для корректной работы приходится делить его на более мелкие модули, а иногда даже добавлять «слои».

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

Готовы создать уникальные пространства, которые олицетворяют стиль и функциональность? Знакомство с дизайном интерьеров начинается с нашего курса. Изучите принципы проектирования и оформления помещений, научитесь работать с профессиональными инструментами: ArchiCAD, 3D Maxs, Photoshop, InDesign. Станьте дизайнером интерьеров, о котором мечтают клиенты.
Оцените статью
Рейтинг: 5
( голосов 1 )
Поделиться статьей
Добавить комментарий

Сортировать:
По дате публикации
По рейтингу
До конца акции осталось
0 дней 00:00:00
Дарим скидку 64% на обучение «Разработчик»
  • Получите новую профессию с гарантией трудоустройства
  • Начните учиться бесплатно, 3 месяца обучения в подарок
Забронировать скидку на обучение
Забрать подарок

Получите подробную стратегию для новичков на 2023 год, как с нуля выйти на доход 200 000 ₽ за 7 месяцев

Подарки от Geekbrains из закрытой базы:
Осталось 17 мест

Поздравляем!
Вы выиграли 4 курса по IT-профессиям.
Дождитесь звонка нашего менеджера для уточнения деталей

Иван Степанин
Иван Степанин печатает ...