jQuery - Dicas e truques :)

Victor Cavalcante

• Desenvolvedor Web
• Professor Universitário de férias (ou aposentado... ainda não decidi) :)
• Palestrante por gosto
• Membro do .Net Architects
• Membro do conselho Jedi da Lambda3
• Microsoft MVP de ASP.NET
• vcavalcante@lambda3.com.br @vcavalcante

Onde trabalho

   

Vamos falar sobre

1º Dica

Sempre utilize a última versão do jQuery!

• Sempre há melhorias de performance
• Entre a versão 1.3 e 1.4 houve ganho de 50% de performance
• Muitos sites ainda usam a versão 1.4.2
• Muitos bugs são corrigidos a cada versão

2º Dica

Cuidado com a versão 2.0!

• Ela não terá suporte para as versões do 6, 7 e 8 do IE
• Qual o problema com isso?
• Nenhum! :)
• Mas saibam disso!
• Podemos servir a versão de acordo com o browser

• <!--[if lt IE 9]>
      <script src="jquery-1.9.1.js"></script>
  <![endif]-->
  <!--[if gte IE 9]><!-->
      <script src="jquery-2.0.0b2.js"></script>
  <!--<![endif]-->

3º dica

Use o CDN para o jQuery

• Já está “minificado” e compactado
• Facilita o cache do jQuery

4º dica

Você pode utilizar seletores no método load

• O Load consome uma página e coloca o conteúdo onde você definir
• Com seletores você pode escolher qual parte da página você quer

• $("article").load("/customers");
  $("article").load("/customers h1:eq(0)");

5º dica

Use o seletor ID ao invés de classe

• jQuery usa a api nativa do browser
• Quando não puder, pesquise através de um container
• http://jsperf.com/jquery-sector-id-or-class

6º dica

Faça cache da suas consultas

• Em vez de fazer assim:

$("ul a").css("margin", "5px");
$("ul a").css("background-color", "red");
$("ul a").css("margin", "0px");
$("ul a").css("background-color", "blue");
$("ul a").show();

var $links = $("ul a");
$links.css("margin", "5px");
$links.css("background-color", "red");
$links.css("margin", "0px");
$links.css("background-color", "blue");
$links.show();

6º dica

• ou em vez de fazer com cache:

  var $links = $("ul a");
  $links.css("margin", "5px");
  $links.css("background-color", "red");
  $links.css("margin", "0px");
  $links.css("background-color", "blue");
  $links.show();

• Faça com encadeamento:

  $("ul a")
     .css("margin", "5px")
     .css("background-color", "red")
     .css("margin", "0px")
     .css("background-color", "blue")
     .show();

• http://jsperf.com/jquery-cache-selector

7º dica

Não é necessário utilizar each para tudo!!!

• Com $.each():

  $.each(a, function(index, number) {
    var e = number;
  });

• Com $(a).each():

  $(a).each(function(index, number) {
    var e = number;
  });

• Com for:

  for (var i = 0, len = a.length; i < len; i++) {
    var e = a[i];
  };

• http://jsperf.com/jquery-each-x-for

8º dica

Como criar elementos com jQuery?

• Com string:

  $("<div id='lambda3' class='devday'>Lambda3</div>");

• Com objeto:

  $("<div>",{id:'lambda3',class:'devday',text:'lambda3'});

• Ou com métodos?:

  $("<div>").
     attr("id","lambda3").
     addClass('devday').
     text('lambda3');

• http://jsperf.com/jquery-create-elements-string-object-methods/

9º dica

Não use o live, deletegate e bind

• Utilize o método $.on() e $.off()
• A partir da versão 1.7 eles são a api para atachar eventos
• Alguns exemplos:
• Substituindo o bind e unbind:

  $('a').bind('click', myHandler);
  $('a').on('click', myHandler);
  
  $('form').bind('submit', { val: 42 }, fn);
  $('form').on('submit', { val: 42 }, fn);
  
  $(window).unbind('scroll.myPlugin');
  $(window).off('scroll.myPlugin');

9º dica - continua...

Não use o live, deletegate e bind

• Substituindo o delegate e undelegate:

  $('.comment').delegate('a.add', 'click', addNew);
  $('.comment').on('click', 'a.add', addNew);
  
  $('.dialog').undelegate('a', 'click.myDlg');
  $('.dialog').off('click.myDlg', 'a');

• Substituindo o live e o die:

  $('a').live('click', fn);
  $(document).on('click', 'a', fn);
  
  $('a').die('click');
  $(document).off('click', 'a');

10º dica

Use filtro em vez de contexto!

• Melhor que usar contexto:

  var painel = $('a.destaque', $('#contexto'));

• Use filtro:

  var painel = $('#contexto').filter("a.destaque");

• http://jsperf.com/jquery-filter-vs-context

11º dica

Quais são as formas de selecionar o link com destaque que está na div produtos HTML?

<a href="#" class="destaque">destaque</a>
<section id="produtos">
  <ul>
    <li>
      <a href="#" class="destaque">destaque</a>
    </li>
    <li>
      <a href="#">sem destaque</a>
    </li>
    <li>
      <a href="#">sem destaque</a>
    </li>
  </ul>
</section>

11º dica

• $("#produtos a.destaque");

• $("#produtos .destaque");

•  $("#produtos").filter("a.destaque");

• $("#produtos").filter(".destaque");

• var destaque = $(".destaque", $("#produtos"));

• var destaque = $("#produtos").find(".destaque");

• http://jsperf.com/jquery-selectors-vs-filter

Dúvidas, Críticas ou Sugestões?

@vcavalcante

 vcavalcante@lambda3.com.br