En el proceso de desarrollo de programación orientada a objetos , model-view-controller (MVC) es una metodología o patrón de diseño que lo ayuda a relacionar la interfaz de usuario con los modelos de datos subyacentes de manera eficiente y exitosa. En este artículo, aprenderemos sobre la Arquitectura MVC en la siguiente secuencia:
Arquitectura MVC de JavaScript
En los últimos tiempos, el patrón MVC se aplica a una amplia gama de lenguajes de programación, que incluyen . JavaScript consta de varios marcos para admitir la arquitectura MVC o sus variaciones. Permite a los desarrolladores agregar estructura a sus aplicaciones fácilmente y sin mucho esfuerzo.
MVC consta de tres componentes:
- Modelo
- Ver
- Controlador
Ahora, sigamos adelante y profundicemos en estos tres componentes MVC de JavaScript.
qué es la gestión de adquisiciones del proyecto
Modelos
Los modelos se utilizan para administrar los datos de una aplicación. No se preocupan por la interfaz de usuario o las capas de presentación. En cambio, representan formas únicas de datos que una aplicación puede requerir. Cuando se cambia o actualiza un modelo, normalmente notificará a sus observadores sobre el cambio que se ha producido para que puedan actuar en consecuencia.
Tomemos un ejemplo de un modelo simplista implementado con Backbone:
var Photo = Backbone.Model.extend ({// Atributos predeterminados para los valores predeterminados de la foto: {src: 'placeholder.jpg', caption: 'A default image', viewed: false}, // Asegúrese de que cada foto creada tenga un `src`. initialize: function () {this.set ({'src': this.defaults.src})}})En una galería de fotos, el concepto de foto merecería su propio modelo, ya que representa un tipo único de datos específicos del dominio. Dicho modelo puede contener atributos relacionados, como un título, una fuente de imagen y metadatos adicionales. En el ejemplo anterior, una foto específica se almacenaría en una instancia de un modelo.
Puntos de vista
Las vistas son una representación visual de modelos que proporcionan una vista filtrada de su estado actual. Las vistas de JavaScript se utilizan para construir y mantener un elemento DOM. Una vista generalmente observa un modelo y recibe una notificación cuando el modelo cambia, lo que permite que la vista se actualice en consecuencia. Por ejemplo:
instrucción goto c ++
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Usamos un biblioteca de plantillas como Underscore // que genera el HTML para nuestra // 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}}El beneficio de esta arquitectura es que cada componente juega su propio papel independiente para hacer que la aplicación funcione según sea necesario.
Controladores
Los controladores actúan como intermediarios entre modelos y vistas, que son responsables de actualizar el modelo cuando el usuario manipula la vista. En el ejemplo anterior de nuestra aplicación de galería de fotos, un controlador sería responsable de manejar los cambios que el usuario realizó en la vista de edición para una foto en particular, actualizando un modelo de foto específico cuando un usuario haya terminado de editar.
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 () {// Manejar la plantilla this.replace ($ ('#photoTemplate') .tmpl (this.item)) return this}, remove: function () {this.el.remove () this.release ()}})Este ejemplo le proporcionará una forma muy ligera y sencilla de gestionar los cambios entre el modelo y la vista.
Frameworks de JavaScript MVC
En los últimos años, una serie de JavaScript MVC ha sido desarrollado. Cada uno de estos marcos sigue algún tipo de patrón MVC con el objetivo de alentar a los desarrolladores a escribir código JavaScript más estructurado. Algunos de los marcos son:
- backbone.js
- Ember.js
- AngularJS
- Sencha
- Interfaz de usuario de Kendo
Con esto, hemos llegado al final del artículo de JavaScript MVC. Espero que haya entendido los tres componentes involucrados en la arquitectura MVC.
tutorial web de ruby on rails
Ahora que conoce JavaScript MVC, consulte el por Edureka. La capacitación para la certificación de desarrollo web lo ayudará a aprender cómo crear sitios web impresionantes usando HTML5, CSS3, Twitter Bootstrap 3, jQuery y las API de Google y cómo implementarlo en Amazon Simple Storage Service (S3).
Tienes una pregunta para nosotros? Menciónelo en la sección de comentarios de 'JavaScript MVC' y nos comunicaremos con usted.