Melhorando a qualidade do seu código jQuery

jQuery é bacana! Escreva menos, faça mais.

Porém muitos dos desenvolvedores de hoje em dia não levaram a sério a parte do “escreva menos”, e continuam escrevendo muito e de forma desordenada. Tudo bem, então aqui vai algumas dicas para melhorar a qualidade dos códigos jQuery.

jsHint

jQuery é apenas uma lib javascript. Logo, todas as boas práticas que existem para javascript, também existem para jQuery. Começe passando o teu código pelo jsHint. Dentre outras coisas, o jsHint vai verificar se você usou um switch na hora errada, se declarou uma variável que não está sendo usada…

Outras coisas, que nem o jsHint conseguiria te dizer

Agora começa o meuartigo de verdade!

Prefira sempre usar jQuery no lugar de $

Eu, pessoalmente, considero mais legível. Mas além disso, também estamos evitando de uma maneira muito simples aquele velho problema do conflito com outras libs que usam o apelido $.

Seria:

 jQuery(document).ready(function() {});

No lugar de:

    $(document).ready(function() {});

Não procure um mesmo elemento várias vezes no DOM

Coisas como:

jQuery(this).parent('dl').find('dd').eq(0).addClass('active');  
jQuery(this).parent('dl').find('dt').text('Ativo');

Poderiam ser simplificadas para:

var $this = jQuery(this),  
$dl = $this.parent('dl');  

$dl.find('dd').eq(0).addClass('active');  
$dl.find('dt').text('Ativo');

Note que se formos usar o DD e esse DT outras vezes nesse escopo, então vale apena guardar uma variável que aponte para eles também. Isso também vai melhorar a performance do teu script.

Convencione os nomes das variáveis

É bacana olhar para uma variável e entender logo de cara de onde ela veio e qual o valor dela. Eu estou adotando o $ antes de começar uma variável que aponte para um objeto jQuery. Assim como o $this. E deixo para as variáveis “normais” (arrays, inteiros e strings), uma notação sem o símbolo $. Dessa forma, quando bato o olho no meu código jQuery, sei que todas as variaveis com $ no nome, são objetos jQuery.

var $this = jQuery(this),  
$dl = $this.parent('dl'),  
i = 0,  
str = '';

Faça bom uso dos arrays e objetos

Uma cadeia de if/elses ou switchs pode ser evitada se você souber usar arrays e objetos javascript corretamente. Como por exemplo essa lista de valores:

var values = [];  

values[1] = { '1': '1,90', '6': '1,41', '12': '1,01' };  
values[2] = { '1': '2,90', '6': '2,91', '12': '2,01' };  
values[3] = { '1': '3,90', '6': '3,41', '12': '3,01' };  
values[4] = { '1': '4,90', '6': '4,40', '12': '4,01' };

Tenho quatro “planos”; cada um com três opções de valores: planos mensais, semestrais e anuais. Se eu fosse fazer isso com if ou switch, o código ficaria bem ruim.

Separe comportamentos

Essa é uma coisa básica de programação. Divida um procedimento em várias rotinas menores e escreva pequenas funções que resolvam uma parte pequena do problema. Juntando todas, você terá resolvido tudo.

Leia este artigo:

Aprendi jQuery e agora?

E para terminar:

Faça bem o básico

É básico indentar corretamente, comentar qnuado necessário e documentar. Estas são algumas pequenas boas práticas que vão fazer uma boa diferença nos teus scripts.