Consejos y trucos para mejorar tu código jQuery

Recientemente hemos estado charlando y comentando cómo optimizar y mejorar el código jQuery que escribimos para nuestros proyectos. No solo a nivel de rendimiento sino también a nivel de legibilidad, lo cual es muy importante en proyectos de cierta envergadura.

Así que hemos decidido compartir con vosotros algunos de los trucos que empleamos y que otros autores (Mathew Carella) también apoyan.

Cacheo de elementos DOM

Recorrer el DOM y encontrar un elemento en ocasiones es muy costoso, así que intentemos crearnos una caché de los elementos con los que trabajamos.

// Mal

h = $(‘#element’).height();
$(‘#element’).css(‘height’,h-20);

// Bien
$element = $(‘#element’);
h = $element.height();
$element.css(‘height’,h-20);

Evita variables globales

Con jQuery y con JavaScript en general es mejor asegurarte que las variables tienen un ámbito correcto dentro de las funciones.

// Mal

$element = $(‘#element’);
h = $element.height();
$element.css(‘height’,h-20);

// Bien
var $element = $(‘#element’);
var h = $element.height();
$element.css(‘height’,h-20);

Utiliza notación Húngara

Si colocas un $ delante de tus variables es más fácil reconocer que dentro de ellas hay un elemento jQuery.

// Mal

var first = $(‘#first’);
var second = $(‘#second’);
var value = $first.val();

// Mejor
var $first = $(‘#first’);
var $second = $(‘#second’),
var value = $first.val();

Utiliza encadenamiento de variables

En lugar de tener múltiples sentencias donde declares variables utiliza solo una y encadena las diferentes variables, como recomendación coloca las variables sin valor al final.

var 

 $first = $(‘#first’),
 $second = $(‘#second’),
 value = $first.val(),
 k = 3,
 cookiestring = ‘SOMECOOKIESPLEASE’,
 i,
 j,
 myArray = {};

Utiliza ‘On’

Las versiones más modernas de jQuery han cambiado algunas de las funciones más comunes como click() por esta otra forma on(‘click’). Con la versión 1.7 de jQuery este último ejemplo es la opción preferida a utilizar para agregar eventos a los elementos del DOM.

// Mal

$first.click(function(){
$first.css(‘border’,’1px solid red’);
$first.css(‘color’,’blue’);
});
$first.hover(function(){
$first.css(‘border’,’1px solid red’);
})

// Mejor
$first.on(‘click’,function(){
$first.css(‘border’,’1px solid red’);
$first.css(‘color’,’blue’);
})
$first.on(‘hover’,function(){
$first.css(‘border’,’1px solid red’);
})

Condensa tu código

Siempre que sea posible, intenta combinar funciones.

// Mal

$first.click(function(){
$first.css(‘border’,’1px solid red’);
$first.css(‘color’,’blue’);
});

// Mejor
$first.on(‘click’,function(){
$first.css({
‘border’:’1px solid red’,
‘color’:’blue’
});
});

Utiliza encadenamiento

Siguiendo con la regla anterior, jQuery te da la facilidad de encadenar métodos, utiliza esta ventaja.

// Mal
$second.html(value);
$second.on(‘click’,function(){
alert(‘hello everybody’);
});
$second.fadeIn(‘slow’);
$second.animate({height:’120px’},500);

// Mejor
$second.html(value);
$second.on(‘click’,function(){
alert(‘hello everybody’);
}).fadeIn(‘slow’).animate({height:’120px’},500);

Mantén tu código legible

Los que me conocen de cerca saben que soy muy pesadito con este tema, pero la documentación es absolutamente imprescindible,y el estilo a la hora de escribir código no se debe perder nunca. Gracias a Python muchos programadores están empezando a coger muy buenos hábitos de escritura, intenta aplicar esta misma filosofía a otros lenguajes.

Al intentar condensar el código y utilizar encadenamiento el código puede volverse un poco ilegible. Intenta utilizar tabulaciones y líneas en blanco para colocar y dejar bien claro tú código.

// Mal

$second.html(value);
$second.on(‘click’,function(){
alert(‘hello everybody’);
}).fadeIn(‘slow’).animate({height:’120px’},500);

// Mejor
$second.html(value);
$second
.on(‘click’,function(){ alert(‘hello everybody’);})
.fadeIn(‘slow’)
.animate({height:’120px’},500);

Utiliza comparaciones Short-Circuit

Las expresiones de cortocircuito se evalúan de izquierda a derecha y utilizan los operadores lógicos && (AND), || (OR).

// Mal

function initVar($myVar) {
if(!$myVar) {
$myVar = $(‘#selector’);
}
}

// Mejor
function initVar($myVar) {
$myVar = $myVar || $(‘#selector’);
}

Preferiblemente utiliza métodos abreviados

Una de las técnicas para compactar tu código es utilizar los métodos abreviados.

// Mal

if(collection.length > 0){..}

// Mejor
if(collection.length){..}

Elimina elementos del DOM cuando vayas a realizar operaciones pesadas

Cuando vayas a realizar operaciones pesadas de manipulación del DOM siempre es preferible que elimines el elemento con el que vas a trabajar, realices las acciones necesarias y por último lo vuelves a colocar en el DOM.

// Mal

var
$container = $(“#container”),
$containerLi = $(“#container li”),
$element = null;

$element = $containerLi.first();
//… a lot of complicated things

// Mejor
var
$container = $(“#container”),
$containerLi = $container.find(“li”),
$element = null;

$element = $containerLi.first().detach();
//…a lot of complicated things

$container.append($element);

Aprende los trucos

Cuando empieces a utilizar un nuevo método jQuery con el que tengas menos experiencia, por favor, estudia a fondo la documentación para conocer cual es la mejor manera o la más rápida de utilizarlo.

// Mal
$(‘#id’).data(key,value);

// Mejor (más rápido)
$.data(‘#id’,key,value);

Utiliza subqueries sobre los padres

Cuando trabajes con el DOM, ya sabes que es costoso hacer búsquedas, siempre es preferible que utilices subqueries sobre un elemento padre para encontrar sus hijos que utilizar selectores CSS más avanzados que tienen recorrer todo una y otra vez.

// Mal

var
$container = $(‘#container’),
$containerLi = $(‘#container li’),
$containerLiSpan = $(‘#container li span’);

// Mejor (más rápido)
var
$container = $(‘#container ‘),
$containerLi = $container.find(‘li’),
$containerLiSpan= $containerLi.find(‘span’);

Evita selectores CSS universales

Cuando se combinan con otros selectores son extremadamente lentos, así que trata de no utilizarlos.

// Mal
$(‘.container > *’);

// Mejor
$(‘.container’).children();

Evita selectores CSS universales implícitos

Cuando no escribes el selector que necesitas por defecto, se aplica el selector CSS universal, lo que nos lleva a cometer el mismo problema que antes.

// Mal

$(‘.someclass :radio’);

// Mejor
$(‘.someclass input:radio’);

Optimiza los selectores

Intenta utilizar selectores sencillos y lo más optimizados posibles, por ejemplo, si buscar por ID no es necesario además indicar el tipo del elemento.

// Mal

$(‘div#myid’);
$(‘div#footer a.myLink’);

// Mejor
$(‘#myid’);
$(‘#footer .myLink’);

No desciendas en el DOM a través de múltiples IDs

Si buscar por ID no necesitas especificar descendientes.

// Mal
$(‘#outer #inner’);

// Mejor
$(‘#inner’);

Intenta utilizar la última versión

La última versión suele ser mejor, más ligera y más rápida, así que intenta estar al día y utilizar la última versión. En ocasiones te tocará revisar métodos antiguos que se han marcado como obsoletos, pero a la larga este esfuerzo extra merece la pena.

No utilices métodos obsoletos

Nunca utilices métodos marcados como Deprecated obsoletos, ya que lo más probable es que en próximas versiones se eliminen o cambien y hagan que tu código deje de funcionar.

Carga el código jQuery desde CDN

El CDN de Google rápidamente descarga el script desde la ubicación más cercana al usuario, de este modo nuestras aplicaciones cargarán más rápidamente. Utiliza este enlace para utilizar el Google CDN http://code.jquery.com/jQuery-latest.min.js

Combina jQuery con código JavaScript cuando sea necesario

Como se ha comentado jQuery no deja de ser JavaScript así que no dudes en combinarlos cuando lo necesites. JavaScript puede generar ficheros más grandes o incluso menos legibles que con jQuery, pero también puede generar código más rápido.

Conclusión

Como has podido comprobar gran parte de estos “trucos” simplemente son cuestiones de diseño y estilo, otras sí que mejoran notablemente tu código, en definitiva una optimización de tu código siempre es bueno para el cliente que disfruta de tu aplicación, una mejora de estilo, comprensión y legibilidad siempre es bueno para ti y para el resto de miembros del equipo de trabajo.

Este artículo fue originalmente publicado en http://flippinawesome.org/2013/11/25/writing-better-jquery-code/?utm_source=javascriptweekly&utm_medium=email

Me gustaría recomendar adicionalmente la lectura de otros buenos artículos sobre jQuery y JavaScript y técnicas de optimización.

Artículo escrito por