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.

  $("div.products"); //Maus. Lento

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

Evite fazer essas presepadas:

  $('div.container > *'); //extremamente lento

Ao invés daquilo, faça isto:

  $('div.container').children(); //veloz e furioso. melhor

Isto aqui é rápido:

  $( "#container div.comments" );

Isto é mais rápido:

  $( "#container" ).find( "div.comments" );

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:

  $('#outer #inner'); // ruim
  $('div#inner'); // eca
  $('.outer-container #inner'); // o horror!

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.

  var div = $( "#MyDiv" );
  var parent = div.parent();
 
  div.detach();
 
  // várias pogs aqui
 
  parent.append( div );

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

  $("#myLink").on("click", function(){...}); // isso é maus
  function clicouNoLink(){...}
  $("#myLink").on("click", clicouNoLink); // isso é incrível!

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

  $("#meuBotao").on("click.meuClickEspecial", funcaoLouca); // Fantástico

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

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

  $("#list a").on("click", funcaoQueFazAlgo); // não curti

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.

  $("#list").on("click", "a", funcaoQueFazAlgo); 
  //agora sim, o ouvinte é atrelado somente ao elemento pai #list

Não misture css com jQuery.

  $("#mydiv").css({'color':red, 'font-weight':'bold'}); // vish

Use cache para os seletores:

  var $myDiv = $("#myDiv");
  $myDiv.click();

Use encadeamento de chamadas.

  $("#myDiv").addClass("error").show();

Use vanilla javascript, sempre que possível.

Até a próxima.

Referências

Anúncios

Um comentário sobre “jQuery Tips – Dicas de jQuery

O que tu achas?

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s