Что такое фреймворк mvc

Обновлено: 22.11.2024

MVC — это сокращение от Model, View и Controller. MVC — популярный способ организации кода. Основная идея MVC заключается в том, что у каждого раздела вашего кода есть цель, и эти цели разные. Часть вашего кода содержит данные вашего приложения, часть вашего кода делает ваше приложение красивым, а часть вашего кода управляет работой вашего приложения.

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

Части MVC

Модель. Код модели обычно отражает реальные вещи. Этот код может содержать необработанные данные или определять основные компоненты вашего приложения. Например, если вы создаете приложение Todo, код модели будет определять, что такое «задача» и что такое «список», поскольку это основные компоненты приложения todo. Представление: код представления состоит из всех функций, которые непосредственно взаимодействуют с пользователем. Это код, который делает ваше приложение красивым и определяет то, как ваш пользователь видит его и взаимодействует с ним. Контроллер: код контроллера действует как связующее звено между моделью и представлением, получая пользовательский ввод и решая, что с ним делать. Это мозг приложения, который связывает воедино модель и представление.

Аналогия

MVC — это способ понять, как работает веб-приложение.

Это похоже на приготовление ужина на День Благодарения. У вас есть холодильник, полный еды, как у Модели. В холодильнике (Модель) есть сырье, которое мы будем использовать для приготовления обеда.

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

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

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

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

Например, давайте представим, что вы создаете приложение со списком дел. Это приложение позволит пользователям создавать задачи и организовывать их в списки.

Модель в приложении todo может определять, что такое «задача» и что «список» — это набор задач.

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

Наконец, Контроллер может определить, как пользователь добавляет задачу или помечает другую как завершенную. Контроллер подключает кнопку добавления Представления к Модели, поэтому, когда вы нажимаете «добавить задачу», Модель добавляет новую задачу.

Подведение итогов

MVC — это платформа для размышлений о программировании и организации файлов вашей программы. Чтобы обозначить идею о том, что ваш код должен быть организован по его функциям, разработчики будут создавать папки для каждой части MVC. (Идея о том, что приложения должны быть разделены на основе функции каждой части кода, иногда называется разделением задач). Если вы смотрели на Codecademy Ruby в курсе Rails вы, возможно, заметили, что в каждом приложении Rails, которое он представляет, есть папка для каждой части MVC.

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

Размышление о том, как код взаимодействует с другим кодом, является важной частью программирования, а умение сотрудничать с другими разработчиками — важный навык. Если вы потратите время на то, чтобы подумать о том, как ваше приложение вписывается в структуру MVC, это повысит ваши навыки разработчика, научив вас обоим. Это также улучшит ваши приложения!

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

В этом руководстве по MVC вы узнаете больше об основах MVC-

История MVC

  • Архитектура MVC впервые была рассмотрена Трюгве Реенскаугом в 1979 году.
  • Модель MVC впервые была представлена ​​в 1987 году в языке программирования Smalltalk.
  • Впервые концепция MVC была принята в качестве общей концепции в статье 1988 года.
  • В последнее время шаблон MVC широко используется в современных веб-приложениях.

Возможности MVC

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

Вот подробная архитектура фреймворка MVC:

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

Давайте подробно рассмотрим этот компонент:

Представление — это часть приложения, которая представляет данные.

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

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

Контроллер

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

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

Модель

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

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

Примеры MVC

Давайте рассмотрим пример Model View Controller из повседневной жизни:

Пример 1:

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

В этом примере архитектуры MVC

Давайте посмотрим еще один пример модели MVC,

Пример 2:

Привод автомобиля — еще один пример модели MVC.

  • Каждый автомобиль состоит из трех основных частей.
  • Вид= Пользовательский интерфейс: (рычаг переключения передач, панели, рулевое колесо, тормоз и т. д.)
  • Контроллер-механизм (движок)
  • Модель — Хранение (бак для бензина или дизельного топлива)

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

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

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

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

Пример контроллера представления модели

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

Модель

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

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

Вид

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

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

Контроллер

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

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

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

MVC в Интернете

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

Рафаэль Д. Эрнандес

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

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

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

Что такое MVC?

MVC означает модель-представление-контроллер. Вот что означает каждый из этих компонентов:

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

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

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

Три слова: разделение задач, или сокращенно SoC.

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

Но это легче сказать, чем сделать, особенно когда нескольким разработчикам необходимо одновременно обновлять, изменять или отлаживать полноценное приложение.

Как использовать MVC

Чтобы лучше проиллюстрировать шаблон MVC, я включил веб-приложение, которое показывает, как работают все эти концепции.

Приложение My Car Clicker – это разновидность известного приложения Cat Clicker.

Вот некоторые основные отличия моего приложения:

  1. Никаких кошек, только изображения маслкаров (извините, любители кошек!)
  2. Перечислено несколько моделей автомобилей.
  3. Счетчиков кликов несколько.
  4. Отображает только выбранный автомобиль.

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

Модель (данные)

Задачей модели является простое управление данными. Будь то данные из базы данных, API или объекта JSON, за управление ими отвечает модель.

В приложении Car Clicker объект модели содержит массив объектов автомобиля со всей информацией (данными), необходимой для приложения.

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

Просмотры (пользовательский интерфейс)

Задача представления — решить, что и как пользователь увидит на своем экране.

Приложение Car Clicker имеет два представления: carListView и CarView .

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

В этих функциях приложение решает, что и как увидит пользователь.

carListView

Просмотр автомобиля

Контроллер (мозг)

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

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

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

Структуры MVC

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

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

Некоторыми из первых платформ, в которых применялись эти концепции, были KnockoutJS, Django и Ruby on Rails.

Заключение

Наиболее привлекательной концепцией шаблона MVC является разделение ответственности.

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

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

**Если вы хотите взглянуть на приложение Car Clicker, код доступен на GitHub или ознакомьтесь с активной версией здесь.**

🌟Спасибо, что дочитали до этого места!🌟

Рафаэль Д. Эрнандес

Веб-разработчик | Руководитель международных языковых переводов в @freeCodeCamp

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

Научитесь программировать бесплатно. Учебная программа freeCodeCamp с открытым исходным кодом помогла более чем 40 000 человек получить работу в качестве разработчиков. Начать

freeCodeCamp – это поддерживаемая донорами некоммерческая организация, освобожденная от налогов в соответствии со статьей 501(c)(3) (идентификационный номер федерального налогоплательщика США: 82-0779546)

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

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

Читайте также: