Nel processo di sviluppo di programmazione orientata agli oggetti , model-view-controller (MVC) è una metodologia o un modello di progettazione che ti aiuta a mettere in relazione l'interfaccia utente con i modelli di dati sottostanti in modo efficiente e con successo. In questo articolo, impareremo a conoscere il Architettura MVC nella sequenza seguente:
Architettura MVC JavaScript
In tempi recenti, il pattern MVC viene applicato a una vasta gamma di linguaggi di programmazione, inclusi . JavaScript è costituito da una serie di framework per supportare l'architettura MVC o le sue varianti. Consente agli sviluppatori di aggiungere struttura alle loro applicazioni facilmente e senza troppi sforzi.
MVC è costituito da tre componenti:
- Modello
- Visualizza
- Controller
Ora, andiamo avanti e approfondiamo questi tre componenti MVC JavaScript.
stringa java per la conversione della data
Modelli
I modelli vengono utilizzati per la gestione dei dati per un'applicazione. Non si occupano dell'interfaccia utente o dei livelli di presentazione. Invece, rappresentano forme univoche di dati che un'applicazione potrebbe richiedere. Quando un modello viene modificato o aggiornato, normalmente notificherà ai suoi osservatori il cambiamento che si è verificato in modo che possano agire di conseguenza.
Facciamo un esempio di un modello semplicistico implementato utilizzando Backbone:
var Photo = Backbone.Model.extend ({// Attributi predefiniti per i valori predefiniti delle foto: {src: 'placeholder.jpg', didascalia: 'A default image', viewed: false}, // Assicurati che ogni foto creata abbia un `src`. initialize: function () {this.set ({'src': this.defaults.src})}})In una galleria fotografica, il concetto di foto meriterebbe il proprio modello, poiché rappresenta un tipo unico di dati specifici del dominio. Tale modello può contenere attributi correlati come didascalia, origine dell'immagine e metadati aggiuntivi. Nell'esempio precedente, una foto specifica verrebbe memorizzata in un'istanza di un modello.
come trovare il numero più grande in un array java
Visualizzazioni
Le viste sono una rappresentazione visiva dei modelli che forniscono una vista filtrata del loro stato corrente. Le viste JavaScript vengono utilizzate per creare e mantenere un elemento DOM. Una vista in genere osserva un modello e riceve una notifica quando il modello cambia, consentendo alla vista di aggiornarsi di conseguenza. Per esempio:
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Usiamo un libreria di modelli come Underscore // templating che genera l'HTML per la nostra // foto 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}}Il vantaggio di questa architettura è che ogni componente svolge il proprio ruolo separato nel far funzionare l'applicazione secondo le necessità.
Controller
I controller agiscono come intermediari tra modelli e viste, responsabili dell'aggiornamento del modello quando l'utente manipola la vista. Nell'esempio sopra della nostra applicazione per la galleria fotografica, un controller sarebbe responsabile della gestione delle modifiche apportate dall'utente alla visualizzazione di modifica per una particolare foto, aggiornando un modello di foto specifico quando un utente ha terminato la modifica.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('destroy', this.proxy (this .remove))}, render: function () {// Handle templating this.replace ($ ('#photoTemplate') .tmpl (this.item)) return this}, remove: function () {this.el.remove () this.release ()}})Questo esempio fornirà un modo molto leggero e semplice per gestire le modifiche tra il modello e la vista.
hadoop admin vs hadoop developer
Framework JavaScript MVC
Negli ultimi anni, una serie di JavaScript MVC sono stati sviluppati. Ognuno di questi framework segue una qualche forma di pattern MVC con l'obiettivo di incoraggiare gli sviluppatori a scrivere codice JavaScript più strutturato. Alcuni dei Framework sono:
- backbone.js
- Ember.js
- AngularJS
- Sencha
- Kendo UI
Con questo, siamo arrivati alla fine dell'articolo JavaScript MVC. Spero che tu abbia capito i tre componenti coinvolti nell'architettura MVC.
Ora che conosci JavaScript MVC, controlla il di Edureka. Il corso di formazione sulla certificazione per lo sviluppo web ti aiuterà a imparare come creare siti web straordinari utilizzando HTML5, CSS3, Twitter Bootstrap 3, jQuery e API di Google e a distribuirli su Amazon Simple Storage Service (S3).
Hai domande per noi? Si prega di menzionarlo nella sezione commenti di 'JavaScript MVC' e ti risponderemo.