Errores comunes que debemos evitar al trabajar con jQuery

Mencionamos algunos de los errores que comunmente se cometen al manejar jQuery dentro de nuestros proyectos.

JQuery es un framework tan sencillo de utilizar que a veces tendemos a recurrir a él más de la cuenta, lo confundimos con un lenguaje de estilo y lo empleamos para realizar tareas que fácilmente pueden realizarse con JavaScript puro, olvidándonos que su uso demanda un mayor esfuerzo y rendimiento.

Al llevar a la práctica esta clase de situaciones, surgen errores y descuidos que nos hacen omitir las cosas más básicas para el correcto manejo del framework.

A continuación enlistaremos una serie de errores que son muy fáciles de solucionar pero que por lo general omitimos por su misma sencillez. Al corregir estos errores lograremos un mejor performance de nuestro sitio y desarrollaremos más acorde a los estándares.

No utilizar la última versión de jQuery

Es común que por practicidad, descarguemos una versión de jQuery y estemos desarrollando con ella durante años, y puede que esto te sirva para las tareas comunes, pero cuando tu proyecto empiece a crecer este demandará un desarrollo más elevado, por lo que puedes toparte con ciertos bugs que quizás ya fueron corregidos en las versiones más recientes y que no te permiten seguir trabajando con tu versión vieja.

Además de esto, el factor plugin es muy relevante para decidir migrar a una versión nueva, ya que existen muchos plugins que te ahorrarán gran cantidad de tiempo de desarrollo, pero es muy probable que estos sólo funcionen con las versiones más recientes del framework.

Quizás sea muy difícil cambiar proyectos viejos a versiones nuevas, por los problemas que puedan surgir por compatibilidad, pero por lo menos puedes intentar incluir la versión más reciente de jQuery cada vez que inicies un proyecto nuevo.

No cargar tu jQuery desde Google

Si tu número de visitantes al mes no sobrepasa la estratosférica cifra del billón debes considerar seriamente utilizar una versión de jQuery cargada desde el host de Google Code. De esa manera ahorrarás considerablemente ancho de banda y la librería cargará más rápido, ya que es muy probable que el usuario ya tenga el archivo de caché de la página web de Google.

Las peticiones se harán utilizando los CDN de Google, los cuales se encargarán de distribuir el contenido que utilizaremos para desarrollar. Los beneficios que trae esto es disminuir la latencia de respuesta, el aumento de paralelismo para evitar sobrecargar innecesariamente de servidores y conlleva a un mejor almacenamiento en caché.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

No tener una copia de jQuery en tu servidor

Es recomendable tener siempre una copia de jQuery en tu servidor como fallback, si el proyecto aún se encuentra en desarrollo y por alguna situación te encuentras sin internet y el caché fue borrado, no podrás seguir trabajando si cargas tu código desde Google. El problema también se puede presentar si el servidor de Google Code falla, aunque esto es menos probable.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
<script>window.jQuery || document.write("</script><script src='js/libs/jquery-1.7.2.min.js'>\x3C/script>")</script> 

No utilizar el encadenamiento

JQuery nos ofrece una gran propiedad que nos permite encadenar llamadas a métodos, lo que permite mejorar el rendimiento y nos ahorra líneas de código. Es común ver en el código sentencias donde se manda llamar a un selector para englobar a los mismos elementos y aplicar diferentes funciones en distintas líneas de código.

Al momento de realizar operaciones con jQuery, no es necesario llamar al elemento cada vez que queramos manipularlo. Si deseas realizar varias manipulaciones en una misma línea simplemente tenemos que usar el encadenamiento.

En lugar de esto:

jQuery("#elementoId").show();
jQuery("#elementoId").css("color", "blue");

Haremos esto:

jQuery("#elementoId").show().css("color", "blue");

No guardar en variables

Si utilizarás un tipo de llamada a elementos mediante selectores en más de una ocasión, debes guardar dichas llamadas en una variable para crear un tipo de caché, que te permita utilizarlo más adelante sin necesidad de volver a examinar el DOM. Esto permite mejorar la performance del sitio y hará que el código luzca más limpio.

var $var_elemento = jQuery("#elementoId").hide();
//Otras operaciones
$var_elemento.show();

No utilizar JavaScript puro

Si bien jQuery es un framework que en teoría viene a simplificar lo que se puede realizar con JavaScript, tenemos que recordar que aún existen muchas operaciones que pueden resultar mejor manejarlas con JavaScript puro. Si es una operación sencilla como un set o un get de atributos y parámetros, o quizás una operación modular o de herencia, en estos casos podemos omitir el uso del framework y simplemente realizarlos con JavaScript.

No revisar los plugins antes de incluirlos

Una buen práctica para llevar a cabo un desarrollo, es siempre revisar los plugins que elegimos antes de empezar a utilizarlos de lleno en nuestro código. Hay ciertas pistas que nos harán darnos cuenta si el plugin no vale la pena, por ejemplo si el archivo que lo contiene pesa más que la misma librería significa que algo anda mal, también debemos revisar que este sirva en todos los navegadores y si funciona con un dispositivo móvil.

Confundir jQuery con CSS

Debes evitar cometer este error al momento de aplicar estilos a elementos, recuerda que CSS es una herramienta mucho más rápida y que fue diseñada exclusivamente para eso. Si en tu código observas varias líneas que únicamente se dedican a aplicar estilos a los elementos es mejor que busques reemplazarlas con sentencias CSS.

Usar jQuery para hacer todas las validaciones

Recuerda siempre que jQuery es un frameworks de JavaScript, por lo que el lenguaje debe de permanecer del lado cliente. Con esto no queremos decir que no debas hacer uso de peticiones AJAX, lo que tratamos de explicar es que no debes confiar todas tus validaciones a jQuery.

Siempre que hagas algún tipo de inserción a una base de datos o llamados a controladores que tienes en tu servidor, debes de realizar una segunda verificación de los datos con el lenguaje de lado servidor que estés utilizando.