jQuery / Desarrollando plug-ins – 2da. parte

Bienvenidos sean a este post, hoy continuaremos con el este tema que empezamos en el post anterior.

Agregando metodos de objetos jQuery

Mucha de las funcionalidades internas son metodos instanciados de objetos y aqui es donde realmente brillan, esto nos da la posibilidad de crear funciones que trabajan como parte del DOM, ya hemos visto como agregar nuevas funciones para extender nuestra libreria, hacer instancias es similar pero en su lugar extendemos al objeto jQuery.fn:

jQuery.fn.miMetodo = function() {
	... instrucciones ...
};

Pasamos el objeto seguido del nombrre del nuevo metodo y con function definiremos las instrucciones asociadas a este nuevo metodo, ahora para llamarlo simplemente haremos esto:

$('div').miMetodo();

De esta forma las instrucciones se ejecutaran cada vez que se invoque al metodo, si bien podriamos haber usado una funcion global dado que no usamos los nodos DOM coincidentes de ninguna forma, ya que la implementacion de un metodo razonable actua sobre un contexto, sobre esto hablaremos a continuacion.

Nota:
jQuery.fn es un alias para jQuery.prototype, proporcionado para la concisión.

Contexto de un metodo de un objeto

La palabra magica this dentro de cualquier metodo o funcion en un plug-in esta hecho para establecer que es el objeto jQuery actual, por lo tanto podemos usar a este en cualquier llamado en el metodo o extraer los nodos DOM para trabajar con ellos, para entender este concepto vamos a realizar un ejemplo simple pero para ello trabajaremos con el ejemplo del post anterior, sino lo tienen les dejo un link con los archivos:

En un directorio simplemente extraigan todos los archivos, con esto realizado vamos a trabajar con el ejemplo, para ello vayan al archivo plugin.js y dentro de la funcion que usamos de entorno y despues del entorno con las funciones anteriores agregaremos el siguiente codigo:

$.fn.cambiaClase = function(clase1, clase2) {
	if (this.hasClass(clase1)) {
		this.removeClass(clase1).addClass(clase2);
	}
	else if (this.hasClass(clase2)) {
		this.removeClass(clase2).addClass(clase1);
	}
};

Este nuevo metodo sera para intercambiar entre dos clases informadas, primero estableceremos el nombre del metodo, despues recibira dos valores (para cada clase a trabajar) y en el bloque tenemos un condicional donde primero verificaremos por medio de this si el elemento actual posee la clase1 informada, en caso de ser verdadero la removeremos y agregaremos la clase2 informada, despues tenemos un else donde verifica si esta la clase2 y hace lo mismo que en el bloque anterior pero removiendo la clase2 y agregando la clase1, es decir con esto haremos un cambio de clases, nuestro siguiente paso sera ir al archivo codigo.js en el cual agregaremos el siguiente bloque de codigo:

$(document).ready(function() {
	$('table').click(function() {
		$('tr').cambiaClase('uno','dos');
	});
});

En este caso aplicamos el evento click a la tabla dentro de este a cada elemento tr le aplicaremos el metodo que definimos anterioremente y le pasamos las dos clases que intercambiaremos, como usamos a this lo aplicara a cada uno de ellos, con todo esto comentado veamos como trabaja ahora nuestra pagina

Pero esto es solo el comienzo pasemos al siguiente tema.

Iteracion implicita

Una cosa a tener en cuenta es que un metodo de jQuery puede coincidir con ningun, uno o muchos elementos, por lo tanto al momento de diseñar un plug-in se debe contemplar todos estos escenarios, si tomamos el ejemplo anterior este utiliza hasClass que solo examina el elemento coincidente pero en muchas ocasiones debemos evaluar elemento por elemento y actuar en consecuencia, para garantizar esto la mejor forma y mas sencilla es con each, este nos fuerza a una iteracion implicita la cual mantiene una consistencia entre el plug-in y los metodos internos, y gracias a this se referenciara a cada elemento dentro del each permitiendo que trabajamos de forma independiente en cada uno de ellos, tomemos el codigo anterior en plugin.js y modifiquemoslo de la siguiente manera:

$.fn.cambiaClase = function(clase1, clase2) {
	this.each(function() {
		var $e = $(this);
		if ($e.hasClass(clase1)) {
			$e.removeClass(clase1).addClass(clase2);
		}
		else if ($e.hasClass(clase2)) {
			$e.removeClass(clase2).addClass(clase1);
		}
	});
};

Tomamos el concepto anterior y lo aplicamos un this para que trabaje en el elemento seleccionado y por medio de each procesaremos cada uno de ellos, despues en una variable almacenaremos a this y solamente cuando este elemento tenga alguna de la dos clases por medio de hasClass tal como hace anteriormente , si lo prueban ahora funcionara de la siguiente forma

Ahora no afecta a todos las lineas como en el ejemplo anterior sino solamente a las que tienen las clases involucradas pero esto se puede mejor de una forma muy sencilla, para ello tomaremos esta linea:

this.each(function() {

Y la modificaremos de la siguiente manera:

return this.each(function() {

Esta simple modificacion no modifica lo visto anteriormente pero si posibilita otra conducta como es el encadenamiento, es decir ahora de solo procesar cada elemento y actuar esta lo procesara y lo devolvera para cada uno de ellos pero nos da la posibilidad de poder encadenar otra funcion detras de esta, es decir ahora si tenemos un metodo hecho y derecho, en el proximo post nos seguiremos divirtiendo con esto y otros temas, antes de finalizar les dejo un link con todos los archivos y los codigos finales en este post:

En resumen, hoy hemos visto como crear nuestros propios metodos para utilizarlos con objetos de jQuery, desde algo bien simple hasta la forma de poder permitir que se encadene tanto con otros metodos como funciones internas de jQuery, 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.