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

8 Comments

  1. Willie Oliveira

    outubro 3, 2012 at 11:27

    O uso de “Module Pattern” ajudaria a evitar conflitos com outras libs e também que o código fique verboso demais ao usar o identificador “jQuery”.

    (function ($, exports, undefined) {
            // Aqui poderia usar $ sem problemas 
    })(jQuery, this);
  2. Excelente artigo!

    Sobre o “jQuery(document).ready(function() {});”, já vi indicação (e que sigo) para utilizar “$(function($) {});”, também para evitar conflito. Já ouviu falar a respeito?

    E a diferenciação de elementos para variáveis eu curti, colocarei em prática!

  3. Ótimo post Bruno e ótima dica Willie, ‘Module Pattern’ já me salvou varias vezes.

    Ainda não tenho blog mais escrevi um gist sobre como esse padrão pode ajudar a lidar com variáveis globais e outras coisas mais: https://gist.github.com/2931590 .

    E só mais uns links para adicionar ao post, mostrando a importância de ‘Não procure um mesmo elemento várias vezes no DOM’:
    http://jsperf.com/jquery-selectors-var
    http://jsperf.com/cached-jquery-variable-vs-this

  4. Willie Oliveira

    outubro 3, 2012 at 17:20

    Abraão, gostei da forma como expôs o assunto no Gist, foi direto ao ponto de forma clara o que muitas vezes é alongado pelos livros, parabéns, muito didático!

  5. Júlio Santos

    outubro 4, 2012 at 14:55

    E com relação a funções Bruno? Eu por exemplo costumo fazer isso:

    $.fn.minhafuncao = function() {
    }

    Neste caso, tenho que chama-la com:

    $(this).minhafuncao();

    É correto dessa forma? Qual a diferença de usar assim e chamar assim:

    jQuery.minhafuncao = function() {}
    
    $.minhafuncao();
  6. Evandro Oliveira

    outubro 23, 2012 at 15:16

    A prática dos elementos jQuery começarem com $ eu já havia iniciado quando vi boilerplates de plugins jQuery.

    Armazenar buscas do DOM em variáveis também já praticávamos desde antes de a popularização do jQuery, lembra?? 🙂

    Júlio, as duas abordagens têm efeitos diferentes. Supondo que você domine bem os efeitos da palavra-chave ‘this’, sugiro que faça um teste de escopo:

    (function (w) {
        var d, $;
        d = w.document;
        $ = w.jQuery;
        $.classMethod = function () {
            console.log('método de classe', this);
        };
        $.fn.instanceMethod = function () {
            console.log('método de instância', this);
        };
        function domLoaded() {
            var $el;
            $el = $('body');
            $.classMethod();
            $.instanceMethod();
            $el.classMethod();
            $el.instanceMethod();
        }
        $(d).ready(domLoaded);
    }(window));

    Você perceberá que:
    * jQuery não possui o método instanceMethod, que pertence apenas às instâncias de objetos jQuery, o resultado de uma chamada $()
    * $el não possui o método clssMethod, que é exclusivo da classe jQuery, tal qual $.post, $.get, $.ajax, por exemplo

    • Perfeito Evandro, exatamente por isso eu começo o texto com: “todas as boas práticas que existem para javascript, também existem para jQuery”.

Deixe uma resposta

Your email address will not be published.

*