Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

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

by
Difficulty:BeginnerLength:ShortLanguages:

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:

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

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

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:

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.

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.

Filtros

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

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!

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