jQuery Tips – Dicas de jQuery

Aqui vão algumas dicas que os ninjas do jQuery utilizam em seu dia-a-dia. Na verdade não passam de padrões e boas práticas que nos auxiliam a escrever código mais legível e performático.

Use o seletor Id sempre que possível. Ele é o mais rápido.

Se usar o seletor classe não use com o elemento.

[code language=\\\”javascript\\\”]
$("div.products"); //Maus. Lento

$(".products"); //ok. rápido
[/code]

Evite fazer essas presepadas:

[code language=\\\”javascript\\\”]
$(\\\’div.container > *\\\’); //extremamente lento
[/code]

Ao invés daquilo, faça isto:

[code language=\\\”javascript\\\”]
$(\\\’div.container\\\’).children(); //veloz e furioso. melhor
[/code]

Isto aqui é rápido:

[code language=\\\”javascript\\\”]
$( "#container div.comments" );
[/code]

Isto é mais rápido:

[code language=\\\”javascript\\\”]
$( "#container" ).find( "div.comments" );
[/code]

Quando se usa $( \\\”#container\\\” ), por baixo dos panos ele está usando document.getElementById(), que é bastante rápido. Lembre-se que o jQuery precisa varrer a árvore do DOM para encontrar a referência aos elementos. Essa busca é meio custosa. Então evite fazer isto:

[code language=\\\”javascript\\\”]
$(\\\’#outer #inner\\\’); // ruim
$(\\\’div#inner\\\’); // eca
$(\\\’.outer-container #inner\\\’); // o horror!
[/code]

Evite manipular o DOM. Mas caso precise… A partir da versão 1.4, o jQuery permite remover o elemento do DOM enquanto você o manipula.

[code language=\\\”javascript\\\”]
var div = $( "#MyDiv" );
var parent = div.parent();

div.detach();

// várias pogs aqui

parent.append( div );
[/code]

Não use funções anônimas para eventos. É difícil de debugar, de testar, de manter.

[code language=\\\”javascript\\\”]
$("#myLink").on("click", function(){…}); // isso é maus
function clicouNoLink(){…}
$("#myLink").on("click", clicouNoLink); // isso é incrível!
[/code]

Use namespaces para os eventos. Isso facilita dar unbind sem afetar outros eventos. Acredite, isso salva vidas.

[code language=\\\”javascript\\\”]
$("#meuBotao").on("click.meuClickEspecial", funcaoLouca); // Fantástico

//unbind sem afetar outros clicks
$("#meuBotao").unbind("click.meuClickEspecial");
[/code]

O jQuery tem uma parada chamada Event Delegation que permite atrelar um ouvinte do evento a um elemento.

[code language=\\\”javascript\\\”]
$("#list a").on("click", funcaoQueFazAlgo); // não curti
[/code]

O código acima funciona de boa. Ele atrela o ouvinte do evento click a todos os links da lista #list. Isso é palha e pode causar alguns problemas. Imagine que você precise adicionar outro link na lista. Esse novo elemento não estará ouvindo o evento.  Vamos melhorar isso.

[code language=\\\”javascript\\\”]
$("#list").on("click", "a", funcaoQueFazAlgo);
//agora sim, o ouvinte é atrelado somente ao elemento pai #list
[/code]

Não misture css com jQuery.

[code language=\\\”javascript\\\”]
$("#mydiv").css({\\\’color\\\’:red, \\\’font-weight\\\’:\\\’bold\\\’}); // vish
[/code]

Use cache para os seletores:

[code language=\\\”javascript\\\”]
var $myDiv = $("#myDiv");
$myDiv.click();
[/code]

Use encadeamento de chamadas.

[code language=\\\”javascript\\\”]
$("#myDiv").addClass("error").show();
[/code]

Use vanilla javascript, sempre que possível.

Até a próxima.

Referências

• jQuery Performance: http://learn.jquery.com/performance/
• jQuery Learn: http://learn.jquery.com
• jQuery API Docs: http://api.jquery.com/
• jQuery Coding Standards and Best Practice: http://www.jameswiseman.com/blog/2010/04/20/jquery-standards-and-best-practice/
• jQuery Cheatsheet: http://lab.abhinayrathore.com/jquery-cheatsheet/
• jQuery Plugin Boilerplate: http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/