A fejlesztési folyamatban objektumorientált programozás , a modell-nézet-vezérlő (MVC) egy módszertan vagy tervezési minta, amely segít a felhasználói felület hatékony és sikeres összekapcsolásában az alapul szolgáló adatmodellekkel. Ebben a cikkben megismerjük a MVC architektúra a következő sorrendben:
JavaScript MVC architektúra
A közelmúltban az MVC mintát a programozási nyelvek széles skálájára alkalmazzák, beleértve a . A JavaScript számos keretrendszerből áll, amelyek támogatják az MVC architektúráját vagy annak variációit. Ez lehetővé teszi a fejlesztők számára, hogy könnyedén és különösebb erőfeszítés nélkül struktúrát adhassanak alkalmazásaikhoz.
Az MVC három komponensből áll:
- Modell
- Kilátás
- Vezérlő
Most lépjünk tovább, és térjünk át a három JavaScript MVC-komponens mélységére.
dobj duplát egy int
Modellek
A modellek egy alkalmazás adatainak kezelésére szolgálnak. Nem foglalkoznak a felhasználói felülettel vagy a bemutató rétegekkel. Ehelyett olyan egyedi adatformákat jelentenek, amelyekre egy alkalmazásnak szüksége lehet. Amikor egy modellt megváltoztatnak vagy frissítenek, általában értesíti a megfigyelőket a bekövetkezett változásról, hogy ennek megfelelően cselekedhessenek.
Vegyünk egy példát egy egyszerűsített modellre, amelyet a Backbone segítségével valósítottunk meg:
var Photo = Gerinc.Model.extend ({// A fotó alapértelmezett attribútumai az alapértelmezett értékek: {src: 'placeholder.jpg', felirat: 'Alapértelmezett kép', megtekintve: hamis}, // Győződjön meg arról, hogy minden létrehozott fényképhez tartozik egy `src`. inicializálás: function () {this.set ({'src': this.defaults.src})}}Egy fotógalériában a fénykép koncepciója megérdemelné a saját modelljét, mivel egyedi típusú tartományspecifikus adatokat képvisel. Egy ilyen modell tartalmazhat kapcsolódó attribútumokat, például feliratot, képforrást és további metaadatokat. A fenti példában egy adott fotó egy modell példányában kerül tárolásra.
Nézetek
A nézetek azoknak a modelleknek a vizuális ábrázolása, amelyek szűrt nézetet nyújtanak aktuális állapotukról. A JavaScript nézetek egy DOM elem felépítésére és karbantartására szolgálnak. A nézet általában megfigyeli a modellt, és értesítést kap, ha a modell megváltozik, így a nézet ennek megfelelően frissülhet. Például:
java konvertálja a bináris tizedessé
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Egy sablonkönyvtár, például Aláhúzás // sablon, amely létrehozza a HTML-t a // fotóbejegyzéshez 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}}Ennek az architektúrának az az előnye, hogy minden egyes komponens különálló szerepet játszik az alkalmazás szükség szerinti működésében.
Vezérlők
A vezérlők úgy viselkednek, mint a modellek és nézetek közötti köztes termékek, amelyek felelősek a modell frissítéséért, amikor a felhasználó manipulálja a nézetet. Fotógaléria alkalmazásunk fenti példájában egy vezérlő felel a felhasználó módosításainak kezeléséért egy adott fotó szerkesztési nézetében, egy adott fotómodell frissítéséért, amikor a felhasználó befejezte a szerkesztést.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('megsemmisíteni', ezt.proxy (ezt .remove))}, render: function () {// A this.replace sablonjának kezelése ($ ('#photoTemplate') .tmpl (this.item)) adja vissza ezt}, távolítsa el: function () {this.el.remove () this.release ()}})Ez a példa nagyon könnyű, egyszerű módszert kínál a modell és a nézet közötti változások kezelésére.
JavaScript MVC keretrendszerek
Az elmúlt években JavaScript MVC sorozat ki lett fejlesztve. Ezen keretek mindegyike követi az MVC mintázat valamilyen formáját azzal a céllal, hogy arra ösztönözze a fejlesztőket, hogy strukturáltabb JavaScript kódot írjanak. Néhány keretrendszer a következő:
- backbone.js
- Ember.js
- SzögletesJS
- Sencha
- Kendo felhasználói felület
Ezzel a JavaScript MVC cikk végére értünk. Remélem, megértette az MVC architektúrájának három összetevőjét.
hogyan lehet jframe-et készíteni java-ban
Most, hogy tud a JavaScript MVC-ről, nézze meg a írta Edureka. A webfejlesztési tanúsítási képzés segít megtanulni, hogyan hozhat létre lenyűgöző weboldalakat a HTML5, CSS3, Twitter Bootstrap 3, jQuery és Google API-k használatával, és telepítheti az Amazon Simple Storage Service (S3) szolgáltatásba.
Van egy kérdésünk? Kérjük, említse meg a „JavaScript MVC” megjegyzés rovatában, és mi kapcsolatba lépünk Önnel.