Artigos

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

Um comentário

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *