Dica Rápida - Novatos em jQuery: Parem de Pular na Piscina

Apesar da jQuery estar disponível há anos, continuo a ver um erro ser cometido mais que qualquer outro.

Exemplo #1

Considere o seguinte trecho de código:

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

$(this).hide();

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

$(this).show();



alert('qualquer coisa');



$(this).hide();



return false;

});

O código acima está muito complicado, por uma série de motivos. Não se preocupe com o que o código faz de verdade (não tem nexo). Ao invés disso, quero que você preste atenção às referências a $(this).

Imagine a DOM como uma piscina.

Imagine a DOM como uma piscina. Você lembra quando era criança e mergulhava até o fundo da piscina, procurando por moedas, enquanto seus pais agiam como se estivessem prestando atenção? Essa será nossa comparação com o mundo real.

Toda vez que você usa $('.algumaClasse'), a jQuery pula na piscina (DOM), e procura pelas moedas (ou nodos). Então, quando você a referencia múltiplas vezes em uma mesma função, acontecerão vários mergulhos na piscina. Ou, para acabar com a comparação com o mundo real, é um desperdício e desnecessário. Por que fazer chamada ao jQuery se você não precisa? Você deveria usar uma técnica que chamamos de “caching” (em português, armazenar).

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

 var anchor = $(this);



 anchor

    .hide()

   .css('color', 'red')

   .show();



 alert('qualquer coisa');



 anchor.hide();



 e.preventDefault();



});

Assim está muito melhor. Embora os modernos motores dos navegadores sejam incrivelmente rápidos hoje em dia, sendo capazes de compensar pela suas más práticas de programação o máximo possível, você deveria, ainda assim, buscar escrever código eficiente e evitar gastar toda esse energia pulando na piscina. Agora, tecnicamente, se você passar para o jQuery um nodo da DOM, como o this, ele não vai na DOM novamente. Ele, simplesmente, retorna um objeto jQuery.

Só porque a diferença de performance entre as duas será desprezível, não quer dizer que devemos escrever código de qualquer jeito.

Exemplo 2

Consideremos um exemplo um pouco mais complicado: abas (do inglês, tabs).

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



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

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

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

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

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

});

Encontramos esse tipo de código por todos os lugares. Ele é feio e ineficiente. O primeiro ajuste é remover esse CSS daí. Você só deve colocar estilos CSS em seu código se ele tiver de ser criado dinamicamente. Por exemplo, se você tem de calcular a localização precisa que um elemento deveria estar na página, você poderia usar .css('left', valorCalculado). Nesse caso, porém, o valor pode ser colocado em um folha de estilo externa. O que nos deixaria com:

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

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

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

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

});

E, de novo, por que continuamos indo até a DOM, em busca de .tabs li e $(this)? Pare de pular na piscina. Vamos armazenar o nodo .tabs li.

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



tabs.click(function() {

 tabs.removeClass('active');

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

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

});

Bem melhor. Mas ainda estamos chamando $(this) duas vezes. O que não é tão problemático. Mas, pelas minhas experiências, se você não se preocupar com isso desde o começo, esse número aumenta bem rápido.

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



tabs.click(function() {

 var tab = $(this);

 tabs.removeClass('active');

 tab.addClass('active')

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

});

Filtros

Outra opção (um pouco menos otimizada), seria o uso de filtros.

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



tabs.click(function() {

 tabs.removeClass('active')

     .filter(this)

     .addClass('active')

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

});

A diferença, nesse caso, é que, ao invés de referênciar a $(this), estamos usando o método filter() para reduzir a coleção dos elementos da lista para, somente, aquele o qual foi clicado.

O Que Você Deve Lembrar

Sim, o mundo não vai acabar se você referenciar $('.tabs) várias vezes dentro de uma mesma função. Os motores JavaScript são bem rápidos, hoje em dia. Se você verificar a performance desse código depois de ser executado milhares de vezes, a diferença será só de algumas centenas de milisegundos. Mas, a pergunta que fica é: Por que você continuaria a codificar assim?

Algumas vezes, quando usamos abstrações gigantescas como a jQuery, é muito fácil esquecer que $('.tabs') é, na verdade, uma função que executa uma boa quantidade de código, por trás dos panos. Vale lembrar que esse conceito vale para o JavaScript como um todo, não só para o jQuery.

Use as técnicas de caching, descritas acima, para criar códigos melhores... para você mesmo.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!