Portuguese (Português) translation by Erick Patrick (you can also view the original English article)
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!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post