Patrones de Diseño y JavaScript: Chain

Este pattern en sí no es más que un estilo de sintaxis particular para los métodos un objeto dado, siendo la idea mantener siempre una referencia al objeto inicial a fines de reducir el código necesario para alcanzar un objetivo.

Un ejemplo más que conocido para casi cualquier desarrollador web es el siguiente:

$('#id1')
    .html('HOLA')
    .css('color', '#00F')
    .show();

Para lograr dicho resultado, basta con devolver la referencia al objeto en cada uno de los métodos (que no sea un getter obviamente):

var MyObj = {
	_list: [],
	add: function(o) {
		this._list.push(o);
		// Devolvemos la instancia
		return this;
	}
};

// Chaining en accion
MyObj
	.add(1)
	.add(2)
	.add(3);

Un ejemplo más real, se puede ver en una de las entradas anteriores, en la cual se implementa una cola de ejecución:

var q = new Queue();

q
	.add(task1)
	.add(task2)
	.add(task3)
	.add(task4)
	.proccess();

Sin dudas, este tipo de sintaxis se popularizó gracias a los frameworks DOM, especialmente jQuery (write less do more) que parte de la idea de manejar colecciones de elementos aplicando diversos métodos en cadena al conjunto.


jQuery - write less, do more

Gran parte del exito de jQuery se basa en el API amigable que brinda sumado al mencionado chain, por lo cual es importante notar que el chain un ingrediente sumamente importante a tener en cuenta a la hora de escribir librerías.

En el caso puntual de esta librería (y otras, caso puntual de Zepto) la idea es tener la colección de nodos obtenidos dentro de un objeto con distintos métodos (each, show, hide, etc), los cuales se aplican sobre la colección entera o el primer elemento para luego devolver una referencia al objeto inicial ($(‘selector’)).


Shortlink: http://goo.gl/kTNVz




Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comment

You may use these tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>