V razvojnem procesu objektno usmerjeno programiranje , model-view-controller (MVC) je metodologija ali vzorec oblikovanja, ki vam pomaga pri učinkovitem in uspešnem povezovanju uporabniškega vmesnika z osnovnimi podatkovnimi modeli. V tem članku bomo izvedeli več o Arhitektura MVC v naslednjem zaporedju:
JavaScript MVC Arhitektura
V zadnjem času se vzorec MVC uporablja za različne programske jezike, vključno z . JavaScript je sestavljen iz številnih okvirov, ki podpirajo arhitekturo MVC ali njene različice. Razvijalcem omogoča enostavno dodajanje strukture njihovim aplikacijam in brez veliko truda.
MVC je sestavljen iz treh komponent:
- Model
- Pogled
- Krmilnik
Zdaj pa pojdimo naprej in pojdimo v globino teh treh komponent JavaScript MVC.
Modeli
Modeli se uporabljajo za upravljanje podatkov za aplikacijo. Ne ukvarjajo se z uporabniškim vmesnikom ali predstavitvenimi plastmi. Namesto tega predstavljajo edinstvene oblike podatkov, ki jih aplikacija morda zahteva. Ko se model spremeni ali posodobi, običajno opazovalce obvesti o spremembi, ki se je zgodila, da lahko ustrezno ukrepajo.
Vzemimo primer poenostavljenega modela, uporabljenega z uporabo hrbtenice:
var Photo = Backbone.Model.extend ({// Privzeti atributi za privzete vrednosti fotografije: {src: 'placeholder.jpg', naslov: 'Privzeta slika', ogledano: false}, // Zagotovite, da ima vsaka ustvarjena fotografija `src`. inicializirajte: function () {this.set ({'src': this.defaults.src})}})V fotogaleriji bi koncept fotografije zaslužil svoj model, saj predstavlja edinstveno vrsto podatkov, specifičnih za domeno. Tak model lahko vsebuje povezane atribute, kot so napis, vir slike in dodatni metapodatki. V zgornjem primeru bi bila določena fotografija shranjena v primerku modela.
Pogledi
Pogledi so vizualna predstavitev modelov, ki zagotavljajo filtriran pogled na njihovo trenutno stanje. Pogledi JavaScript se uporabljajo za izdelavo in vzdrževanje elementa DOM. Pogled običajno opazi model in se obvesti, ko se model spremeni, kar omogoča, da se pogled ustrezno posodobi. Na primer:
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Uporabljamo knjižnica predlog, kot je podčrtaj // predloga, ki ustvari HTML za naš // vnos fotografij photoEl.innerHTML = _.template ('#photoTemplate', {src: photoModel.getSrc ()})} photoModel.addSubscriber (render) photoEl. addEventListener ('klik', funkcija () {photoController.handleEvent ('klik', photoModel)}) var show = function () {photoEl.style.display = ''} var hide = function () {photoEl.style.display = 'none'} vrni {showView: show, hideView: hide}}Prednost te arhitekture je v tem, da ima vsaka komponenta svojo ločeno vlogo pri ustvarjanju aplikacijske funkcije po potrebi.
Krmilniki
Krmilniki delujejo kot posredniki med modeli in pogledi, ki so odgovorni za posodobitev modela, ko uporabnik manipulira s pogledom. V zgornjem primeru naše aplikacije fotogalerije bi bil upravljavec odgovoren za obdelavo sprememb, ki jih je uporabnik naredil v pogledu za urejanje določene fotografije, in posodobil določen model fotografije, ko je uporabnik končal urejanje.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('uniči', this.proxy (to .remove))}, render: function () {// ravnajte s predlogami this.replace ($ ('#photoTemplate') .tmpl (this.item)) return this}, odstranite: function () {this.el.remove () this.release ()}})Ta primer vam bo zagotovil zelo lahek in preprost način upravljanja sprememb med modelom in pogledom.
kako razvrstiti matriko v naraščajočem vrstnem redu
JavaScript MVC Frameworks
V zadnjih nekaj letih je nastala serija JavaScript MVC so bili razviti. Vsak od teh okvirov sledi neki obliki vzorca MVC s ciljem spodbuditi razvijalce k pisanju bolj strukturirane kode JavaScript. Nekateri okviri so:
- hrbtenica.js
- Ember.js
- Kotni JS
- Sencha
- Kendo UI
S tem smo prišli do konca članka JavaScript MVC. Upam, da ste razumeli tri sestavne dele arhitekture MVC.
Zdaj, ko poznate JavaScript MVC, si oglejte avtor Edureka. Usposabljanje za certificiranje spletnega razvoja vam bo pomagalo, da se naučite ustvariti impresivna spletna mesta z uporabo API-jev HTML5, CSS3, Twitter Bootstrap 3, jQuery in Google ter jih namestite v Amazon Simple Storage Service (S3).
Imate vprašanje za nas? Prosimo, omenite ga v oddelku za komentarje v 'JavaScript MVC' in se vam bomo javili.