10 dicas para escrever um bom código jQuery

Recebi este artigo via twitter com 10 dicas muito legais para melhorar o código escrito em jQuery.

Achei interessante criar uma resumo em português com estas 10 dicas. A maioria delas eu passei a utilizar em meus projetos!

1. Use sempre o $(document).ready()

Coloque todo seu código dentro desta função. Isto irá fazer com que seu código jQuery seja executado assim que o DOM for carregado mas antes do conteúdo (veja a dica 2). Isto permite que você atribua funções aos eventos dos elementos. Evitando o uso de onload, onclick entre outros. Ou seja, você não irá interferir na marcação HTML com o javascript.

2. Use o $(window).load ()

Embora a maioria dos exemplos sejam colocados dentro de $(document).ready() é melhor evitar colocar tudo dentro dele.

$(document).ready() é muito útil. Mas ele ocorre durante a renderização do documento. Funcionalidades supérfluas como scrolling e drag and drop, etc podem ser colocadas dentro de $(window).load() que é executada após o download completo da página.

A sintaxe é a mesma do $(document).ready()

3. Carregue somente o que precisa

Nós programadores somos tentados a escrever todo o código javascript em um mesmo local e usá-lo em todas as páginas, seja em forma de arquivo, ou repetindo o código no velho Ctrl C + Ctrl V. O jQuery leva tempo para vasculhar todo o documento em busca dos elementos. Isto pode causar uma queda no rendimento da aplicação.

$(document).ready (function () {
   if ('body').hasClass ('home') {
      // Código usado na home
   }
   else if ('body').hasClass ('blog') {
      // Código usado no blog
   }
});

4. Saiba o que é o método data() e use-o

Para guardar e utilizar alguns dados você pode utilizar o método data da jQuery.

   // Define o valor
   $('.myselector').data ('myfavcolor', 'orange');
   // E então. Retorna o valor
   $('myselector').data ('myfavcolor');

Eu escrevi um artigo sobre o método data que você pode ver clicando aqui

5. Seletores internos da jQuery

Conhecer os seletores CSS ajuda muito na hora de escrever código jQuery. Mas os seletores internos também ajudam bastante. Veja os seletores aqui http://docs.jquery.com/Selectors.
Por exemplo

1	$("div:contains('hello')").css ('background-color', '#cc0000');

O código acima deixa vermelha a cor de background de todos os elementos div que contenham a palavra “hello”. Você também pode usar

1	$('input:password')

para selecionar todos os campos do tipo password

6. Crie flags com classes

Você pode usar “flags” para monitorar o que o usuário está fazendo, ou então para verificar quando determinada ação foi feita ou não. A função addClass serve para adicionar uma classe em um elemento. Desta forma você pode verificar posteriormente a existência da classe com a função hasClass

7. Não chame o mesmo seletor várias vezes

Ao invés de fazer isto

   $('p.hello').css ('color', '#000000');
   $('p.hello').text ('hello');
   $('p.hello').addClass ('paragraph');
   $('p.hello').fadeTo (1000, 1);

Faça isto

   $p.css ('color', '#000000');
   $p.text ('hello');
   $p.addClass ('paragraph');
   $p.fadeTo (1000, 1);

Desta forma se armazena o objeto retornado pelo seletor em uma variável para posterior reuso.

8. Encadeie (quase) tudo

O encadeamento é muito útil. O mesmo código do exemplo anterior por ser escrito assim

1	$('p.hello').css ('color', '#000000').text ('hello').addClass ('paragraph').fadeTo (1000, 1);

Tenha cuidado ao utilizar o encadeamento pois pode causar certa lentidão.

9. Utilize o toggleClass

Você pode alternar classes de elementos para selecionar seu comportamento. Se sua classe .hidden não mostra nenhum item você pode os tornar visíveis com

1	$('p.hidden').toggleClass ();

10. Guarde os resultados

Quando estiver lidando com funções, você pode querer guardar alguns resultados para uso posterior. Uma solução possível é guardar os resultados em objetos com escopo global.

   // use the window object for instance
   window.$results = {
   one : 0,
   two : 0
   };
 
   // this is the function, perhaps ran more than once
   function getResults (first, second)
   {
   $results.one = first;
   $results.two = second;
   }
 
   // run function
   getResults ($('li.blue'), $('a.red));
   $results.one.hasClass ('blue'); // true
   $results.two.hasClass ('blue'); // false
 
   // run again
   getResults ($('li.red'), $('a.blue));
   $results.one.hasClass ('blue'); // false
   $results.two.hasClass ('blue'); // true