7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

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

Scroll to top
Read Time: 3 mins

Spanish (Español) translation by Jesus Yepes (you can also view the original English article)

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:

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".

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

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:

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.

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.

Filtrado

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

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!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.