Slides da lightning talk do Lambda Day SP

1. jQuery
Dicas e truques em 15 minutos
Victor Cavalcante
vcavalcante@lambda3.com.br
@vcavalcante

3. Victor Cavalcante

4. Cuidado com a versão 2.0
• Vai sair esse ano (2013)
• 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!

5. Você pode utilizar seletores no .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)");

6. 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

7. 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();

8. Faça cache da suas consultas
• 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();

9. Faça cache da suas consultas
Ou utilize encadeamento:
$("ul a")
.css("margin", "5px")
.css("background-color", "red")
.css("margin", "0px")
.css("background-color", "blue")
.show();
http://jsperf.com/jquery-cache-selector

10. Não utilize .each() para tudo!!!
$.each(a, function(index, number) {
var e = number;});
$(a).each(function(index, number) {
var e = number;});
for (var i = 0, len = a.length; i < len; i++) {
var e = a[i];};
http://jsperf.com/jquery-each-x-for

11. Como criar elementos com jQuery?
$("<div id='lambda3' class='devday'>Lambda3</div>");
$("<div>",{id:'lambda3',class:'devday',text:'lambda3'});
$("<div>").
attr("id","lambda3").
addClass('devday').
text('lambda3');
http://jsperf.com/jquery-create-elements-string-object-methods/

12. Não use o live, deletegate e bind
• Utilize o método $.on() e $.off()
• A partir da versão 1.7 essa é a forma oficial para
atachar eventos

13. Não use o live, delegate e bind
$('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');
$('.comment').delegate('a.add', 'click', addNew);
$('.comment').on('click', 'a.add', addNew);
$('.dialog').undelegate('a', 'click.myDlg');
$('.dialog').off('click.myDlg', 'a');

14. Use filtro em vez de contexto!
var painel = $('a.destaque', $('#contexto'));
var painel = $('#contexto').filter("a.destaque");
http://jsperf.com/jquery-filter-vs-context

15. Queries
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>
1. $("#produtos a.destaque");
<a href="#" class="destaque">destaque</a> 2. $("#produtos .destaque");
</li> 3. $("#produtos").filter("a.destaque");
<li>
<a href="#">sem destaque</a> 4. $("#produtos").filter(".destaque");
</li> 5. $(".destaque", $("#produtos"));
<li>
<a href="#">sem destaque</a>
</li>
</ul>
</section>
http://jsperf.com/jquery-selectors-vs-filter

16. Dúvidas?

17. 1

18. Obrigado!
Victor Cavalcante
vcavalcante@lambda3.com.br
@vcavalcante

19. www.lambda3.com.br