Algumas dicas de jQuery eu passava para amigos, mas agora encontrei uma coleção de Excelentes truques e dicas para jQuery que traduzi, adicionei comentários, retirei o que não acho legal e agora compartilho aqui:

25 Excelentes truques e dicas para jQuery

1 – Carregue o conteúdo pelo Google Code

Se você utiliza sempre o jQuery em seus sites, uma excelente maneira de acelerar o carregamento é usar o arquivo jquery-1.2.6.pack.js diretamente do Google Code. Além de diminuir o gasto com banda, o navegador do usuário faz cache do arquivo entre os vários sites que usam essa técnica o que dará uma experiencia de navegação melhor para o visitante.

O Google tem uma infra-estrutura de espelhamento ao redor do mundo, sendo o mais rápido e melhor serviço de distribuição de conteúdo (ou CDN para os íntimos).

Aproveite os milhões de computadores do Google e faça com que o jQuery seja carregado de lá.

Tem até como transformar a tag de script do jQuery em snippet para TextMate.

2 – Use uma tabela de referências

É sempre bom achar o mais rápido possivel aquela função que executa seu trabalho, né? Este site possui uma excelente tabela para buscas rápidas.

3 – Combine e minimize todos seus scripts

Existem várias ferramentas para isso, mas ao invés de combinar eu ainda prefiro minimizar separadamente os scripts e CSSs. Uso para isso o YUI Compressor do Yahoo!

Combinar acho que vale mais para o Apache ou outros WebServers, onde a quantidade de requisições no servidor importava. Hoje com Nginx e outras soluções para o problema de escalabilidade a quantidade de conexões HTTP com o servidor não é um problema tão critico.

Já vi casos que um arquivo não compactado foi a diferença entre manter 1 servidor dedicado ou precisar “comprar” um novo. Fikdik de como escalar WowWowWow.

4 – Use as funcionalidades extras de log do Firebug.

