19 truques e dicas para jQuery

10:11

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");});

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

$('#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');});

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

 

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');

Armazenar estados é mais útil e prático para quando, por exemplo, você queira verificar se um input esteja com alguma atributo que o valide no formulário.Para mais informações sobre os metodos data() e removeData() veja a documentação.

 

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'); });

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.

 

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.