I udviklingsprocessen for objektorienteret programmering , model-view-controller (MVC) er en metode eller designmønster, der hjælper dig med at relatere brugergrænsefladen til underliggende datamodeller effektivt og med succes. I denne artikel vil vi lære om MVC-arkitektur i følgende rækkefølge:
JavaScript MVC-arkitektur
I nyere tid er MVC-mønsteret anvendt på en bred vifte af programmeringssprog, herunder . JavaScript består af en række rammer, der understøtter MVC-arkitektur eller variationer på den. Det giver udviklerne mulighed for nemt og uden megen anstrengelse at tilføje struktur til deres applikationer.
MVC består af tre komponenter:
- Model
- Udsigt
- Controller
Lad os nu gå videre og komme i dybden med disse tre JavaScript MVC-komponenter.
Modeller
Modeller bruges til at administrere dataene til en applikation. De vedrører ikke brugergrænsefladen eller præsentationslagene. I stedet repræsenterer de unikke former for data, som en applikation muligvis kræver. Når en model ændres eller opdateres, underretter den typisk sine observatører om den ændring, der er sket, så de kan handle i overensstemmelse hermed.
Lad os tage et eksempel på en forenklet model implementeret ved hjælp af backbone:
var Photo = Backbone.Model.extend ({// Standardattributter til fotostandarderne: {src: 'placeholder.jpg', billedtekst: 'Et standardbillede', set: falsk}, // Sørg for, at hvert oprettede foto har en 'src'. initialiser: funktion () {this.set ({'src': this.defaults.src})}})I et fotogalleri fortjener begrebet et foto sin egen model, da det repræsenterer en unik form for domænespecifikke data. En sådan model kan indeholde relaterede attributter såsom en billedtekst, billedkilde og yderligere metadata. I ovenstående eksempel vil et bestemt foto blive gemt i en forekomst af en model.
Visninger
Visninger er en visuel repræsentation af modeller, der giver en filtreret visning af deres nuværende tilstand. JavaScript-visningerne bruges til at opbygge og vedligeholde et DOM-element. En visning observerer typisk en model og får besked, når modellen skifter, så visningen kan opdatere sig i overensstemmelse hermed. For eksempel:
var buildPhotoView = funktion (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = funktion () {// Vi bruger en skabelonbibliotek som understregning // skabelon, der genererer HTML til vores // fotoindgang photoEl.innerHTML = _.template ('#photoTemplate', {src: photoModel.getSrc ()})} photoModel.addSubscriber (render) photoEl. addEventListener ('klik', funktion () {photoController.handleEvent ('klik', photoModel)}) var show = funktion () {photoEl.style.display = ''} var hide = function () {photoEl.style.display = 'none'} returner {showView: show, hideView: hide}}Fordelen ved denne arkitektur er, at hver komponent spiller sin egen separate rolle, når applikationen fungerer efter behov.
Controllere
Controllere fungerer som mellemprodukter mellem modeller og visninger, som er ansvarlige for at opdatere modellen, når brugeren manipulerer visningen. I ovenstående eksempel på vores fotogalleri-applikation vil en controller være ansvarlig for at håndtere ændringer, som brugeren har foretaget i redigeringsvisningen for et bestemt foto, og opdatere en bestemt fotomodel, når en bruger er færdig med at redigere.
var PhotosController = Spine.Controller.sub ({init: funktion () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('destroy', this.proxy (this .remove))}, render: function () {// Handle templating this.replace ($ ('#photoTemplate'). tmpl (this.item)) returner dette}, fjern: funktion () {this.el.remove () this.release ()}})Dette eksempel giver dig en meget let, enkel måde at styre ændringer mellem modellen og udsigten på.
JavaScript MVC Frameworks
I de sidste par år, en række JavaScript MVC er blevet udviklet. Hver af disse rammer følger en eller anden form for MVC-mønster med det mål at tilskynde udviklere til at skrive mere struktureret JavaScript-kode. Nogle af rammerne er:
qtp vs selen, hvilket er bedre
- backbone.js
- Ember.js
- AngularJS
- Sencha
- Kendo UI
Med dette er vi kommet til slutningen af JavaScript MVC-artiklen. Jeg håber, du har forstået de tre komponenter, der er involveret i MVC-arkitekturen.
Nu hvor du kender JavaScript MVC, skal du tjekke af Edureka. Webudvikling certificeringstræning hjælper dig med at lære, hvordan du opretter imponerende websteder ved hjælp af HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google API'er og distribuerer det til Amazon Simple Storage Service (S3).
Har du et spørgsmål til os? Nævn det i kommentarfeltet i “JavaScript MVC”, så vender vi tilbage til dig.