Use a função console.log(Object) do Firebug para escrever mensagens no console, muito melhor que alert(”").

O Firebug facilita acesso as propriedades dos objetos. Como elementos DOM são sempre objetos, estamos tratando deles o tempo todo.

O Firebug também pode ser usado com Internet Explorer.

5 – Use menos funções de seleção, faça cache.

Em um computador atual isso não demora nada, mas lembre-se que o usuário utiliza equipamentos muito piores que seu Macbook Pro. Imagine eles em seus fracos iPhones, ou pior ainda, em um Opera Mobile.

Então mantenha o seletor fora do loop:

6 – Use o minimo possivel de manipulação com o DOM

Funções como .append(), .prepend(), .after(), .before() são relativamente custosas e podem deixar as coisas lentas.

É consideravelmente lenta perto de:

Escrever no DOM somente uma vez é um pouco mais rápido. Já que aqui estamos mesmo lutando por optimizações (lembrem-se dos mobiles), vale né?

7 – Coloque tudo dentro de um elemento antes de fazer uma inserção ao DOM

8 – Use IDs em vez de classes sempre que possivel

A função de busca por com CSS3 Selector é muito legal de se usar, mas o jQuery implementa ela em JavaScript, e usando o máximo que a API do DOM deixa. Isso as vezes não é o ideal para performance, acredite.

Navegadores como o WebKit já possuem implementação nativa dessa função, indo de acordo com o que foi pensado no framework Prototype, mas lembre-se, em desktop/notebook a hegemonia é de quem não IEmplementa novidades tão cedo.

No mercado de mobile, WebKit e Opera lutam para ver quem tem o maior numero de especificações da W3C implementadas.

Uma busca por ID no DOM quase sempre é mais eficiente que a busca por classe, prefira sempre usar ID.

9 – Dê um contexto para seus seletores

Eu tenho dúvidas quanto a eficácia de contextualizar os seletores via Javascript, comparada ao uso de contexto no CSS3. De qualquer forma as seguintes formas de uso são mais rápidas do que buscar um elemento no documento inteiro.

10 – Use encadeamento de funções

Uma das características mais legais do jQuery é a possibilidade de encadear métodos. Então, por exemplo, se você deseja alterar a classe de um elemento:

Provavelmente você aprendeu isso em seus primeiros 5 minutos de leitura sobre jQuery.
Note que continua funcionando mesmo com quebras de linhas (jQuery == JavaScript), o que significa que você pode escrever código assim:

Usar encadeamento também ajuda a diminuir a quantidade de seletores.

Mas ainda é possivel ir além. Digamos que você deseja executar várias funções em um elemento mas uma das primeiras funções muda o elemento selecionado de alguma maneira:

Nós selecionamos uma tabela, descemos para buscar celulas com a classe “primeiraColuna” e então a pintamos de vermelho.

Digamos agora que queremos colorir todas celulas com a classe “ultimaColuna” de azul. Já que usamos o método find(), filtramos todas as células que não tinham a classe “primeiraColuna”, assim seria necessario o uso de um seletor novamente ou então não poderiamos continuar encadeando, certo? Nah! O jQuery possui o metodo end() que reverte a última seleção, então você pode continuar encadeando tipo:

É também mais fácil do que você imagina escrever suas funções de forma que elas possam usar encadeamento.

Tudo que você precisa é fazer que suas funções modifiquem e retornem o mesmo elemento.

Bem legal!

11 – Saiba como usar a propriedade de animação

Quando eu comecei usar o jQuery eu adorei o fato de que é fácil usar animações pré-definidas como slideDown() e fadeIn() para conseguir alguns efeitos com incrível facilidade.

É também fácil ir ainda além por causa da facilidade que é usar o poderoso método animate().

Se você olhar os metodos slideDown() e fadeIn() dentro do framework verá que são apenas atalhos para o metodo animate().

O método animate() simplesmente pega qualquer estilo de CSS e aplica transições de um valor a outro. Então as mudanças nas propriedades width, height, opacity, background-color, top, left, margin, color, font-size e qualquer outra que você quiser podem ter animações!

É muito fácil animar todos itens do seu menu para 100 pixels usando isso.

Diferentemente de outras funções do jQuery, as animações são colocadas em fila de execução automaticamente. Se você quiser rodar uma segunda animação somente quando a primeira terminar, então é só chamar o método novamente sem precisar usar um callback.

Porém, se você você desejar que as animações ocorram no mesmo tempo, então insira ambas na mesma chamada assim:

Você pode animar tanto propriedades numéricas quanto cores e cores de fundo, leia mais sobre isso.

12 – Conheça sobre delegação de eventos

O jQuery torna fácil adicionar eventos em elementos do DOM de forma inobstrusiva, o que é muito bom, mas adicionar muitos eventos é ineficiente. A delegação de eventos permite que você adicione em muitas situações menos eventos e atinja o mesmo resultado:

Vamos fazer uma função simples para tornar uma celula da tabela vermelha quando você clicar nela. Digamos que você tenha uma tabela com 10 colunas e 50 linhas, então são 500 delegações de eventos.

Não seria melhor se fosse possivel agregar o evento somente uma vez e então quando a tabela fosse clicada, chegar ao elemento que realmente foi clicado antes desse se tornar vermelho?

Para isso é que serve a delegação de eventos e isso é simples de implementar…

Muito útil, para por exemplo, manipular eventos de touch.

13 – Use classes (ou atributos) para armazenar estado

Essa é a maneira mais básica de guardar informação sobre um bloco de HTML. O jQuery facilita a manipulação de elementos utilizando classes, então se você precisa armazenar informações sobre o estado de um elemento, por que não adicionar uma classe extra nele?

Aqui vai um exemplo. Nós queremos criar um menu que expande. Quando você clica no botão nós queremos que o painel desça – slideDown() – quando ele tiver fechado, e que suba – slideUp() – quando estiver aberto.

Vamos começar com o HTML

Simples
Nós adicionamos uma classe extra na div de fora, que não possui outro proposito a não ser armazenar o estado do item. Então, tudo que precisamos é um evento de clique – click – para chamar o slideUp() ou o slideDown() no painel correspondente quando o botão é clicado.

if (menu_item.hasClass("expandido")) {
menu_item.removeClass('expandido').addClass('colapsado');
painel.slideUp();
} else if (menu_item.hasClass("colapsado")) {
menu_item.removeClass('colapsado').addClass('expandido');
painel.slideDown();
}
});

Esse é um exemplo bem simples, mas você pode adicionar classes extras para armazenar todos tipos de informações sobre um elemento DOM (pedaço de HTML).

De qualquer forma, melhor ainda é a próxima dica.

14 – Melhor ainda, use o método data() que é interno do jQuery para armazenar estados

O jQuery possui um metodo interno chamado data() que pode ser usado para armazenar informações de chave/valor sobre qualquer elemento DOM. Armazenar um pouco de informação é simples assim:

