19 truques e dicas para jQuery

A equipe da Turbosite está sempre atenta à dicas e truques para melhorar a eficiência de suas ferramentas. Compartilhamos aqui algumas dicas retiradas do blog developer.*.com, com algumas modificações e conteúdo nosso. Esperamos que lhe seja de grande utilidade.

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" 
     type="text/javascript"></script>

2 – Combine e minimize todos seus scripts

Sempre use compressor em seu código. Isso tornará o conteúdo de seu site mais rápido para carretamento, além de facilitar a leitura de seu site pelo navegador. Como exemplo, o YUI Compressor do Yahoo! Só não esqueça de manter o código original, para quando precisar de dar manutenção nele.

3 – Use o 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.

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

Funções de manipulações do DOM são muito caras para o processamento. Tente usa-las o mínimo possível

for (i = 0; i < 1000; i++) {
     var minhaLista = $('.minhaLista'); // seleciona 1000 vezes
     minhaLista.append('<li>Esse é o elemento ' + i + '<li>');
}

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

var meusItens = '';
for (i = 0; i < 1000; i++) {
     meusItens += '<li>Esse é o elemento ' + i + '</li>';
}
$('.minhaLista').html(meusItems);

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é?

5 – Use IDs em vez de classes sempre que possível

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. Uma busca por ID no DOM quase sempre é mais eficiente que a busca por classe, prefira sempre usar ID.

6 – Dê um contexto para seus seletores

As seguintes formas de uso são mais rápidas do que buscar um elemento no documento inteiro.

jQuery( expression, contexto );
$('contexto').find('expression');
$('contexto expression');

7 – Use encadeamento de funções

Uma das características mais legais do jQuery é a possibilidade de encadear métodos. Usar encadeamento também ajuda a diminuir a quantidade de seletores.

$('#meuPainel')
     .find('TABLE .primeiraColuna')
     .removeClass('.primeiraColuna')
     .css('background', 'red')
     .append('<span>Essa celula agora é vermelha</span>');

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

Todos adoram as animações pré-definidas como slideDown() e fadeIn() para conseguir alguns efeitos com incrível facilidade. Nos meados do lançamento do jQuery, pela facilidade e simplicidade, as animações em web pages virou uma febre desencadeada.

É 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(). Esse método 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.

$('#myList li').mouseover(function() {
     $(this).animate({"height": 100}, "slow");
});

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.

$('#myBox').mouseover(function() {
     $(this).animate({ "width": 200 }, "slow");
     $(this).animate({"height": 200}, "slow");
});

$('#myBox').mouseover(function() {
     $(this).animate({ "width": 200, "height": 200 }, "slow");
});

9 – 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:

$('#minhaTabela TD').click(function(){
     $(this).css('background', 'red');
});

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.

$('#minhaTabela').click(function(e) {
     var clicado = $(e.target);
     clicado.css('background', 'red');
});

10 – Use o método data() 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.

$('#minhaDiv').data('estadoAtual', 'desligado');

11 – Escreva seu próprio 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:

$.extend($.expr[':'], {
          mais100px: function(a) {
          return $(a).height() > 100;
     }
});
 
$('.box:mais100px').click(function() {
     alert('O elemento que você clicou possui mais de 100 pixels de altura');  
});

Mais exemplos dessa funcionalidade você pode pegar aqui.

12 – 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.

13 – 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:

var $j = jQuery.noConflict();
$j('#minhaDiv').hide();

14 – Saiba quando uma imagem terminar de carregar

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

$('body').append('<img src="" alt="" id="minhaImagem" />');
$('#minhaImagem').attr('src', 'imagem.jpg').load(function() {
     console.log('Image Loaded. W: '+$(this).width()+' H: '+$(this).height());
});

15 – 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:

if ($('#minhaDiv')[0]) {  
     // bloco de código
}

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

Quando você adiciona algum afeito em um elemento, 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:

$('popup').click(function(){  
     // bloco de código
     return false;
});

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

Você já deve estar acostumado a usar a função ready() para executar o código assim que a página tiver sido carregada. Pois saiba que pode economizar um pouco de código simplesmente usando:

$(function (){  
     // código
});

18 – 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.

var $elemento = $(elemento);

19 – 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.

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