jQuery / Creando un plug-in de metodo transversal DOM

Bienvenidos sean a este post, hoy crearemos un metodo transversal en un plug-in.

Los metodos transversales se pueden agregar como cualquier otro a la libreria de jQuery agregandolas como propiedades a $.fn tal como vimos en este post, y ahi mencionamos que todos los metodos nuevos que agreguemos deben operar en el conjunto de elementos encontrados y devolver un objeto jQuery para permitir encadenar otros metodos de este, los metodos transversales son similares a estos pero el objeto que devolvemos debe apuntar a un nuevo conjunto de elementos, para entender este concepto vamos a estudiar un ejemplo, para ello usaremos el codigo del post anterior, en caso de no poseerlo les dejo un link:

Una vez desargado solo deben extraer todos los archivos en un directorio, con esto realizado nuestro primer paso sera ir al archivo plugin.js y agregaremos el siguiente bloque de codigo:

(function($) {
	$.fn.columna = function() {
		var $celda = $();
		this.each(function() {
			var $td = $(this).closest('td, th');
			if ($td.length) {
				var colNum = $td[0].cellIndex + 1;
				var $columnaCelda = $td
					.closest('table')
					.find('td, th')
					.filter(':nth-child(' + colNum + ')');
				$celda = $celda.add($columnaCelda);
			}
		});
		return this.pushStack($celda);
	};
})(jQuery);

Esta sera nuestro metodo transversal, se llamara columna, primero definiremos un objeto llamado celda el cual tendra un selector vacio, al final entenderemos porque, nuestro siguiente paso sera pasar por todos los elementos mediante each, en este primero definiremos un objeto con el nombre de $td, este a traves del metodo closest seleccionara las columnas (td) y encabezados (th) y los almacenara en este objeto, el siguiente paso sera un condicional donde si algo fue seleccionado podremos trabajarlo, dentro del bloque primero definiremos un objeto que contendra el numero de columna, nuestro siguiente paso sera crear un nuevo objeto llamado columnaCelda, en este almacenaremos cada una de las celdas de la columna seleccionada y para ello usaremos el numero de columna obtenido anteriormente, y con esto obtenido las iremos agregando al objeto creado al comienzo, una vez finalizado todo simplemente devolvemos el objeto final pero con una particularidad, le agregamos el metodo pushStack el cual tomara el objeto y lo asignara al stack lo cual permitira que pueda ser accedido por otros metodos como addBack o end, por ejemplo, con esto comentado podemos pasar a la siguiente modificacion y para ello iremos al archivo codigo.js y le agregaremos el siguiente bloque de codigo:

$(document).ready(function() {
	$('#stock td').click(function() {
		$('#stock td.active').removeClass('active');
		$(this).columna().addClass('active');
	});
});

Aqui asociaremos el evento click a las columnas de la tabla, la primera sera seleccionar todas las columnas con la clase active,, la removeremos y despues al elemento seleccionnado le aplicamos el metodo creado anteriormente y al objeto devuelto se le aplica nuevamente la clase active, com todo esto comentado veamos como trabaja

Como pueden ver cada vez que clickeamos sobre las columnas le aplicamos a esta la clase active, y a su vez seguimos manteniendo una conducta fundamental como es la posibilidad de poder encadenarle otros metodos o funciones.

En este post hablamos sobre como personnalizar nuestro selector y algunos temas a tener en cuenta si queremos evitar problemas de performance al momento de seleccionar elementos DOM de las distintas formas que posee jQuery, si bien comentamos que la performance no esta entre nuestras prioridades porque podemos caer en dos problemas pero una buena practica que no comentamos es minimuzar a la menor cantidad de repeticiones posibles de selectores y metodos transversales, y para ello tenemos dos operaciones como son el encadenamiento y el cacheo de objetos, para entender este concepto vamos a tomar la funcion marcar que tenemos en codigo.js:

function marcar() {
	$('#stock').find('tr.alt').removeClass('alt');
	$('#stock tbody').each(function() {
		$(this).children(':visible').has('td')
			.filter(':grupo(1)').addClass('alt');
	});
}

Sobre esta funcion la vimos en este post, lo que haremos a continuacion es modificarla para aplicarle las tecnicas mencionadas anteriormente, para aplicar encadenamiento lo modificaremos de la siguiente manera:

function marcar() {
	$('#stock')
	.find('tr.alt').removeClass('alt').end()
	.find('tbody').each(function() {
		$(this).children(':visible').has('td')
			.filter(':grupo(1)').addClass('alt');
	});
}

Observen como unicamente seleccionamos a la tabla stock y despues por medio de find iremos seleccionando los distintos elementos e iremos aplicando las distintas acciones, salvo el each que sigue siendo el mismo, como curiosidad agregamos un end despues de remover la clase y antes de buscar el tbody para aplicar nuevamente la clase, si lo comparan con el original se elimino un selector pero en codigo mas complejos podemos eliminar muchos mas, ahora tomemos nuevamente el codigo original y apliquemos el cacheo de objetos:

var $stock = $('#stock');
function marcar() {
	$stock.find('tr.alt').removeClass('alt');
	$stock.each(function() {
		$(this).children(':visible').has('td')
			.filter(':grupo(1)').addClass('alt');
	});
}

Para este tipo de tecnica primero definiremos un objeto donde esta el elemento principal que trabajaremos y despues simplemente lo usaremos y le asignaremos el find para buscar los elementos que debemos modificar, basicamente es muy parecido a lo visto en el codigo original pero en lugar de los dos selectores pasamos el objeto en cuestion, despues el resto es todo lo mismo, si bien la funcionalidad sera exactamente la misma pero en los dos ultimos casos tendremos una mejor performance con respecto al original, en ambos la performance mejora porque siempre trabajamos en la misma direccion de memoria y no tenemos todo fragmentado en varias partes, antes de finalizar les dejo los archivos del proyecto y codigos finales trabajados en este post:

En resumen, hoy hemos visto como crear un plug-in de un metodo transversal, cual es la caracteristica que debemos tener para mantener compatibilidad con otras librerias, despues lo implementamos en un ejemplo y por ultimo hemos repasado un poco de performance y hablamos sobre dos tecnicas para tomar como buena practica, espero les haya sido de utilidad 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.