În procesul de dezvoltare a programare orientată obiect , model-view-controller (MVC) este o metodologie sau un model de proiectare care vă ajută în relaționarea eficientă și cu succes a interfeței utilizator cu modelele de date subiacente. În acest articol, vom afla despre Arhitectura MVC în următoarea secvență:
Arhitectură JavaScript MVC
În ultima perioadă, modelul MVC este aplicat unei game variate de limbaje de programare, inclusiv . JavaScript constă dintr-o serie de cadre pentru a sprijini arhitectura MVC sau variații ale acesteia. Permite dezvoltatorilor să adauge structură aplicațiilor lor cu ușurință și fără eforturi mari.
MVC constă din trei componente:
- Model
- Vedere
- Controlor
Acum, să mergem mai departe și să intrăm în profunzimea acestor trei componente JavaScript MVC.
convertiți binarul în java întreg
Modele
Modelele sunt utilizate pentru gestionarea datelor pentru o aplicație. Nu sunt preocupați de interfața cu utilizatorul sau de straturile de prezentare. În schimb, ele reprezintă forme unice de date pe care o aplicație le poate solicita. Când un model este modificat sau actualizat, acesta își va notifica de obicei observatorii cu privire la schimbarea care a avut loc, astfel încât aceștia să poată acționa în consecință.
Să luăm un exemplu de model simplist implementat utilizând Backbone:
var Foto = Backbone.Model.extend ({// Atribute implicite pentru valorile implicite ale fotografiei: {src: 'placeholder.jpg', subtitrare: 'O imagine implicită', vizualizat: fals}, // Asigurați-vă că fiecare fotografie creată are un `src`. initialize: function () {this.set ({'src': this.defaults.src})}})Într-o galerie foto, conceptul de fotografie ar merita propriul model, deoarece reprezintă un tip unic de date specifice domeniului. Un astfel de model poate conține atribute conexe, cum ar fi o legendă, sursa de imagine și metadate suplimentare. În exemplul de mai sus, o fotografie specifică ar fi stocată într-o instanță a unui model.
Vizualizări
Vizualizările reprezintă o reprezentare vizuală a modelelor care oferă o imagine filtrată a stării lor curente. Vizualizările JavaScript sunt utilizate pentru construirea și menținerea unui element DOM. O vizualizare observă de obicei un model și este notificată atunci când modelul se modifică, permițând vizualizării să se actualizeze în mod corespunzător. De exemplu:
conectivitatea bazei de date în java cu mysql
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Folosim un bibliotecă de șablonare, cum ar fi Underscore // șablonare, care generează codul HTML pentru // intrarea foto fotoEl.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}}Avantajul acestei arhitecturi constă în faptul că fiecare componentă joacă propriul său rol separat în funcționarea aplicației după cum este necesar.
Controlere
Controlerele acționează ca intermediari între modele și vizualizări, care sunt responsabile de actualizarea modelului atunci când utilizatorul manipulează vizualizarea. În exemplul de mai sus al aplicației noastre de galerie foto, un controler ar fi responsabil pentru gestionarea modificărilor făcute de utilizator în vizualizarea de editare pentru o anumită fotografie, actualizând un anumit model de fotografie atunci când un utilizator a terminat de editat.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('distruge', this.proxy (this .remove))}, render: function () {// Handle templating this.replace ($ ('#photoTemplate') .tmpl (this.item)) return this}, remove: function () {this.el.remove () this.release ()}})Acest exemplu vă va oferi un mod foarte ușor și simplu de a gestiona modificările dintre model și vizualizare.
Cadruri JavaScript MVC
În ultimii ani, o serie de JavaScript MVC A fost dezvoltat. Fiecare dintre aceste cadre urmează o formă de model MVC cu scopul de a încuraja dezvoltatorii să scrie cod JavaScript mai structurat. Unele dintre cadre sunt:
- backbone.js
- Ember.js
- AngularJS
- Sencha
- Kendo UI
Cu aceasta, am ajuns la sfârșitul articolului JavaScript MVC. Sper că ați înțeles cele trei componente implicate în arhitectura MVC.
Acum, că știți despre JavaScript MVC, consultați de Edureka. Instruirea pentru certificarea dezvoltării web vă va ajuta să învățați cum să creați site-uri web impresionante folosind HTML5, CSS3, Twitter Bootstrap 3, jQuery și API-urile Google și să îl implementați în Amazon Simple Storage Service (S3).
Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii din „JavaScript MVC” și vă vom răspunde.