Novatos jQuery - consejo rápido: deja de lanzarte a la piscina

A pesar de que jQuery ha estado disponible durante años, aún hay un error que veo cada día más.

Ejemplo #1

Considerando este código:

$('.nav a').click(function() {

$(this).hide();

$(this).css('color', 'red');

$(this).show();



alert('something else');



$(this).hide();



return false;

});

El código de arriba es demasiado complicado por varias razones. No te centres en lo que hace el código (es una tontería). Quiero que te fijes en todas las referencias a $(this).

Piensa en el DOM como en una piscina.

Piensa en el DOM como en una piscina. ¿Te acuerdas cuando eras un pequeño, y te tirabas en la piscina para coger monedas, mientras tus padres hacían como que te miraban? Esta va a ser nuestra alegoría.

Cada vez que usas $('.someClass'), jQuery se tira a la piscina (DOM) para buscar esa moneda (o nodos). Así que cuando lo referencias varias veces en una función... es saltar mucho a la piscina. O, para terminar con la alegoría, es malgastar recursos, innecesario. ¿Por qué llamar a jQuery si nisiquiera te hace falta?. Deberías usar lo que llamamos "cacheo".

$('.nav a').click(function(e) {

 var anchor = $(this);



 anchor

    .hide()

   .css('color', 'red')

   .show();



 alert('something else');



 anchor.hide();



 e.preventDefault();



});

Esto es mucho más limpio. A pesar de que los navegadores modernos son increíblemente rápidos hoy en día, y van a ocuparse de tu pobre código lo mejor que pueden, deberías intentar escribir código eficiente, y ahorrarte saltar tantas veces a la piscina. Ahora, técnicamente, si le pasas a jQuery un nodo del DOM, como this, no vuelve a buscar en el DOM. Simplemente lo devuelve como un objeto jQuery.

Sólo por que la diferencia de rendimiento entre los dos códigos sea prácticamente inapreciable, vamos a escribir mejor código para nosotros mismos.

Ejemplo 2

Vamos a considerar un ejemplo un poco más complicado. Tabs

$('.tabs li').css('position', 'relative');



$('.tabs li').click(function() {

 $('.tabs li').removeClass('active');

 $(this).addClass('active');

 $(this).load('someHref', function() {} ); // example

 $(this).css('top', '1px');

});

Este código está por todos los sitios. Es feo e ineficiente. La solución número uno es ocuparse de todo ese CSS. Sólo deberías poner estilos en tu JavaScript si los valores son creados dinámicamente. Por ejemplo, si necesitas calcular la posición exacta dónde un elemento debería aparecer en pantalla, podrías usar .css('left', calculatedValue). En este caso, puedes ser exportado a una hoja de estilos externa. Esto nos deja con:

$('.tabs li').click(function() {

 $('.tabs li').removeClass('active');

 $(this).load('someHref', function() {} ); // example

 $(this).addClass('active');

});

Después, de nuevo, ¿por qué seguimos consultando el DOM para .tabs li y $(this)? Deja de saltar a la piscina. Vamos a "cachear" .tabs li.

var tabs = $('.tabs li');



tabs.click(function() {

 tabs.removeClass('active');

 $(this).load('someHref', function() {} ); // example

 $(this).addClass('active');

});

Mejor, pero aún estamos llamando dos veces a $(this), lo cual no es un gran problema. Pero, por mi experiencia, si no te ocupas de eso desde el principio, el número de veces que lo uses irá incrementando.

var tabs = $('.tabs li');



tabs.click(function() {

 var tab = $(this);

 tabs.removeClass('active');

 tab.addClass('active')

   .load('someHref', function() {} ); // example

});

Filtrado

Otra solución (un poco menos optimizada) puede ser usar filtrado.

var tabs = $('.tabs li');



tabs.click(function() {

 tabs.removeClass('active')

     .filter(this)

     .addClass('active')

     .load('someHref', function() {} ); // example

});

La diferencia en este caso es que, en vez de referenciar a $(this), estamos usando el método filter() para reducir la colección de elementos hasta el único que hemos clicado.

Qué deberías llevarte

Si, el mundo no se va a acabar si haces referencia a $('.tabs') varias veces en una misma función. Los motores JavaScript son muy rápidos hoy en día. Si testearas el rendimiento haciéndolo un par de miles de vees, la diferencia en tiempo de ejecución pueden ser de un par de cientos de milisegundos. Pero aún así, la pregunta: ¿Por qué lo harías?

A veces, cuando usamos capas de abstracción como jQuery, es fácil olvidar que $('.tabs') en realidad es una función que devuelve un buen trozo de código. Debería de tenerse en cuanta estos conceptos y aplicarlos a JavaScript en general, no sólo a jQuery

Usa las técnicas de cacheo para escribir código más limpio... por tí.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!