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.

1. JQUERY HMVC
Autor: Ing. Hector Curbelo Barrios.
Email: hcurbelo@gmail.com
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. 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.
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);
});

5. Definición del Modelo:
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.
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;
}
}
});

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:
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:
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);
}
});

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;
}
}
});