Mis on JavaScripti MVC arhitektuur ja kuidas see töötab?

Mudel-vaade-kontroller on metoodika nimetus kasutajaliidese seostamiseks alusandmetega. Lugege JavaScripti MVC mõistmiseks.

Arendusprotsessis objektorienteeritud programmeerimine , mudelivaate-kontroller (MVC) on metoodika või kujundusmudel, mis aitab teil kasutajaliidest tõhusalt ja edukalt siduda aluseks olevate andmemudelitega. Selles artiklis õpime järgmist MVC arhitektuur järgmises järjestuses:



JavaScripti MVC arhitektuur

Viimasel ajal rakendatakse MVC mustrit mitmesugustele programmikeeltele, sealhulgas . JavaScript koosneb mitmest raamistikust, mis toetab MVC arhitektuuri või selle variatsioone. See võimaldab arendajatel lisada oma rakendustele struktuuri lihtsalt ja ilma eriliste pingutusteta.



MVC - JavaScript MVC - edureka

binaarotsingu algoritm javas

MVC koosneb kolmest komponendist:



  • Mudel
  • Vaade
  • Kontroller

Nüüd liigume edasi ja uurime nende kolme JavaScripti MVC komponendi sügavust.

Mudelid

Mudeleid kasutatakse rakenduse andmete haldamiseks. Nad ei ole seotud kasutajaliidese ega esitluskihtidega. Selle asemel esindavad need ainulaadseid andmevorme, mida rakendus võib vajada. Kui mudelit muudetakse või ajakohastatakse, teavitab ta tavaliselt oma vaatlejaid toimunud muutustest, et nad saaksid vastavalt tegutseda.

Võtame näite lihtsustatud mudelist, mis on rakendatud selgroo abil:



var Photo = Selgroog.Mudeli.extend ({// Foto vaikeatribuudid foto jaoks: {src: 'placeholder.jpg', pealkiri: 'Vaikepilt', vaadatud: false}, // Veenduge, et igal loodud fotol on 'src'. initsialiseerimine: function () {this.set ({'src': this.defaults.src})}}

Fotogaleriis väärib foto kontseptsioon oma mudelit, kuna see esindab ainulaadset tüüpi domeenispetsiifilisi andmeid. Selline mudel võib sisaldada seotud atribuute, näiteks pealdist, pildi allikat ja täiendavaid metaandmeid. Ülaltoodud näites salvestatakse konkreetne foto mudeli eksemplaris.

Vaated

Vaated on visuaalne esitus mudelitest, mis pakuvad nende praegusest olekust filtreeritud vaadet. JavaScripti vaateid kasutatakse DOM-elemendi loomiseks ja hooldamiseks. Vaade jälgib tavaliselt mudelit ja sellest teavitatakse mudeli muutumisel, mis võimaldab vaatel ennast vastavalt uuendada. Näiteks:

var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Kasutame mallide kogu, näiteks alakriips // mall, mis loob HTML-i meie // fotokirje photoEl.innerHTML = _.template ('#photoTemplate', {src: photoModel.getSrc ()})} photoModel.addSubscriber (render) photoEl jaoks. addEventListener ('klõps', function () {photoController.handleEvent ('klõps', photoModel)}) var show = function () {photoEl.style.display = ''} var hide = function () {photoEl.style.display = 'none'} return {showView: show, hideView: hide}}

Selle arhitektuuri eeliseks on see, et igal komponendil on rakenduse vajadusel funktsioneerimisel omaette roll.

Kontrollerid

Kontrollerid toimivad mudelite ja vaadete vaheproduktidena, mis vastutavad mudeli värskendamise eest, kui kasutaja vaatega manipuleerib. Meie fotogaleriirakenduse ülaltoodud näites vastutab kontroller, et kasutaja muudaks konkreetse foto redigeerimisvaadet, värskendades konkreetset fotomudelit, kui kasutaja on redigeerimise lõpetanud.

var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('hävitama', see.proxy (see .remove))}, render: function () {// Käsitsege mallimängu this.replace ($ ('#photoTemplate') .tmpl (this.item)) tagastage see}, eemaldage: function () {this.el.remove () see. vabastage ()}})

See näide pakub teile väga lihtsat ja lihtsat viisi mudeli ja vaate vaheliste muudatuste haldamiseks.

JavaScripti MVC raamistikud

Viimase paari aasta jooksul on JavaScripti MVC seeria on välja töötatud. Kõik need raamistikud järgivad mingisugust MVC mustrit, eesmärgiga julgustada arendajaid struktureerituma JavaScripti koodi kirjutama. Mõned raamistikud on:

  • selgroog.js
  • Ember.js
  • NurgaJS
  • Sencha
  • Kendo kasutajaliides

Sellega oleme jõudnud JavaScripti MVC artikli lõppu. Loodan, et saite aru kolmest MVC arhitektuuriga seotud komponendist.

Nüüd, kui olete JavaScripti MVC-st teadlik, vaadake autor Edureka. Veebiarenduse sertifitseerimiskoolitus aitab teil õppida muljetavaldavaid veebisaite looma HTML5, CSS3, Twitter Bootstrap 3, jQuery ja Google API-de abil ning juurutada see Amazon Simple Storage Service'i (S3).

Kas teil on meile küsimus? Palun mainige seda JavaScripti MVC kommentaaride jaotises ja me võtame teiega ühendust.