что это такое и как пользоваться

Скопировано

Содержание

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

• Модель (Model). Это основная логика приложения. Отвечает за данные, методы работы с ними и структуру программы. Модель реагирует на команды из контроллера и выдает информацию и/или изменяет свое состояние. Она передает данные в представление.
• Представление (View). Задача компонента — визуализация информации, которую он получает от модели. View отображает данные на уровне пользовательского интерфейса. Например, в виде таблицы или списка. Представление определяет внешний вид приложения и способы взаимодействия с ним.
• Контроллер (Controller). Он обеспечивает взаимодействие с системой: обрабатывает действия пользователя, проверяет полученную информацию и передает ее модели. Контроллер определяет, как приложение будет реагировать на действия пользователя. Также контроллер может отвечать за фильтрацию данных и авторизацию.

Логическая схема MVC-приложения

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

Компоненты модели различаются степенью зависимости друг от друга и ограничениями:

• модель не зависит от представления и контроллера, но и не может использовать классы из их разделов;
• представление может обращаться к модели за данными и событиями, но не может ее менять;
• контроллер не может отображать данные, но способен менять модель в зависимости от действий пользователя.

Концепцию MVC предложил в конце 1970-х годов сотрудник Xerox Трюгве Реекскауг. Она была реализована в языке программирования Smalltalk-80. Окончательную версию шаблона опубликовали только 10 лет спустя в журнале Technology Object. Концепция стала популярна с появлением быстро развертываемых фреймворков и интерактивных веб-приложений. 

Как работает MVC

Разберем на реальном примере. Условная физическая модель MVC-архитектуры — персональный компьютер, в котором:

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

На этом примере легче понять зависимость компонентов друг от друга:

• если заменить системный блок (без переноса старых данных), но оставить старый монитор и клавиатуру, пользователь получит другой компьютер с новой ОС, файлами, системными характеристиками, драйверами и т.д.;
• если поменять монитор и клавиатуру, но оставить старый системный блок, человек будет использовать прежнюю ОС, файлы, системные характеристики. Изменения коснутся только некоторых драйверов.

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

Назначение модели MVC

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

Модель MVC решает следующие задачи:

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

В более широком плане внедрение модели помогает:

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

Примеры MVC в веб-разработке

Разберем использование MVC в веб-фреймворках на примере социальной сети.

Контроллер

Пользователь заходит на сайт социальной сети и кликает на ссылку «Друзья», отправляя запрос на сервер.

website.com/profile/ —> возвращает ваш профиль

website.com/friends/ —> возвращает список друзей

website.com/friend={userName}/ —> возвращает конкретного друга

Модель

На сервере приложение обрабатывает запрос, извлекает из базы данных список друзей пользователя.

User:
{
userName: {
firstName,
lastName
},
friends

}

Представление

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

<ul>
<li>Friend 1: {friendList[0].userName}</li>
<li>Friend 2: {friendList[1].userName}</li>
<li>Friend 3: {friendList[2].userName}</li>
…
</ul>

Концепция MVC с успехом используется в веб-разработке благодаря универсальности, гибкости и простоте применения. В то же время она имеет ограничения. Это привело к появлению более специализированных вариантов реализации MVC, таких как Model-View-Presenter (WMVP) и Model-View-ViewModel (MVVM). 

Скопировано

Что такое MVC: рассказываем простыми словами

Современные сайты интерактивные и динамичные — они реагируют на действия пользователя, обрабатывают его запросы и выдают результат. Так работают многие онлайн-сервисы, например, интернет-банкинги или онлайн-кинотеатры. Для создания интерактивных и динамичных сайтов обычно используется архитектурный паттерн MVC. Рассказываем простыми словами, в чем суть этой модели.

• Что такое модель MVC: теория
• Разбираем MVC на примере магазина сэндвичей
• Паттерн MVC в реальной веб-разработке: как работает контроллер
• Модель
• Представление
• Заключение

Что такое модель MVC: теория

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

MVC расшифровывается как «модель-представление-контроллер» (от англ. model-view-controller). Это способ организации кода, который предполагает выделение блоков, отвечающих за решение разных задач. Один блок отвечает за данные приложения, другой отвечает за внешний вид, а третий контролирует работу приложения.

Компоненты MVC:

• Модель — этот компонент отвечает за данные, а также определяет структуру приложения. Например, если вы создаете To-Do приложение, код компонента model будет определять список задач и отдельные задачи.
• Представление — этот компонент отвечает за взаимодействие с пользователем. То есть код компонента view определяет внешний вид приложения и способы его использования.
• Контроллер — этот компонент отвечает за связь между model и view. Код компонента controller определяет, как сайт реагирует на действия пользователя. По сути, это мозг MVC-приложения.

Станьте профессиональным PHP-разработчиком с нуля за 10 месяцев
На Хекслете есть профессия «PHP-разработчик». Пройдите ее, чтобы изучить один из самых известных языков программирования, освоить популярные фреймворки и создать большое портфолио с проектами на GitHub.

Разбираем MVC на примере магазина сэндвичей

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

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

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

Покупку бутерброда можно описать через MVC:

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

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

Точно так же можно представить взаимодействие с сайтом. Когда вы заходите на сайт Хекслета и переходите по ссылке «Истории успеха», то заранее представляете результат перехода по ссылке. Это список текстов с историями ребят, которые учились на Хекслете, а потом стали разработчиками.

