JQUERY HMVC Autor: Quito, Ecuador Año 2017

Transcripción

1 JQUERY HMVC Autor: Ing. Hector Curbelo Barrios. Quito, Ecuador Año 2017

2 INTRODUCCION Hierarchical Model View Controller (HMVC), es decir, un esquema jerárquico del patrón (MVC) ambos son patrones de diseño de arquitectura de software donde el primero es consecuencia del segundo, que separan los datos y la lógica de negocio de una aplicación, de la interfaz de usuario. La diferencia entre los dos es solo la forma en la que organizamos el código. Esta Arquitectura es muy usada para el desarrollo en el Backend de aplicaciones Web fundamentalmente. Veámoslo gráficamente para apreciar mejor ambas arquitecturas: 1. Diagrama MVC. 2. Diagrama HMVC. Como se muestran en las anteriores figuras la diferencia es solo la forma de estructurar nuestro código, dentro de directorios en un proyecto determinado. Sin

3 dudas los dos son muy usados y nos aportan muchas ventajas a la hora de desarrollar una aplicación, como por ejemplo separación de concepto, reutilización de código y también podemos mencionar la extensibilidad del software por la separación de sus capas. Como le comentaba hasta hace poco solo se usaba en el Backend de las aplicaciones que utilizan esta arquitectura, pero en estos tiempos también se ha convertido en una alternativa de diseño para el Frotend de muchas aplicaciones, algunos framework para aplicaciones del lado del cliente lo traen incorporados como los populares Angular.js y BackBone.js, por eso les traigo este material para usar jquery con arquitectura MVC HMVC. DESARROLLO Particularmente jquery es uno de los Framework o Librería JavaScript más usado que existen en la actualidad, aunque no trae incorporado la arquitectura MVC podemos usarlo con este diseño y mejorar la organización y desacoplamiento de las funciones de nuestras aplicaciones. Sin más aquí va el contenido de cómo hacer MVC y HMVC a jquery: 1. El Controlador. El controlador es el encargado de hacer de intermediario entre la Vista y el Modelo: El usuario realiza una peritación a través de la Vista, esta a su vez le pide al Controlador lo que necesita para hacer lo que ha requerido el usuario, por lo que el Controlador pide al Modelo si fuera necesario la información requerida y se la pasa a la Vista para que muestre al usuario el resultado de su petición. Como Definimos un controlador, pues es sencillo usando jquery.extend:

4 jquery.extend( Controller: function(model,view) aqui tu codigo del controlador /** * listen to the views function */ var vlist = $.ViewListener( ); ); view.addlistener(vlist); //--intance all object declate $(function() var model = new $.Model(); var view = new $.View(); var controller = new $.Controller(model, view); ); Como pueden observar definimos nuestro controlador usando jquery.extend con el nombre Controller, dentro encontramos la función $.ViewListener la que guardamos en vlist, que a su vez se le pasa como parámetro a la función view.addlistener(vlist). Al final de código nos encontramos las definiciones del modelo, de las vistas y del controlador, en caso del controlador pasándoles modelo y vista como parámetros. $.ViewListener: Es una fusión dentro de la cual se redefinirán las funciones que fueran necesarias redefinir de la vista. view.addlistener(vlist): Esta función se encarga de enviar a la vista todas las funciones de esta que fueron redefinidas. 2. El Modelo. El modelo cumple con la función de comunicarse con el Backend o Servicio Web, y enviarle la información recibida al controlador, además de manejar el cache de los resultados obtenidos.

5 Definición del Modelo: jquery.extend ( Model:function () var cache = new Array(); var cachestatus = false; this.yourfunction=function () ); //--Cache set data function objectdata(data) $.each(data, function(item) cache[item] = data[item]; ); ; //--return the cache data this.returncache=function() return cache; ; //--Cache clrear data this.clearcache = function() cache = new Array(); ; //--return if cache was modify this.cachestatus=function () return cachestatus; //--set defoult cache status this.cachedefoult= function () cachestatus=false; //--return function error ocurred this.returnerror=function() return error; //--clear error this.clearerror=function () error=null; Como podemos observar tenemos varias funciones que nos ayudan a que el modelo tenga todo el control de los datos que maneja. cache: Es un arreglo que controla toda la información que se genera en el modelo y que tienen asociado una serie de funciones utilitarias para su funcionamiento y que están claramente comentadas en la definición del Modelo.

6 3. La Vista. La vista tiene la funcionalidad re aceptar las peticiones del usuario, mostrando los resultados de sus peticiones, así como los aspectos visuales del sistema (UI). Definición de la vista: jquery.extend ( View:function () var that = this; var listeners = new Array();, this.addlistener = function(list) listeners.push(list); ; ViewListener: function(list) if(!list) list = ; return $.extend( );, list); Como podemos ver, la definición de la vista mantiene la misma estructura del resto, pero con la particularidad que tenemos un arreglo listeners donde guardaremos todas las funciones que van a ser redefinidas en el controlador, además tenemos ViewListener donde la vista maneja la lista de funciones que serán redefinidas en el controlador. 4. Organización de los directorios en arquitectura HMVC. Para definir el HMVC solo es una organización de directorios que dan una organización del código y funcionalidad del sistema, aquí les dejo una imagen de cómo puede quedar esta arquitectura:

7 Solo se incluye en la web el controlador para el uso de el modulo en específico que se va a usar como, por ejemplo: <script type="text/javascript"src="assets/modules/modulename/controller/controller.js"></script> Ahora veamos un código completo con un ejemplo real: jquery.extend( Controller: function(model,view) model.getdatauser(); view.createuser(model.returncache()); model.cachedefoult(); model.clearcache(); ); /** * listen to the views function */ var vlist = $.ViewListener( userclicklisten : function () alert( click me ); ); view.addlistener(vlist); //--intance all object declate $(function() var model = new $.Model(); var view = new $.View(); var controller = new $.Controller(model, view); );

8 jquery.extend ( View:function () var that = this; var listeners = new Array(); this.userclicklisten = function() $.each(listeners, function() listeners[i].userclicklisten(); ); ;, this.addlistener = function(list) listeners.push(list); ; ); ViewListener: function(list) if(!list) list = ; return $.extend( userclicklisten: function(), list);

9 jquery.extend ( Model:function () var cache = new Array(); var cachestatus = false; this.getdatauser =function () $.ajax( url: baseurl+'index.php/getuser', data : 'jwt': LWT, type: 'POST', datatype: 'json', async: false, error: function(xhr) error=xhr.statustext+' '+' E:'+xhr.status;, success: function(data) if(data.result!==null) objectdata(data); cachestatus = true; else cachestatus = false; ); ); //--Cache set data function objectdata(data) $.each(data, function(item) cache[item] = data[item]; ); ; //--return the cache data this.returncache=function() return cache; ; //--Cache clrear data this.clearcache = function() cache = new Array(); ; //--return if cache was modify this.cachestatus=function () return cachestatus; //--set defoult cache status this.cachedefoult= function () cachestatus=false; //--return function error ocurred this.returnerror=function() return error; //--clear error this.clearerror=function () error=null;