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.

<br />
  $(&quot;div.products&quot;); //Maus. Lento</p>
<p>  $(&quot;.products&quot;); //ok. rápido<br />

Evite fazer essas presepadas:

<br />
  $('div.container &gt; *'); //extremamente lento<br />

Ao invés daquilo, faça isto:

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

Isto aqui é rápido:

<br />
  $( &quot;#container div.comments&quot; );<br />

Isto é mais rápido:

<br />
  $( &quot;#container&quot; ).find( &quot;div.comments&quot; );<br />

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:

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

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.

<br />
  var div = $( &quot;#MyDiv&quot; );<br />
  var parent = div.parent();</p>
<p>  div.detach();</p>
<p>  // várias pogs aqui</p>
<p>  parent.append( div );<br />

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

<br />
  $(&quot;#myLink&quot;).on(&quot;click&quot;, function(){...}); // isso é maus<br />
  function clicouNoLink(){...}<br />
  $(&quot;#myLink&quot;).on(&quot;click&quot;, clicouNoLink); // isso é incrível!<br />

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

<br />
  $(&quot;#meuBotao&quot;).on(&quot;click.meuClickEspecial&quot;, funcaoLouca); // Fantástico</p>
<p>  //unbind sem afetar outros clicks<br />
  $(&quot;#meuBotao&quot;).unbind(&quot;click.meuClickEspecial&quot;);<br />

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

<br />
  $(&quot;#list a&quot;).on(&quot;click&quot;, funcaoQueFazAlgo); // não curti<br />

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.

<br />
  $(&quot;#list&quot;).on(&quot;click&quot;, &quot;a&quot;, funcaoQueFazAlgo);<br />
  //agora sim, o ouvinte é atrelado somente ao elemento pai #list<br />

Não misture css com jQuery.

<br />
  $(&quot;#mydiv&quot;).css({'color':red, 'font-weight':'bold'}); // vish<br />

Use cache para os seletores:

<br />
  var $myDiv = $(&quot;#myDiv&quot;);<br />
  $myDiv.click();<br />

Use encadeamento de chamadas.

<br />
  $(&quot;#myDiv&quot;).addClass(&quot;error&quot;).show();<br />

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 *

%d blogueiros gostam disto: