Izstrādes procesā objektorientēta programmēšana , modeļa skata-kontrolieris (MVC) ir metodika vai dizaina modelis, kas palīdz efektīvi un veiksmīgi saistīt lietotāja saskarni ar pamatā esošajiem datu modeļiem. Šajā rakstā mēs uzzināsim par MVC arhitektūra šādā secībā:
JavaScript MVC arhitektūra
Pēdējā laikā MVC modelis tiek piemērots dažādām programmēšanas valodām, ieskaitot . JavaScript sastāv no vairākiem ietvariem, lai atbalstītu MVC arhitektūru vai tās variācijas. Tas ļauj izstrādātājiem viegli un bez īpašām pūlēm pievienot struktūru savām lietojumprogrammām.
MVC sastāv no trim komponentiem:
- Modelis
- Skats
- Kontrolieris
Tagad turpināsim un iekļūsim šo trīs JavaScript MVC komponentu dziļumā.
Modeļi
Modeļi tiek izmantoti lietojumprogrammas datu pārvaldībai. Viņi nav saistīti ar lietotāja saskarni vai prezentācijas slāņiem. Tā vietā tie pārstāv unikālas datu formas, kuras lietojumprogrammai var būt nepieciešamas. Mainot vai atjauninot modeli, tas parasti paziņo novērotājiem par notikušajām izmaiņām, lai viņi varētu attiecīgi rīkoties.
Ņemsim piemēru vienkāršotam modelim, kas ieviests, izmantojot mugurkaulu:
var Photo = Backbone.Model.extend ({// Noklusējuma fotoattēla atribūti: {src: 'placeholder.jpg', paraksts: 'Noklusējuma attēls', apskatīts: false}, // Pārliecinieties, ka katram izveidotajam fotoattēlam ir `src`. inicializēt: function () {this.set ({'src': this.defaults.src})}}Foto galerijā fotoattēla koncepcijai būtu vērts nopelnīt savu modeli, jo tas pārstāv unikālu domēnam raksturīgu datu veidu. Šāds modelis var saturēt saistītus atribūtus, piemēram, parakstu, attēla avotu un papildu metadatus. Iepriekš minētajā piemērā konkrēta fotogrāfija tiks saglabāta modeļa instancē.
Skati
Skati ir vizuāls modeļu attēlojums, kas nodrošina filtrētu skatu uz to pašreizējo stāvokli. JavaScript skati tiek izmantoti DOM elementa izveidošanai un uzturēšanai. Skats parasti ievēro modeli un tiek informēts, kad modelis mainās, ļaujot skatam attiecīgi atjaunoties. Piemēram:
var buildPhotoView = funkcija (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Mēs izmantojam veidņu bibliotēka, piemēram, pasvītrojums // veidnes, kas ģenerē HTML failu mūsu // fotoattēlu ierakstam photoEl.innerHTML = _.template ('#photoTemplate', {src: photoModel.getSrc ()}})} photoModel.addSubscriber (render) photoEl. addEventListener ('klikšķis', function () {photoController.handleEvent ('klikšķis', photoModel)}) var show = function () {photoEl.style.display = ''} var hide = function () {photoEl.style.display = 'none'} return {showView: show, hideView: hide}}Šīs arhitektūras priekšrocība ir tā, ka katram komponentam ir sava atsevišķa loma, liekot lietojumprogrammai darboties pēc nepieciešamības.
Kontrolieri
Kontrolieri darbojas kā starpprodukti starp modeļiem un skatiem, kas ir atbildīgi par modeļa atjaunināšanu, kad lietotājs manipulē ar skatu. Iepriekš redzamajā mūsu fotogalerijas lietojumprogrammas piemērā kontrolieris būtu atbildīgs par izmaiņu apstrādi, ko lietotājs veicis rediģēšanas skatā konkrētam fotoattēlam, atjauninot noteiktu foto modeli, kad lietotājs ir pabeidzis rediģēšanu.
kas ir iepirkums projektu vadībā
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('iznīcināt', šo.proxy (šo .remove))}, render: function () {// Apstrādājiet veidnes this.replace ($ ('#photoTemplate') .tmpl (this.item)) atgrieziet šo}, noņemiet: function () {this.el.remove () this.release ()}})Šis piemērs sniegs jums ļoti vieglu, vienkāršu veidu, kā pārvaldīt izmaiņas starp modeli un skatu.
JavaScript MVC ietvari
Pēdējos gados JavaScript MVC sērija ir izstrādāti. Katrs no šiem ietvariem seko kaut kādam MVC modeļa veidam, lai mudinātu izstrādātājus rakstīt strukturētāku JavaScript kodu. Daži no ietvariem ir:
- mugurkauls.js
- Ember.js
- StūraJS
- Senča
- Kendo lietotāja saskarne
Ar to mēs esam nonākuši JavaScript MVC raksta beigās. Es ceru, ka jūs sapratāt trīs komponentus, kas saistīti ar MVC arhitektūru.
Tagad, kad jūs zināt par JavaScript MVC, pārbaudiet autore Edureka. Tīmekļa attīstības sertifikācijas apmācība palīdzēs jums uzzināt, kā izveidot iespaidīgas vietnes, izmantojot HTML5, CSS3, Twitter Bootstrap 3, jQuery un Google API, un izvietot to Amazon Simple Storage Service (S3).
Vai mums ir jautājums? Lūdzu, pieminējiet to “JavaScript MVC” komentāru sadaļā, un mēs ar jums sazināsimies.