Когда вы нажимаете на ссылку «Истории успеха», на наш сервер уходит запрос. В нём содержится просьба показать вам список текстов. Это очень похоже на просьбу продать вам бутерброд с индейкой. Это контроллер.

На сервере Хекслета ваш запрос обрабатывается. Программа достаёт из базы данных все последние тексты из рубрики «Истории успеха», чтобы показать список. Это можно сравнить с кухней и поварами из примера с сэндвичем. Это модель.

Сервер Хекслета берёт нужные ингредиенты из базы данных и готовит ваш заказ: список текстов. Тем же занимались повара на кухне магазина сэндвичей. Это снова представление или view.

Изучайте фронтенд- и бэкенд-разработку на JavaScript
На Хекслете есть профессии «Фронтенд-программист» и «Node.js-программист». В процессе обучения на этих профессиях вы научитесь программировать на JavaScript, изучите современные инструменты для разработки фронтенд- и бэкенд-приложений, включая React, Redux, Express.js, Koa, PostgreSQL. Первые курсы в профессиях доступны бесплатно.

Паттерн MVC в реальной веб-разработке: как работает контроллер

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

Переход по ссылке website(.)com/profile/ -> 
возвращает profilewebsite(.)com/friends/ -> 
возвращает friendswebsite(.)com/friend={userName}/ -> 
возвращает профиль конкретного друга

Модель

Модель отвечает за данные, которые хранятся и обрабатываются на сервере.

User: { userName: { firstName, lastName }, friends }

Представление

Это HTML-шаблон, который возвращает сервер после обработки запроса. Если запрос корректно обрабатывается, вы получаете веб-страницу со списком друзей. Если запрос некорректный, вы попадаете на страницу ошибки 404.

<ul>  
  <li>Friend 1: {friendList[0].userName}</li>  
  <li>Friend 2: {friendList[1].userName}</li>  
  <li>Friend 3: {friendList[2].userName}</li>  
  ...
</ul>

Заключение

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

Это адаптированный перевод статьи What is MVC, and how is it like a sandwich shop?

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

MVC — Глоссарий веб-документов MDN: определения терминов, связанных с Интернетом

MVC (модель-представление-контроллер) — это шаблон в разработке программного обеспечения, обычно используемый для реализации пользовательских интерфейсов, данных и управляющей логики. Он подчеркивает разделение между бизнес-логикой программного обеспечения и отображением. Это «разделение обязанностей» обеспечивает лучшее разделение труда и улучшение технического обслуживания. Некоторые другие шаблоны проектирования основаны на MVC, например MVVM (Model-View-Viewmodel), MVP (Model-View-Presenter) и MVW (Model-View-Whatever).

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

1. Модель: управляет данными и бизнес-логикой.
2. Вид: управляет компоновкой и отображением.
3. Контроллер: Направляет команды к модели и частям вида.

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

Модель

Модель определяет, какие данные должно содержать приложение. Если состояние этих данных изменяется, то модель обычно уведомляет представление (поэтому отображение может меняться по мере необходимости) и иногда контроллер (если для управления обновленным представлением требуется другая логика).

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

Вид

Представление определяет способ отображения данных приложения.

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

Контроллер

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

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

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

Будучи веб-разработчиком, этот шаблон, вероятно, будет вам хорошо знаком, даже если вы никогда сознательно не использовали его раньше. Ваша модель данных, вероятно, содержится в какой-либо базе данных (будь то традиционная база данных на стороне сервера, такая как MySQL, или решение на стороне клиента, такое как IndexedDB [en-US]. ) Управляющий код вашего приложения, вероятно, написан на HTML/JavaScript. , и ваш пользовательский интерфейс, вероятно, написан с использованием HTML/CSS или чего-то еще, что вам нравится. Это очень похоже на MVC, но MVC заставляет эти компоненты следовать более строгому шаблону.

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

Веб-фреймворки, такие как AngularJS и Ember.js, реализуют архитектуру MVC, хотя и немного по-разному.

• Модель-представление-контроллер в Википедии

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Посмотреть исходный код на GitHub.

Хотите принять больше участия?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 21 февраля 2023 г. участниками MDN.

Все, что вам нужно знать об архитектуре MVC | Занфина Свирца

Общее объяснение того, как работает MVC.

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

История

Трюгве Реенскауг изобрел MVC. Первые отчеты о MVC были написаны, когда он был в гостях у ученого в исследовательской лаборатории Xerox в Пало-Альто (PARC) в 1919 году. 78/79. Сначала MVC назывался «Редактор представления модели вещи», но быстро изменил его на «Контроллер представления модели».

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

Оригинальный MVC

В настоящее время MVC используется для разработки веб-приложений. Некоторые веб-фреймворки, использующие концепцию MVC: Ruby on Rails, Laravel, Zend framework, CherryPy, Symphony и т. д.

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

Он состоит из трех основных компонентов:
-Модель
-Вид
-Контроллер
, и у каждого из них есть определенные обязанности.

Архитектура MVC

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

Модель

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

Представление

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

Контроллер

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

Преимущества MVC

— Архитектура MVC будет отделять пользовательский интерфейс от бизнес-логики и бизнес-логики
— Компоненты можно использовать повторно.

This entry was posted in Популярное