En el procés de desenvolupament de programació orientada a objectes , model-view-controller (MVC) és una metodologia o patró de disseny que us ajuda a relacionar la interfície d'usuari amb els models de dades subjacents de manera eficient i amb èxit. En aquest article, aprendrem sobre Arquitectura MVC en la següent seqüència:
Arquitectura JavaScript MVC
En els darrers temps, el patró MVC s'aplica a una àmplia gamma de llenguatges de programació, inclòs . JavaScript consisteix en una sèrie de frameworks que admeten l'arquitectura MVC o les seves variacions. Permet als desenvolupadors afegir estructura a les seves aplicacions fàcilment i sense molt esforç.
MVC consta de tres components:
- Model
- Veure
- Controlador
Ara continuem i aprofundim en aquests tres components JavaScript MVC.
com obtenir la longitud de la matriu en javascript
Models
Els models s’utilitzen per gestionar les dades d’una aplicació. No els preocupa la interfície d'usuari ni les capes de presentació. En el seu lloc, representen formes úniques de dades que pot requerir una aplicació. Quan es modifica o actualitza un model, normalment notificarà als observadors sobre el canvi que s’ha produït perquè puguin actuar en conseqüència.
Prenguem un exemple d’un model simplista implementat mitjançant Backbone:
var Foto = Backbone.Model.extend ({// Atributs predeterminats per als valors predeterminats de la foto: {src: 'placeholder.jpg', subtítol: 'Una imatge predeterminada', vist: fals}, // Assegureu-vos que cada foto creada tingui un `src`. initialize: function () {this.set ({'src': this.defaults.src})}})En una galeria de fotos, el concepte de foto mereixeria un model propi, ja que representa un tipus únic de dades específiques de domini. Aquest model pot contenir atributs relacionats, com ara un títol, font d’imatge i metadades addicionals. A l'exemple anterior, una foto específica s'emmagatzemaria en una instància d'un model.
Vistes
Les vistes són una representació visual de models que proporcionen una vista filtrada del seu estat actual. Les visualitzacions de JavaScript s’utilitzen per crear i mantenir un element DOM. Una vista sol observar un model i es notifica quan el model canvia, cosa que permet que la vista s'actualitzi en conseqüència. Per exemple:
quin mètode de classe d'escàner llegeix una cadena?
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Utilitzem un biblioteca de plantilla, com ara Subratllat // plantilla, que genera l'HTML de la nostra // entrada de fotos 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}}L’avantatge d’aquesta arquitectura és que cada component té el seu propi paper separat a l’hora de fer que l’aplicació funcioni segons sigui necessari.
Controladors
Els controladors actuen com a productes intermedis entre models i visualitzacions, que s’encarreguen d’actualitzar el model quan l’usuari manipula la vista. A l'exemple anterior de la nostra aplicació de galeria de fotos, un controlador seria el responsable de gestionar els canvis que l'usuari va fer a la vista d'edició d'una foto concreta, actualitzant un model de foto específic quan un usuari hagi acabat d'editar.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('destruir', this.proxy (this .remove))}, render: function () {// Gestiona la plantilla this.replace ($ ('#photoTemplate') .tmpl (this.item)) retorna això}, elimina: function () {this.el.remove () this.release ()}})Aquest exemple us proporcionarà una manera molt lleugera i senzilla de gestionar els canvis entre el model i la vista.
Marcs MVC JavaScript
En els darrers anys, una sèrie de JavaScript MVC s'han desenvolupat. Cadascun d'aquests marcs segueix alguna forma de patró MVC amb l'objectiu d'animar els desenvolupadors a escriure un codi JavaScript més estructurat. Alguns dels marcs són:
- backbone.js
- Ember.js
- AngularJS
- Sencha
- IU de Kendo
Amb això, hem arribat al final de l'article JavaScript MVC. Espero que hagueu entès els tres components implicats en l'arquitectura MVC.
Ara que ja coneixeu JavaScript MVC, consulteu el fitxer per Edureka. La formació en certificació per al desenvolupament web us ajudarà a crear llocs web impressionants mitjançant HTML5, CSS3, Twitter Bootstrap 3, jQuery i API de Google i implementar-lo a Amazon Simple Storage Service (S3).
Tens alguna pregunta? Esmenteu-lo a la secció de comentaris de 'JavaScript MVC' i us respondrem.