Extender Jquery para crear componentes web personalizados

1. EXTENDER JQUERY PARA CREAR COMPONENTES WEB
PERSONALIZADOS
Autor: Ing. Hector Curbelo Barrios.
Email: hcurbelo@gmail.com
Quito, Ecuador
Año 2017

2. INTRODUCCION
En el artículo anterior vimos cómo podemos hacer para usar jQuery como MVC y HMVC,
y de esta manera hacer mejor la lógica de nuestro código, así como desacoplamiento de
funcionalidades, extensibilidad de nuestra aplicación entre otras.
En el presente artículo pretendo mostrarles cómo podemos crear nuestros propios
componentes personalizados y adaptados a la aplicación que estamos realizando.
Moviéndonos en este contexto nos encontramos con algunos conceptos importantes
para entender bien todo lo relacionado a los componentes.
La programación orientada a componentes (que también es llamada basada en
componentes) es una rama de la ingeniería del software, con énfasis en la descomposición
de sistemas ya conformados en componentes funcionales o lógicos con interfaces bien
definidas usadas para la comunicación entre componentes. Un componente de
software es un elemento de un sistema que ofrece un servicio predefinido, y es capaz de
comunicarse con otros componentes.
La capacidad de ser reutilizado (reusability), es una característica importante de los
componentes de software de alta calidad. Un componente debe ser diseñado e
implementado de tal forma que pueda ser reutilizado en muchos programas diferentes.
Si hacemos una búsqueda podemos encontrar que existen importantes aportes a estos
temas, aquí les dejos un par de link:
https://www.npmjs.com/package/jquery-component
https://jqueryui.com/demos/
https://speckyboy.com/50-fundamental-jquery-controls-and-rich-ui-components/
https://es.slideshare.net/YnonPerek/jquery-ui-16428949

3. DESARROLLO
jQuery es uno de los Framework o Librería JavaScript más usado que existen en la
actualidad, es muy robusto para el uso del DOM, además que es fácil de usar y de
aprender.
Podemos encontrar algunos frameworks que usan estos conceptos como parte de su
lógica como es, por ejemplo:
React: https://facebook.github.io/react/
Si buscamos encontraremos otros que también podemos usar, pero para los que amamos
jQuery nos cuesta apartarnos de él, por lo que buscamos formas de potenciarlo para
seguir usándolo.
Como pudimos leer en la introducción vamos a ver cómo podemos extender jQuery para
crear nuestros propios componentes Web personalizados:
Pongamos una situación, por ejemplo:
Estamos desarrollando una aplicación Web, y requerimos crear varios <select></select>
en diferentes partes en nuestro desarrollo y que además el contenido de estos select se
va a generar dinámicamente, ya sea desde nuestra base de datos o un servicio Web.
Usualmente en cada momento que lo vamos a crear ahí creamos la etiqueta y la
llenamos, esto es muy tedioso sobre todo cuando el desarrollo es grande, además es
bueno reutilizar un código y hacerlo uno salo vez.

4. Pues para solucionar esto realizamos nuestros componentes y luego solo lo
reutilizamos, vamos a ver un ejemplo:
1. Partiendo de la organización HMVC del artículo anterior tenemos:
2. Ejemplo de un componente:
Veamos como creamos un componente, en este caso lo haremos con un <select>,
por lo que dentro del directorio Components creamos un archivo con el nombre
select.js:
El código:
jQuery.extend
({
select:function ()
{
var that = this;
//-- defined var
var $select = $('<select class="" id=""></select>');
//--Create Message view
this.input_select = function(option,id,content_id,class)
{
$select.attr('id',id);
$select.attr(class);
$.each(option, function (key, val)
{
$select.append('<option value="'+val+'">'+val+'</option>');
});
$('#'+content_id).append($select.change(function ()
{
that.get(val);
}
));
}
//--Select Get
this.get = function (val)
{
alert(val);
});
}
});
+ Components
+ Project Name
+ Modules
- Components
- Select.js

5. Vamos a explicar el código:
var $select = $('<select class="" id=""></select>');
Creamos un objeto que contiene los elementos de una select básico.
this.input_select
Esta es la función encargada de crear el select, se le pasan cuatro parámetros, que como
son:
Option: valores que van a ser añadidos dentro del select como las opciones de este.
Id: Si quieres que el select tenga un identificador único.
Content_id: Es el identificador del contenedor donde vas a visualizar el select.
Class: La clase del estilo que le vas a aplicar al select.
Con la propiedad append podemos adicionar elemento a cualquier objeto del DOM en
nuestro HTML, además podemos asignarle funciones a nuestro elemento, como se
demuestra en anterior código.
3. Como usamos el componente que hemos desarrollado.
1. Primero, creamos una función para la inclusión dinámica de los componentes.
2. Aquí incluimos dinámicamente el componente <select>, lo instanciamos y creamos el
objeto, entonces hacemos uso de las funciones creadas como se muestra en el código:
Bueno espero les aporte sus desarrollos, alguna duda o consultas, contactarme.
Ing. Hector Curbelo Barrios
hcurbelo@gmail.com
Query.component = function( file, options )
{
var url=baseurl+"assets/component/"+file+'.js';
options = $.extend( options || {}, {
dataType: "script",
cache: true,
url: url,
async: false
});
return jQuery.ajax( options );
};
//--Include View intance Object
$.component("select");
var obj_select = new $.select();
obj_select.input_select_bk(option,'bkinfo-select','content-bkinfo','Class name')