Bienvenidos sean a este post, hoy daremos un paso mas adelante con los plug-in.
Si vienen de los posts anteriores hasta ahora hemos visto como manejar los plug-in de terceros para facilitarnos a la hora tanto de manejar distintos temas de nuestras paginas asi como tambien a la hora de aplicar temas esteticos o elementos pero como dijimos en el titulo hoy comenzaremos una serie de posts para entender como crear nuestros propios plug-in ya sea para compartirlos con el mundo asi como para ayudarnos a nosotros, para ello vamos a comenzar con el primer tema.
El alias de selector ($) en el plug-in
Cuando hablamos de eventos en este post, mencionamos que el alias de selector ($) se podia deshabilitar para evitar conflictos, esto lo haciamos a traves de:
$.noConflict();Por lo tanto despues de esta instruccion cualquier llamado debia ser:
jQuery(document).ready(function(){ ...Debiamos reemplazar a $ por jQuery, bueno imaginense tener que hacer esto en un plug-in de gran tamaño, no solamente sera confuso de desarrollar sino tambien de leer al momento de intentar depurarlo ante un error o eventualidad de alguna indole, pero para solucionar este inconveniente se utiliza un alias de manera local en el plug-in, simplemente se define una funcion y una vez finalizado inmediatamente se invoca al objeto jQuery, un ejemplo de esto seria el siguiente:
(function($) {
... instrucciones ...
})(jQuery);La funcion que lo envuelve toma un solo parametro el cual se pasa al objeto global jQuery, como el parametro se llama $ lo podremos usar internamente tranquilamente sin conflictos, prosigamos con el siguiente tema.
Creando nuevas funciones globales
Algunas de las capacidades internas de jQuery son provistas por algo que podemos denominar como funciones globales, aunque en realidad son mas metodos del objeto jQuery pero en la practica son mas parecidas a funciones dentro del namespace jQuery, un ejemplo puede ser $.ajax que podriamos reemplazarlo con una funcion global llamada ajax pero este podria entrar en conflictos con otros lenguajes, pero si lo hacemos dentro del namespace jQuery el conflicto solo se reducira a la libreria, a su vez muchas de las funciones globales provistas por el nucleo de jQuery son metodos de utilidad, que basicamente son atajos provistos para tareas que son frecuentemente necesitadas pero sin muchas dificultades para hacerlas a mano, algunos ejemplos son:
- $.each()
- $.map()
- $.grep()
Las cuales nos facilitan la manipulacion de los arrays, para poder agregar una nueva funcion debemos hacerlo como una propiedad del objeto jQuery:
(function($) {
$.foo = function() {
... instrucciones ...
};
})(jQuery);Y ahora para invocar a esta funcion solo debemos usar:
$.foo();A partir de aqui comenzaremos con un ejemplo para entender mejor como desarrollar nuestros plug-in y para ello crearemos un nuevo directorio en el pc donde almacenaremos nuestros archivos, nuestro primer archivo lo llamaremos develop.html y le agregaremos el siguiente codigo:
develop.html
<html>
<head>
<title>Stock de Verduleria</title>
<link rel="stylesheet" href="estilo.css" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
<script src="plugin.js"></script>
<script src="codigo.js"></script>
</head>
<body>
<div id="contenedor">
<h1>Stock de Verduleria</h1>
<table id="stock">
<thead>
<tr class="uno">
<th>Producto</th><th>Cantidad</th><th>Precio</th>
</tr>
</thead>
<tfoot>
<tr class="dos" id="sumar">
<td>Total</td><td></td><td></td>
</tr>
<tr id="promedio">
<td>Total</td><td></td><td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Pimiento</a></td>
<td>12</td>
<td>5.5</td>
</tr>
<tr>
<td>Berenjena</a></td>
<td>10</td>
<td>3.25</td>
</tr>
<tr>
<td>Ajo</a></td>
<td>20</td>
<td>1.23</td>
</tr>
<tr>
<td>Tomate</a></td>
<td>15</td>
<td>2.29</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
En este caso nos centraremos en una pagina para llevar un control de stock de una verduleria o la seccion de verduleria de un mercado, en el head tendremos primero el archivo con los estilos que aplicaremos a la pagina, estilo.css, luego cargaremos a la libreria de jQuery, lo siguiente sera cargar la libreria que crearemos nosotros y por ultimo el archivo donde estara el codigo que usaremos en la pagina, despues en el body tendremos una tabla con algunos elementos del stock donde indicaremos la cantidad y valor por unidad, en algunos casos tendremos un id y en otros una class para identificarlos y trabajarlos pero eso lo veremos en un momento, nuestro siguiente paso sera crear el archivo con los estilos y para ello en el mismo directorio crearemos un archivo con el nombre de estilo.css y le agregaremos el siguiente codigo:
estilo.css
html, body {
margin: 0;
padding: 0;
}
body {
font: 80% Verdana, Helvetica, Arial, sans-serif;
color: #000;
background: #fff;
}
#contenedor {
margin: 10px 2em;
}
h1 {
font-size: 2.5em;
margin-bottom: 0;
}
h2 {
font-size: 1.3em;
margin-bottom: .5em;
}
h3 {
font-size: 1.1em;
margin-bottom: 0;
}
code {
font-size: 1.2em;
}
a {
color: #06581f;
}
table {
margin: 1em 0;
border-collapse: collapse;
}
th, td {
padding: 2px 8px;
}
thead th {
border-bottom: 1px solid #999;
text-align: left;
}
tfoot td {
border-top: 1px solid #999;
border-top: 1px solid #999;
text-align: left;
}
#sumar td {
font-weight: bold;
}
#promedio td {
font-style: italic;
}
tr.uno {
color: #fff;
background-color: #080;
}
tr.dos {
background-color: #ffa;
}
Este archivo como dijimos se encargara de darle un estilo a la pagina observen como al comienzo establecemos uno general para la pagina y despues para los distintos elementos de la tabla, por el momento no cumplen otra funcion, veamos como quedo nuestra pagina hasta ahora
Ahora con lo visto y comentado vamos a trabajjar en el plug-in y para ello crearemos un archivo con el nombre de plugin.js y le agregaremos el siguiente codigo:
plugin.js
(function($) {
$.sumar = function(array) {
var total = 0;
$.each(array, function(indice, valor) {
valor = $.trim(valor);
valor = parseFloat(valor) || 0;
total += valor;
});
return total;
};
})(jQuery);Primero implementaremos el tema del alias como explicamos anteriormente, despues definiremos nuestra primera funcion que se llamara sumar, para este caso le diremos que recibiremos un array, nuestra primera definicion es una variable llamada total, despues por medio del metodo each pasaremos por todo el array y de cada pasada extraeremos el valor para primero aplicarle un trim para eliminar todo espacio en blanco antes y despues, lo siguiente sera aplicarle un parseFloat para convertirlo de texto a un valor de tipo float o double, es decir un numero, pero con una particularidad de que sino se puede convertir pasaremos el valor de cero, mediante el uso de ese operador logico, despues el valor obtenido se lo sumaremos al valor existente en total, esto lo haremos en todo el ciclo y una vez finalizado devolveremos el valor en total, por ahora solo tenemos esta funcion, nuestro siguiente paso sera crear un nuevo archivo con el nombre de codigo.js y le agregaremos el siguiente codigo:
codigo.js
$(document).ready(function() {
var $stock = $('#stock tbody');
var cantidad = $stock.find('td:nth-child(2)')
.map(function(indice, ctd) {
return $(ctd).text();
}).get();
var sumar = $.sumar(cantidad);
$('#sumar').find('td:nth-child(2)').text(sumar);
});Primero definimos el objeto que sera el cuerpo de la tabla, lo siguiente sera un «array» donde primero le pediremos que encuentre el child indicado, para esta ocasion sera los valores pertenecientes a la cantidad de cada verdura, con la ayuda de map iremos obteniendo cada uno de los valores y con get lo agregaremos al array cantidad, una vez creado lo siguiente sera crear un objeto llamado sumar y en este almacenaremos el resultado de la funcion sumar creado en nuestro plug-in y los datos almacenaados en cantidad, por ultimo en la linea identificada como sumar buscaremos la misma celda que anteriormente y por medio del metodo text le escribiremos el valor devuelto por la funcion, veamos como funciona ahora
Oficialmente ya tenemos nuestro primer plug-in creado y que podemos exportar e implementar a donde queramos, pero esto no se acaba aca porque ahora volveremos al archivo plugin.js y al codigo actual lo modificaremos de la siguiente manera:
(function($) {
$.sumar = function(array) {
var total = 0;
$.each(array, function(indice, valor) {
valor = $.trim(valor);
valor = parseFloat(valor) || 0;
total += valor;
});
return total;
};
$.promedio = function(array) {
if ($.isArray(array)) {
return $.sumar(array) / array.length;
}
return '';
};
})(jQuery);Observen que simplemente agregamos otra funcion despues de la anterior y en el mismo namespace, en este caso sera para sacar un promedio de los valores recibidos, volvemos a hacer como antes para definirlo, tambien recibe un array como argumento, pero ahora tendremos un condicional donde verifica que el valor informado es un array, en caso de no serlo omite la operacion y devuelve un valor en blanco, pero em caso de serlo devolveremos el resultado de la funcion anterior sobre el array dividido por la cantidad de elementos del array, el resto siguue igual que antes, nuestro siguiente paso sera volver al archivo codigo.js y modificaremos el codigo de la sigueinte manera:
$(document).ready(function() {
var $stock = $('#stock tbody');
var cantidad = $stock.find('td:nth-child(2)')
.map(function(indice, ctd) {
return $(ctd).text();
}).get();
var valor = $stock.find('td:nth-child(3)')
.map(function(indice, ctd) {
return $(ctd).text();
}).get();
var sumar = $.sumar(cantidad);
var promedio = $.promedio(valor);
$('#sumar').find('td:nth-child(2)').text(sumar);
$('#promedio').find('td:nth-child(3)').text(promedio);
});La primera modificacion sera un nuevo array llamado valor donde haremos exactamente lo mismo que en la variable cantidad pero en lugar de usar la celda 2 usaremos la celda 3 y cada valor se almacenara en el array, despues detras del objeto sumar crearemos uno nuevo llamado promedio y en este almacenaremos el resultado devuelto por la funcion promedio, y como argumento pasaremos al array valor, por ultimo volvemos a hacer lo mismo que en la linea sumar pero ahora seleccionaremos promedio y buscaremos la celda 3 para incrustarle el resultado de la funcion promedio, con todo esto comentado veamos como quedo la nueva pagina
Con esto ya tenemos nuestra pagina completamente funcional pero a su vez podemos mejorar el codigo de nuestro plug-in mediante la funcion extend, para ello deberiamos modificar el codigo de la siguiente manera:
(function($) {
$.extend({
sumar: function(array) {
var total = 0;
$.each(array, function(indice, valor) {
valor = $.trim(valor);
valor = parseFloat(valor) || 0;
total += valor;
});
return total;
},
promedio: function(array) {
if ($.isArray(array)) {
return $.sumar(array) / array.length;
}
return '';
}
});
})(jQuery);Aplicamos la funcion extend para envolver a las funciones y estas ahora en lugar de ser funciones anonimas como antes se definen como propiedades de extend, se cambia la sintaxis de como definirlas pero a la hora de llamar a estas funciones sera la misma, puede resultar mas practico de utilizar y ver pero todavia somos propensos a conflictos con otras librerias, por esto debemos pasar al sigueinte tema.
Aislando funciones dentro de namespaces
Como dijimos todavia hay una posibilidad de conflictos alrededor de nuestros codigos con otras librerias, para evitar esto podemos envolver a nuestras funciones en un objeto nuevo y de esta forma bajaremos notablemente la posibilidad de esto, para ello deberiamos tomar el codigo de plugin.js y modificarlo de la sigueinte manera:
(function($) {
$.herram = {
sumar: function(array) {
var total = 0;
$.each(array, function(indice, valor) {
valor = $.trim(valor);
valor = parseFloat(valor) || 0;
total += valor;
});
return total;
},
promedio: function(array) {
if ($.isArray(array)) {
return $.herram.sumar(array) / array.length;
}
return '';
}
};
})(jQuery);Es muy similar al anterior pero en lugar de usar extend pasamos un nombre de objeto que contendra las mismas propiedades que usamos en extend, pero observen una particularidad, cuando llamamos a sumar en promedio le pasamos tambien el objeto que definimos porque de lo contrario no lo encontrara, como podran darse cuenta ahora debemos ir al archivo codigo.js y debemos modificar estas dos lineas:
var sumar = $.sumar(cantidad);
var promedio = $.promedio(valor);De la siguiente manera:
var sumar = $.herram.sumar(cantidad);
var promedio = $.herram.promedio(valor);Porque al igual a lo citado anteriormente no encontrara a las funciones pero como dijimos antes esto evitara que tengamos conflictos con otras librerias, queda al criterio de cada uno como quiera usarla, antes de finalizar les dejo un archivo con todo los archivos que trabajamos en este post:
En resumen, hoy emos dado nuesto primer paso en el desarrollo de nuestros propios plug-ins, hemos visto como crear un alias para nuestro comodin ($) de selector, asi como tambien hemos visto a las funciones globales, tambien hemos creado nuestra primer libreria externa y la hemos implementado en un ejemplo, espero les haya sido de utulidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 