В процессе разработки объектно-ориентированного программирования , модель-представление-контроллер (MVC) - это методология или шаблон проектирования, который помогает вам эффективно и успешно связывать пользовательский интерфейс с базовыми моделями данных. В этой статье мы узнаем о Архитектура MVC в следующей последовательности:
Архитектура JavaScript MVC
В последнее время шаблон MVC применяется к широкому спектру языков программирования, включая . JavaScript состоит из ряда фреймворков для поддержки архитектуры MVC или ее вариантов. Это позволяет разработчикам легко и без особых усилий добавлять структуру в свои приложения.
MVC состоит из трех компонентов:
- Модель
- Посмотреть
- Контроллер
Теперь давайте продолжим и углубимся в эти три компонента JavaScript MVC.
Модели
Модели используются для управления данными для приложения. Они не связаны с пользовательским интерфейсом или уровнями представления. Вместо этого они представляют уникальные формы данных, которые могут потребоваться приложению. Когда модель изменяется или обновляется, она обычно уведомляет своих наблюдателей о произошедшем изменении, чтобы они могли действовать соответствующим образом.
Давайте возьмем пример упрощенной модели, реализованной с использованием Backbone:
var Photo = Backbone.Model.extend ({// Атрибуты по умолчанию для фотографий по умолчанию: {src: 'placeholder.jpg', caption: 'Изображение по умолчанию', просмотрено: false}, // Убедитесь, что каждая созданная фотография имеет `src`. initialize: function () {this.set ({'src': this.defaults.src})}})В фотогалерее концепция фотографии заслуживает отдельной модели, поскольку она представляет собой уникальный вид данных, специфичных для предметной области. Такая модель может содержать связанные атрибуты, такие как заголовок, источник изображения и дополнительные метаданные. В приведенном выше примере конкретная фотография будет храниться в экземпляре модели.
Взгляды
Представления - это визуальное представление моделей, обеспечивающее отфильтрованное представление их текущего состояния. Представления JavaScript используются для создания и поддержки элемента DOM. Представление обычно наблюдает за моделью и получает уведомление при изменении модели, позволяя представлению обновляться соответствующим образом. Например:
что такое печатник в Java
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Мы используем библиотека шаблонов, такая как Underscore // templating, которая генерирует HTML для нашей // записи фотографии photoEl.innerHTML = _.template ('#photoTemplate', {src: photoModel.getSrc ()})} photoModel.addSubscriber (render) photoEl. addEventListener ('click', function () {photoController.handleEvent ('click', photoModel)}) var show = function () {photoEl.style.display = ''} var hide = function () {photoEl.style.display = 'none'} return {showView: show, hideView: hide}}Преимущество этой архитектуры состоит в том, что каждый компонент играет свою отдельную роль в обеспечении функционирования приложения по мере необходимости.
Контроллеры
Контроллеры действуют как промежуточные звенья между моделями и представлениями, которые отвечают за обновление модели, когда пользователь манипулирует представлением. В приведенном выше примере нашего приложения фотогалереи контроллер будет отвечать за обработку изменений, внесенных пользователем в представление редактирования для конкретной фотографии, обновление конкретной модели фотографии, когда пользователь завершит редактирование.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('destroy', this.proxy (this .remove))}, render: function () {// Обработка шаблонов this.replace ($ ('#photoTemplate') .tmpl (this.item)) return this}, remove: function () {this.el.remove () this.release ()}})Этот пример предоставит вам очень легкий и простой способ управления изменениями между моделью и представлением.
Фреймворки JavaScript MVC
За последние несколько лет серия JavaScript MVC были разработаны. Каждая из этих сред следует некоторой форме шаблона MVC с целью поощрения разработчиков к написанию более структурированного кода JavaScript. Некоторые из фреймворков:
- backbone.js
- Ember.js
- AngularJS
- Сенча
- Кендо UI
На этом мы подошли к концу статьи о JavaScript MVC. Надеюсь, вы поняли три компонента, задействованные в архитектуре MVC.
Теперь, когда вы знаете о JavaScript MVC, ознакомьтесь с пользователя Edureka. Курс по сертификации веб-разработки поможет вам научиться создавать впечатляющие веб-сайты с использованием HTML5, CSS3, Twitter Bootstrap 3, jQuery и API Google и развертывать их в Amazon Simple Storage Service (S3).
Есть вопрос к нам? Пожалуйста, укажите это в разделе комментариев «JavaScript MVC», и мы свяжемся с вами.