I utvecklingsprocessen av objektorienterad programmering , model-view-controller (MVC) är en metodik eller designmönster som hjälper dig att relatera användargränssnittet till underliggande datamodeller effektivt och framgångsrikt. I den här artikeln kommer vi att lära oss mer om MVC-arkitektur i följande ordning:
JavaScript MVC-arkitektur
På senare tid har MVC-mönstret tillämpats på ett varierat utbud av programmeringsspråk, inklusive . JavaScript består av ett antal ramar för att stödja MVC-arkitektur eller variationer på den. Det gör det möjligt för utvecklarna att lägga till struktur i sina applikationer enkelt och utan mycket ansträngning.
bästa ide för Java-utveckling
MVC består av tre komponenter:
- Modell
- Se
- Kontroller
Nu ska vi gå vidare och gå in på djupet av dessa tre JavaScript MVC-komponenter.
Modeller
Modeller används för att hantera data för en applikation. De berör inte användargränssnittet eller presentationslagren. Istället representerar de unika dataformer som en applikation kan kräva. När en modell ändras eller uppdateras kommer den vanligtvis att meddela sina observatörer om den förändring som har skett så att de kan agera därefter.
Låt oss ta ett exempel på en förenklad modell implementerad med Backbone:
var Photo = Backbone.Model.extend ({// Standardattribut för fotostandard: {src: 'placeholder.jpg', bildtext: 'En standardbild', visad: falsk}, // Se till att varje bild som skapas har en 'src'. initialisera: funktion () {this.set ({'src': this.defaults.src})}})I ett fotogalleri skulle begreppet foto förtjäna sin egen modell, eftersom det representerar en unik typ av domänspecifika data. En sådan modell kan innehålla relaterade attribut såsom en bildtext, bildkälla och ytterligare metadata. I exemplet ovan skulle ett specifikt foto lagras i en förekomst av en modell.
Visningar
Vyer är en visuell representation av modeller som ger en filtrerad vy av deras nuvarande tillstånd. JavaScript-vyerna används för att bygga och underhålla ett DOM-element. En vy observerar vanligtvis en modell och meddelas när modellen ändras, så att vyn kan uppdateras i enlighet med detta. Till exempel:
var buildPhotoView = funktion (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Vi använder en mallbibliotek som understrykning // mallning som genererar HTML för vår // fotoinmatning 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'} returnera {showView: show, hideView: hide}}Fördelen med denna arkitektur är att varje komponent spelar sin egen roll för att applikationen ska fungera efter behov.
Kontroller
Styrenheter fungerar som mellanprodukter mellan modeller och vyer, som är ansvariga för att uppdatera modellen när användaren manipulerar vyn. I exemplet ovan i vår fotogalleriapplikation skulle en styrenhet vara ansvarig för att hantera ändringar som användaren gjorde i redigeringsvyn för ett visst foto och uppdatera en viss fotomodell när en användare har avslutat redigeringen.
sorteringsmatris c ++
var PhotosController = Spine.Controller.sub ({init: function () {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)) returnera detta}, ta bort: function () {this.el.remove () this.release ()}})Detta exempel ger dig ett mycket lätt och enkelt sätt att hantera förändringar mellan modellen och utsikten.
JavaScript MVC Frameworks
Under de senaste åren har en serie JavaScript MVC har utvecklats. Var och en av dessa ramar följer någon form av MVC-mönster med målet att uppmuntra utvecklare att skriva mer strukturerad JavaScript-kod. Några av ramarna är:
- backbone.js
- Ember.js
- AngularJS
- Sencha
- Kendo UI
Med detta har vi kommit till slutet av JavaScript MVC-artikeln. Jag hoppas att du förstod de tre komponenterna som är involverade i MVC-arkitekturen.
Nu när du känner till JavaScript MVC, kolla in av Edureka. Webbutvecklingscertifieringsträning hjälper dig att lära dig att skapa imponerande webbplatser med HTML5, CSS3, Twitter Bootstrap 3, jQuery och Google API: er och distribuera den till Amazon Simple Storage Service (S3).
Har du en fråga till oss? Vänligen nämna det i kommentarsektionen i “JavaScript MVC” så återkommer vi till dig.