V procese vývoja objektovo orientované programovanie , model-view-controller (MVC) je metodika alebo návrhový vzor, ktorý vám pomôže pri efektívnom a úspešnom prepojení používateľského rozhrania so základnými údajovými modelmi. V tomto článku sa dozvieme o Architektúra MVC v nasledujúcom poradí:
Architektúra JavaScript MVC
V poslednej dobe sa vzor MVC aplikuje na rozmanitú škálu programovacích jazykov vrátane . JavaScript pozostáva z niekoľkých rámcov na podporu architektúry MVC alebo jej variácií. Umožňuje vývojárom ľahko a bez veľkého úsilia pridať štruktúru svojich aplikácií.
MVC sa skladá z troch komponentov:
- Model
- vyhliadka
- Kontrolór
Poďme teraz a poďme k hĺbke týchto troch komponentov JavaScript MVC.
ec2 vytvoriť inštanciu zo snímky
Modely
Na správu údajov aplikácie sa používajú modely. Nezaoberajú sa používateľským rozhraním ani prezentačnými vrstvami. Namiesto toho predstavujú jedinečné formy údajov, ktoré môže aplikácia vyžadovať. Keď sa model zmení alebo aktualizuje, zvyčajne upozorní svojich pozorovateľov na zmenu, ku ktorej došlo, aby mohli podľa toho konať.
Uveďme si príklad zjednodušeného modelu implementovaného pomocou chrbtovej kosti:
var Photo = Backbone.Model.extend ({// Predvolené atribúty pre predvolené nastavenia fotografie: {src: 'placeholder.jpg', titulok: 'A default image', zobrazené: false}, // Zaistite, aby každá vytvorená fotografia mala `src`. initialize: function () {this.set ({'src': this.defaults.src})}})Vo fotogalérii by si koncept fotografie zaslúžil vlastný model, pretože predstavuje jedinečný druh údajov špecifických pre doménu. Takýto model môže obsahovať súvisiace atribúty, ako sú napríklad titulky, zdroj obrázkov a ďalšie metadáta. V uvedenom príklade by sa konkrétna fotografia uložila v inštancii modelu.
Názory
Pohľady sú vizuálnym znázornením modelov, ktoré poskytujú filtrovaný pohľad na ich aktuálny stav. Zobrazenia JavaScriptu sa používajú na vytváranie a údržbu prvku DOM. Pohľad zvyčajne sleduje model a je informovaný, keď sa model zmení, čo mu umožňuje príslušne sa aktualizovať. Napríklad:
ako vytvoriť pole objektov
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Používame a šablónová knižnica, ako napríklad Podčiarknutie // šablóna, ktorá generuje HTML pre náš // vstup fotografií 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'} návrat {showView: show, hideView: hide}}Výhodou tejto architektúry je, že každý komponent zohráva svoju samostatnú úlohu pri zabezpečovaní funkčnosti aplikácie podľa potreby.
Kontrolóri
Ovládače fungujú ako medzičlánky medzi modelmi a zobrazeniami, ktoré sú zodpovedné za aktualizáciu modelu, keď používateľ manipuluje so zobrazením. Vo vyššie uvedenom príklade našej aplikácie fotogalérie bude zodpovedný za spracovanie zmien, ktoré používateľ vykonal v zobrazení úprav konkrétnej fotografie, aktualizáciu konkrétneho modelu fotografie, keď používateľ dokončí úpravy.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('zničiť', this.proxy (toto .remove))}, render: function () {// Zaobchádzajte so šablónami this.replace ($ ('#photoTemplate') .tmpl (this.item)) vráťte to}, remove: function () {this.el.remove () this.release ()}})Tento príklad vám poskytne veľmi ľahký a jednoduchý spôsob riadenia zmien medzi modelom a zobrazením.
Rámec MVC pre JavaScript
V posledných niekoľkých rokoch rad JavaScript MVC boli vyvinuté. Každý z týchto rámcov sleduje určitú formu vzoru MVC s cieľom povzbudiť vývojárov, aby napísali štruktúrovanejší kód JavaScript. Niektoré z rámcov sú:
- backbone.js
- Ember.js
- AngularJS
- Sencha
- Používateľské rozhranie Kendo
Týmto sme sa dostali na koniec článku JavaScript MVC. Dúfam, že ste pochopili tri komponenty zahrnuté v architektúre MVC.
čo je indexof v javascript
Teraz, keď viete o JavaScript MVC, pozrite sa na od Edureka. Osvedčenie o školení v oblasti vývoja webových stránok vám pomôže naučiť sa, ako vytvárať pôsobivé webové stránky pomocou HTML5, CSS3, Twitter Bootstrap 3, jQuery a Google API a ako ich nasadiť do služby Amazon Simple Storage Service (S3).
Máte na nás otázku? Uveďte to prosím v sekcii komentárov „JavaScript MVC“ a my sa vám ozveme.