Mi a JavaScript MVC architektúra és hogyan működik?

A modell-nézet-vezérlő egy olyan módszertan neve, amely a felhasználói felületet az alapul szolgáló adatmodellekhez kapcsolja. Olvassa el a JavaScript MVC megértéséhez.

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.



MVC - JavaScript MVC - edureka

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.