U procesu razvoja objektno orijentirano programiranje , model-view-controller (MVC) je metodologija ili obrazac dizajna koji vam pomažu u učinkovitom i uspješnom povezivanju korisničkog sučelja s osnovnim modelima podataka. U ovom ćemo članku naučiti o MVC arhitektura u sljedećem slijedu:
JavaScript MVC arhitektura
U novije se vrijeme MVC obrazac primjenjuje na širok raspon programskih jezika, uključujući . JavaScript se sastoji od niza okvira koji podržavaju MVC arhitekturu ili varijacije na njoj. Omogućuje programerima da dodaju strukturu svojim aplikacijama lako i bez puno napora.
MVC se sastoji od tri komponente:
veličina polja u javascriptu
- Model
- Pogled
- Kontroler
Krenimo sada i krenimo u dubinu ove tri komponente JavaScript MVC.
Modeli
Modeli se koriste za upravljanje podacima aplikacije. Oni se ne bave korisničkim sučeljem ili slojevima prezentacije. Umjesto toga, oni predstavljaju jedinstvene oblike podataka koje aplikacija može zahtijevati. Kada se model promijeni ili ažurira, obično će obavijestiti svoje promatrače o promjeni koja se dogodila kako bi mogli postupati u skladu s tim.
Uzmimo primjer pojednostavljenog modela provedenog pomoću Backbone-a:
var Photo = Backbone.Model.extend ({// Zadani atributi za zadane postavke fotografije: {src: 'placeholder.jpg', naslov: 'Zadana slika', pregledano: false}, // Provjerite ima li svaka stvorena fotografija `src`. inicijalizira: function () {this.set ({'src': this.defaults.src})}})U fotogaleriji bi koncept fotografije zaslužio vlastiti model jer predstavlja jedinstvenu vrstu podataka specifičnih za domenu. Takav model može sadržavati povezane atribute kao što su naslov, izvor slike i dodatni metapodaci. U gornjem primjeru, određena fotografija pohranila bi se u primjeru modela.
Pogledi
Prikazi su vizualni prikaz modela koji pružaju filtrirani prikaz njihovog trenutnog stanja. Prikazi JavaScript koriste se za izgradnju i održavanje DOM elementa. Pogled obično promatra model i dobiva obavijest kad se model promijeni, dopuštajući pogledu da se u skladu s tim ažurira. Na primjer:
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Koristimo biblioteka predložaka kao što je Podcrtavanje // predloške koja generira HTML za naš // unos fotografije 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'} return {showView: show, hideView: hide}}Prednost ove arhitekture je u tome što svaka komponenta igra svoju zasebnu ulogu u stvaranju funkcije aplikacije prema potrebi.
operater razlučivosti opsega u c ++
Kontroleri
Kontroleri se ponašaju kao posrednici između modela i pogleda koji su odgovorni za ažuriranje modela kada korisnik manipulira prikazom. U gornjem primjeru naše aplikacije fotogalerije, kontroler će biti odgovoran za obradu promjena koje je korisnik napravio u pogledu uređivanja određene fotografije, ažurirajući određeni model fotografije kad korisnik završi s uređivanjem.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('uništi', this.proxy (ovaj .remove))}, render: function () {// Rukovanje predloškom this.replace ($ ('#photoTemplate') .tmpl (this.item)) return this}, uklanjanje: function () {this.el.remove () this.release ()}})Ovaj primjer pružit će vam vrlo lagan, jednostavan način upravljanja promjenama između modela i prikaza.
JavaScript MVC okviri
U posljednjih nekoliko godina, niz JavaScript MVC-a su razvijeni. Svaki od ovih okvira slijedi neki oblik MVC obrasca s ciljem poticanja programera na pisanje strukturiranijeg JavaScript koda. Neki od okvira su:
- okosnica.js
- Ember.js
- KutniJS
- Sencha
- Korisničko sučelje Kendo
Ovim smo došli do kraja članka JavaScript MVC. Nadam se da ste razumjeli tri komponente uključene u MVC arhitekturu.
Sad kad znate za JavaScript MVC, pogledajte od Edureke. Obuka za certificiranje web razvoja pomoći će vam naučiti kako stvoriti impresivne web stranice pomoću HTML5, CSS3, Twitter Bootstrap 3, jQuery i Google API-ja te ih rasporediti na Amazon Simple Storage Service (S3).
Imate pitanje za nas? Molimo vas da ga spominjete u odjeljku za komentare 'JavaScript MVC', a mi ćemo vam se javiti.