В процеса на разработване на обектно-ориентирано програмиране , model-view-controller (MVC) е методология или модел на проектиране, който ви помага ефективно и успешно да свържете потребителския интерфейс с основните модели данни. В тази статия ще научим за MVC архитектура в следната последователност:
JavaScript MVC архитектура
В последно време моделът на MVC се прилага към разнообразен набор от езици за програмиране, включително . JavaScript се състои от множество рамки, които да поддържат MVC архитектура или вариации върху нея. Той позволява на разработчиците да добавят структура към своите приложения лесно и без много усилия.
MVC се състои от три компонента:
- Модел
- Изглед
- Контролер
Сега нека продължим напред и да вникнем в дълбочината на тези три компонента на JavaScript MVC.
десетичен към двоичен питонов код
Модели
Моделите се използват за управление на данните за приложение. Те не се занимават с потребителския интерфейс или презентационните слоеве. Вместо това те представляват уникални форми на данни, които дадено приложение може да изисква. Когато даден модел се промени или актуализира, той обикновено уведомява своите наблюдатели за настъпилата промяна, за да могат да действат по съответния начин.
Нека вземем пример за опростен модел, реализиран с помощта на Backbone:
var Photo = Backbone.Model.extend ({// Атрибути по подразбиране за снимките по подразбиране: {src: 'placeholder.jpg', надпис: 'Изображение по подразбиране', прегледано: false}, // Уверете се, че всяка създадена снимка има `src`. инициализиране: функция () {this.set ({'src': this.defaults.src})}})Във фотогалерията концепцията за снимка би заслужила свой собствен модел, тъй като представлява уникален вид специфични за домейна данни. Такъв модел може да съдържа свързани атрибути като надпис, източник на изображение и допълнителни метаданни. В горния пример конкретна снимка ще бъде съхранена в екземпляр на модел.
Изгледи
Изгледите са визуално представяне на модели, които осигуряват филтриран изглед на текущото им състояние. Изгледите на JavaScript се използват за изграждане и поддържане на DOM елемент. Изгледът обикновено наблюдава модел и се известява, когато моделът се промени, което позволява на изгледа да се актуализира съответно. Например:
претоварване срещу заместване на c ++
var buildPhotoView = функция (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'} връщане {showView: show, hideView: hide}}Предимството на тази архитектура е, че всеки компонент играе своя собствена роля в създаването на функцията на приложението според нуждите.
Контролери
Контролерите действат като междинни продукти между модели и изгледи, които отговарят за актуализирането на модела, когато потребителят манипулира изгледа. В горния пример за нашето приложение за фотогалерия контролер ще отговаря за обработката на промените, направени от потребителя в изгледа за редактиране на конкретна снимка, като актуализира конкретен фотомодел, когато потребителят приключи с редактирането.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('унищожи', this.proxy (този .remove))}, render: function () {// Обработете шаблониране this.replace ($ ('#photoTemplate') .tmpl (this.item)) return this}, премахнете: function () {this.el.remove () this.release ()}})Този пример ще ви предостави много лек, лесен начин за управление на промените между модела и изгледа.
JavaScript MVC Frameworks
През последните няколко години, поредица от JavaScript MVC бяха разработени. Всяка една от тези рамки следва някаква форма на MVC модел с цел да насърчи разработчиците да напишат по-структуриран JavaScript код. Някои от рамките са:
- backbone.js
- Ember.js
- AngularJS
- Сенча
- Кендо потребителски интерфейс
С това стигнахме до края на статията за JavaScript MVC. Надявам се, че сте разбрали трите компонента, включени в архитектурата на MVC.
конвертира датата на низа в дата в Java
След като вече знаете за JavaScript MVC, разгледайте от Edureka. Обучението за сертифициране на уеб разработки ще ви помогне да научите как да създавате впечатляващи уебсайтове с помощта на HTML5, CSS3, Twitter Bootstrap 3, jQuery и Google API и да го разположите в Amazon Simple Storage Service (S3).
Имате въпрос към нас? Моля, споменете го в раздела за коментари на „JavaScript MVC“ и ние ще се свържем с вас.