I utviklingsprosessen av Objektorientert programmering , model-view-controller (MVC) er en metodikk eller designmønster som hjelper deg med å relatere brukergrensesnittet til underliggende datamodeller effektivt og vellykket. I denne artikkelen vil vi lære om MVC-arkitektur i følgende rekkefølge:
JavaScript MVC-arkitektur
I nyere tid er MVC-mønsteret brukt på et mangfoldig utvalg av programmeringsspråk, inkludert . JavaScript består av en rekke rammer for å støtte MVC-arkitektur eller variasjoner på den. Det lar utviklerne legge struktur til applikasjonene sine enkelt og uten mye anstrengelse.
MVC består av tre komponenter:
- Modell
- Utsikt
- Kontroller
La oss nå gå videre og gå i dybden på disse tre JavaScript MVC-komponentene.
c ++ sortere int-array
Modeller
Modeller brukes til å administrere dataene for en applikasjon. De er ikke opptatt av brukergrensesnittet eller presentasjonslagene. I stedet representerer de unike dataformer som en applikasjon kan kreve. Når en modell endres eller oppdateres, vil den vanligvis varsle observatørene om endringen som har skjedd, slik at de kan handle deretter.
La oss ta et eksempel på en forenklet modell implementert ved hjelp av Backbone:
har et forhold i java
var Photo = Backbone.Model.extend ({// Standardattributter for standardinnstillingene for bildet: {src: 'placeholder.jpg', bildetekst: 'Et standardbilde', sett: falsk}, // Sørg for at hvert bilde som er opprettet har en `src`. initialisere: funksjon () {this.set ({'src': this.defaults.src})}})I et fotogalleri vil konseptet med et bilde fortjene sin egen modell, da det representerer en unik type domenespesifikke data. En slik modell kan inneholde relaterte attributter som f.eks. Bildetekst, bildekilde og ytterligere metadata. I eksemplet ovenfor vil et bestemt bilde lagres i en forekomst av en modell.
Visninger
Visninger er en visuell fremstilling av modeller som gir en filtrert visning av deres nåværende tilstand. JavaScript-visningene brukes til å bygge og vedlikeholde et DOM-element. En visning observerer vanligvis en modell og blir varslet når modellen endres, slik at visningen kan oppdatere seg tilsvarende. For eksempel:
var buildPhotoView = funksjon (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Vi bruker en malbibliotek som Underscore // templating som genererer HTML for // bildeoppføringen 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'} returner {showView: show, hideView: hide}}Fordelen med denne arkitekturen er at hver komponent spiller sin egen rolle for å gjøre applikasjonen til å fungere etter behov.
Kontrollere
Kontrollere fungerer som mellomprodukter mellom modeller og visninger, som er ansvarlige for å oppdatere modellen når brukeren manipulerer visningen. I eksemplet ovenfor av vårt fotogalleri-program vil en kontroller være ansvarlig for å håndtere endringene brukeren har gjort i redigeringsvisningen for et bestemt bilde, og oppdatere en bestemt fotomodell når en bruker er ferdig med å redigere.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('destroy', this.proxy (this .remove))}, gjengi: function () {// Håndter mal for dette.replace ($ ('#photoTemplate') .tmpl (this.item)) returner dette}, fjern: function () {this.el.remove () this.release ()}})Dette eksemplet gir deg en veldig lett og enkel måte å håndtere endringer mellom modellen og utsikten på.
JavaScript MVC Frameworks
De siste årene har en serie JavaScript MVC har blitt utviklet. Hver og en av disse rammene følger en eller annen form for MVC-mønster med målet å oppmuntre utviklere til å skrive mer strukturert JavaScript-kode. Noen av rammene er:
- backbone.js
- Ember.js
- AngularJS
- Sencha
- Kendo UI
Med dette har vi kommet til slutten av JavaScript MVC-artikkelen. Jeg håper du forsto de tre komponentene som er involvert i MVC-arkitekturen.
Nå som du vet om JavaScript MVC, sjekk ut av Edureka. Webutvikling sertifiseringstrening hjelper deg med å lære hvordan du lager imponerende nettsteder ved hjelp av HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google APIer og distribuerer det til Amazon Simple Storage Service (S3).
tablå hvordan man blander data
Har du et spørsmål til oss? Vennligst nevn det i kommentarfeltet i “JavaScript MVC”, så kommer vi tilbake til deg.