Nós podemos usar o exemplo da dica anterior. Vamos utilizar o mesmo HTML, porém ao invéz da classe “expandido” usamos o metodo data().

if (item_menu.data('colapsado')) {
item_menu.data('colapsado', false);
painel.slideDown();
} else {
item_menu.data('colapsado', true);
painel.slideUp();
}
});

Para mais informações sobre os metodos data() e removeData() veja a documentação.

15 – Escreva seu proprio seletor

O jQuery possui vários seletores prontos para ajudar na seleção de elementos pelo ID, class, tag, atributo e muito mais. Mas o que fazemos quando é preciso usar seletores que vão além do que o jQuery deixa?

Bom, uma possivel solução seria adicionar classes nos elementos e usa-las para seleciona-los. Uma outra maneira é extender os seletores assim:

$('.box:mais100px').click(function() {
alert('O elemento que você clicou possui mais de 100 pixels de altura');
});

Primeiro criamos um seletor que acha qualquer elemento que é maior que 100 pixels. Depois usamos isso para adicionar uma ação de clique – click – em todos esses elementos.

Mais exemplos dessa funcionalidade você pode pegar aqui.

16 – Use as funções de auxilio do jQuery

O jQuery já quebra um galho ao facilitar a manipulação de elementos DOM, mas também adiciona metodos uteis para iterar, filtrar, clonar, juntar arrays ou remover elementos duplicados.

Vale a pena passar um tempinho na página que explica essas utilizades.

17 – Use a função “noconflict” para evitar conflitos com outros frameworks

A maioria dos frameworks para JavaScript usam o simbolo $ como atalho. Para evitar problemas existe uma solução simples, a função .noconflict() que permite definir outro atalho para o framework:

18 – Use função anonima para evitar conflitos com outros frameworks

Uma boa maneira de evitar conflitos no JavaScript (não somente com jQuery) é o uso de uma função anonima.

O que for executado dentro do bloco não muda com o escopo global, evitando problemas com nomes duplicados de variaveis e funções.

19 – Saiba quando uma imagem terminar de carregar

Use o método .load() em um elemento de imagem (IMG) com um callback. Simples assim:

É importante que o elemento já esteja no HTML.

20 – Sempre use a última versão

O framework está sendo constantemente melhorado por John Resig, seu criador. Sempre que uma versão nova sai ela possui melhoras na performance e se mantem atualizada com o que existe de novo nos navegadores.

A próxima versão do jQuery (1.3) virá com uma nova engine chamada Sizzle que além de mais rápida vai utilizar as funções querySelectorAll e getElementsByClassName já disponiveis nos navegadores mais modernos.

Então, utilize sempre a última versão.

21 – Como saber se um elemento existe?

Você não precisa checar se um elemento existe antes de manipular ele por que o jQuery simplesmente não faz nada caso o elemento não estiver no DOM. Mas as vezes você pode precisar executar algum pedaço de código que depende da existência de um elemento, para isso use:

22 – Adicione uma classe no HTML para saber que o JavaScript está disponivel

Logo que o jQuery carregar use ele para adicionar uma classe chamada “JS” na tag HTML:

Como isso só acontece quando o JavaScript (e o jQuery) estiverem prontos, você pode usar CSS para controlar quando um elemento deve aparecer somente quando o usuário estiver com JavaScript habilitado.

23 – Return ‘false’ para evitar a continuação de um evento

Quando você tem:

E adiciona um evento tipo assim:

Vai perceber que o bloco de código vai ser executado, porem o navegador irá para o endereço do link. Você pode usar “href=’#'” para evitar isso, mas assim a página irá voltar para o topo quando a ação de click for executada.

Para evitar isso, adicione um “return false;” ao fim do bloco de código:

24 – Atalho para a função “ready”

Você já deve estar acostumado a usar

Pois saiba que pode economizar um pouco de código simplesmente usando:

25 – Identifique váriaveis do tipo jQuery

Se você começar usar as dicas para evitar chamadas desnecessarias as funções do jQuery vai perceber que no seu código o número de variaveis carregando objetos jQuery irá aumentar bastante.

Para evitar que você se confunda e chame a função de seleção – $() – em um elemento que já é jQuery, identifique variaveis que carregam objetos do jQuery com um $ antes do nome.

Ufa! 25 praticas ninja para ajudar sua produtividade com jQuery. Se você tiver mais alguma boa pratica e quer compartilhar, por favor comente aqui

E se você gostou do artigo, por favor espalhe pelo mundo.