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:

http://www.jshint.com/

Dentre outras coisas, o jshint, vai verificar se vc usou um switch na hora errada, se declarou uma variavel que não está sendo usada..

Outras coisas, que nem o jshint conseguiria te dizer

Agora começa o meu post 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 variavel que aponte para eles também.

Isso também vai melhorar a performance do teu script.

Convencione os nomes das variaveis

É bacana olhar para uma variavel e entender logo de cara de onde ela veio, e qual o valor dela.

Eu estou adotando usar $ antes de começar uma variavel que aponte para um objeto jQuery. Assim como o $this. E deixo para as variaveis “normais”(arrays, inteiros e strings), uma notação sem o símbolo $.

Dessa forma, qndo 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 podem ser evitados se vc 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 4 “planos” cada um com 3 opções de valores: planos mensais, semestrais e anuais. Se eu fosse fazer isso com if ou switch, o código 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, vc terá resolvido tudo.

Leia este post:

Aprendi jQuery e agora?

E para terminar:

Faça bem o básico

É básico indentar corretamente, comentar qndo necessário, e documentar.

Estas são algumas pequenas boas práticas que vão fazer uma boa diferença nos teus scripts.