Ano ang JavaScript MVC Architecture at Paano ito gumagana?



Ang model-view-controller ay ang pangalan ng isang pamamaraan upang maugnay ang interface ng gumagamit sa pinagbabatayan na mga modelo ng data. Basahin upang maunawaan ang JavaScript MVC.

Sa proseso ng pag-unlad ng programa na nakatuon sa object , ang model-view-controller (MVC) ay isang pamamaraan o disenyo ng pattern na makakatulong sa iyo na maiugnay ang interface ng gumagamit sa napapailalim na mga modelo ng data nang mahusay at matagumpay. Sa artikulong ito, malalaman natin ang tungkol sa Ang arkitektura ng MVC sa sumusunod na pagkakasunud-sunod:

JavaScript MVC Architecture

Sa mga nagdaang panahon, ang pattern ng MVC ay inilalapat sa magkakaibang hanay ng mga wika sa pagprograma, kasama na . Ang JavaScript ay binubuo ng isang bilang ng mga balangkas upang suportahan ang arkitektura ng MVC o mga pagkakaiba-iba dito. Pinapayagan nito ang mga developer na magdagdag ng istraktura ng kanilang mga application nang madali at walang labis na pagsisikap.





panghuli sa wakas ay magtapos sa java

MVC - JavaScript MVC - edureka

Ang MVC ay binubuo ng tatlong mga bahagi:



  • Modelo
  • Tingnan
  • Controller

Ngayon, magpatuloy tayo at makapasok sa lalim ng tatlong mga bahagi ng JavaScript MVC na ito.

Mga Modelong

Ginagamit ang mga modelo para sa pamamahala ng data para sa isang application. Hindi sila nag-aalala sa mga layer ng interface ng gumagamit o pagtatanghal. Sa halip, kinakatawan nila ang mga natatanging anyo ng data na maaaring kailanganin ng isang application. Kapag binago o na-update ang isang modelo, karaniwang aabisuhan nito ang mga tagamasid tungkol sa naganap na pagbabago upang makagawa sila ng naaayon.

Kumuha tayo ng isang halimbawa ng isang simplistic na modelo na ipinatupad gamit ang Backbone:



var Photo = Backbone.Model.extend ({// Default na mga katangian para sa mga default ng larawan: {src: 'placeholder.jpg', caption: 'Isang default na imahe', tiningnan: false}, // Tiyaking ang bawat nilikha na larawan ay mayroong `src`. ipasimula: function () {this.set ({'src': this.defaults.src})}})

Sa isang gallery ng larawan, ang konsepto ng isang larawan ay magiging karapat-dapat sa sarili nitong modelo, dahil kumakatawan ito sa isang natatanging uri ng data na tukoy sa domain. Ang ganitong modelo ay maaaring maglaman ng mga nauugnay na katangian tulad ng isang caption, mapagkukunan ng imahe, at karagdagang metadata. Sa halimbawa sa itaas, ang isang tukoy na larawan ay maiimbak sa isang halimbawa ng isang modelo.

Mga Panonood

Ang mga panonood ay isang visual na representasyon ng mga modelo na nagbibigay ng isang na-filter na view ng kanilang kasalukuyang estado. Ginagamit ang mga view ng JavaScript para sa pagbuo at pagpapanatili ng isang elemento ng DOM. Karaniwang sinusunod ng isang view ang isang modelo at aabisuhan kapag nagbago ang modelo, pinapayagan ang view na i-update ang sarili nito nang naaayon. Halimbawa:

var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Gumagamit kami ng templating library tulad ng Underscore // templating na bumubuo ng HTML para sa aming // photo photo 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 = 'wala'} bumalik {showView: ipakita, itagoView: itago}}

Ang pakinabang ng arkitekturang ito ay ang bawat sangkap na gumaganap ng sarili nitong hiwalay na papel sa paggawa ng pag-andar ng application kung kinakailangan.

Mga kumokontrol

Ang mga Controller ay kumikilos tulad ng mga tagapamagitan sa pagitan ng mga modelo at pagtingin, na responsable para sa pag-update ng modelo kapag ginaya ng gumagamit ang view. Sa halimbawa sa itaas ng aming application ng photo gallery, mananagot ang isang tagakontrol para sa paghawak ng mga pagbabago na ginawa ng gumagamit sa view ng pag-edit para sa isang partikular na larawan, na ina-update ang isang tukoy na modelo ng larawan kapag natapos ng pag-edit ng isang gumagamit.

var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('sirain', this.proxy (ito .remove))}, render: function () {// Handle templating this.replace ($ ('#photoTemplate') .tmpl (this.item)) ibalik ito}, alisin: function () {this.el.remove () this.release ()}})

Ang halimbawang ito ay magbibigay sa iyo ng isang napaka-magaan, simpleng paraan upang pamahalaan ang mga pagbabago sa pagitan ng modelo at ng pagtingin.

Mga Framework ng MVC ng JavaScript

Sa huling ilang taon, isang serye ng JavaScript MVC nabuo. Ang bawat isa sa mga balangkas na ito ay sumusunod sa ilang anyo ng pattern ng MVC na may layuning hikayatin ang mga developer na magsulat ng mas nakabalangkas na JavaScript code. Ang ilan sa mga Framework ay:

  • gulugod.js
  • Ember.js
  • AngularJS
  • Sencha
  • Kendo UI

Sa pamamagitan nito, nakarating kami sa dulo ng artikulong JavaScript MVC. Inaasahan kong naunawaan mo ang tatlong mga bahagi na kasangkot sa arkitektura ng MVC.

Ngayong alam mo na ang tungkol sa JavaScript MVC, tingnan ang ni Edureka. Tutulungan ka ng Pagsasanay sa Pagpapatunay ng Pag-unlad sa Web na malaman kung paano lumikha ng mga kahanga-hangang website gamit ang HTML5, CSS3, Twitter Bootstrap 3, jQuery at Google API at i-deploy ito sa Amazon Simple Storage Service (S3).

May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento ng 'JavaScript MVC' at babalikan ka namin.