comparte el articulo 

Tips para el uso de selector con MooTools

Actualizado el 07/11/2013 < > 0 Comentarios

Resumen: El selector es una de las funciones principales de la mayoría de los frameworks de JavaScript, te damos algunos tips para usarlo correctamente con MooTools

En la mayoría de los frameworks de JavaScript, una de las herramientas más poderosas que se ofrece es la función del selector, a la cual se le conoce comúnmente en Mootools y Prototype como la herramienta del doble signo de dólar ($$), mientras que en jQuery es representada por un sólo signo del mismo tipo ($). Esta función nos permite buscar y encontrar elementos en el DOM y devolverlos en forma de un arreglo.

Por ejemplo, $$(“p”) devolverá un arreglo con todos los elementos en el DOM que cuenten con la etiqueta p, lo que significa que todos estos elementos son de tipo párrafo y ahora podemos manipularlos. Otro ejemplo de mayor alcance sería $$(“.post”), con esta sentencia se obtiene un arreglo con todos los elementos que tienen la clase de “post”. Incluso si añadimos un poco de las ventajas que nos ofrece Mootools, podemos hacer un selector aún más poderoso, como por ejemplo $$(“.post:last-child”), este selector nos permitirá seleccionar el último elemento que tiene la clase “post” en sus atributos.

Cuando se inicia con el uso de MooTools, o JavaScript en general, es común que no se entienda muy bien qué es lo que se debe hacer con esta función. Una de las cosas más importantes a tener en mente al momento de trabajar con esta función, es que devuelve los elementos de tal forma que se puede aplicar cualquiera de los métodos de Mootools enfocados al manejo y manipulación de elementos.

Estos son algunos ejemplos de cómo a menudo el uso de esta función se complica de más:

//Forma en que comúnmente es utilizada esta función
$$('.estado').each(function(el){
    el.set('html','Exito');
});

//Manera corta de hacerlo
$$('.estado').set('html','Exito');

O quizás podemos hacer uso de un ejemplo más complejo, donde se puedan utilizar el encadenamiento de métodos. El encadenamiento de métodos hace que un selector se ejecute varias veces, lo que en conjunto puede afectar en gran medida al rendimiento del sitio.

//Forma en que comúnmente es utilizada esta función
$$('.estado').each(function(el){
	el.set('html','Exito');
	el.highlight();
});

//Manera corta de hacerlo
$$('.estado').set('html','Exito').highlight();

Mootools también te permite aplicar Tween o Morph directamente sobre un elemento, de la siguiente manera elemento.tween(‘color’, ‘#009900’) o element.morph(‘.nombre_clase’). Esto significa que esta permitido utilizar estás funciones a través de la herramienta del doble signo de dólar

//Uso de Tween para cambiar el color de texto del último párrafo en el DOM
$$('p:last-child').tween('color', '#009900');

//Uso de Mortph para aplicar la clase largo
$$('p').morph('.largo

Definitivamente habrá momentos en que debamos usar el método “each” para iterar un arreglo y hacer varias operaciones con cada valor, pero la mayor parte del tiempo esto puede complicar en exceso el código de nuestra aplicación o sitio web. Y esto a su vez, puede desencadenar una reacción que hará más complicado entender el código para futuros usuarios del framework. Mootools ha hecho todo lo posible para que podamos simplificar nuestro código y debemos tratar de utilizar este código más corto cada vez que sea posible.

Publicado el 16/10/2013, última actualización 07/11/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras