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.
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.