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

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();
  • Faça 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();
  • 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?

    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!

    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

    Made with Slides.com