Más práticas de jQuery

Palestra no Talk a Bit++

Transcript

1. Joselito Júnior BlackBerry Elite @joselitojunior1 www.joselitojunior.com M Á S P R Á T I C A S D E J Q U E R Y
2. • Curso Ciência da Computação no CIn-UFPE • Co-fundador do Estudorama • Criador do Rabiscapp • Desenvolvedor no BlackBerry Tech Center Recife • BlackBerry Elite Member • Vencedor do NASA Space Apps Challenge Brazil 2013 • Vencedor do Startup Jam 2013 • Apaixonado pela web • Fã de Fórmula 1 e automobilismo S O B R E M I M
3. • O que é jQuery • Histórico da web e do jQuery • Avanços do HTML5 • Quando você não precisa do jQuery • Como usar jQuery do jeito certo • Futuro da web A G E N D A
4. O ? Q U E É
5. Fonte: jQuery (http://jquery.com) jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
7. H I S T Ó R I C O
8. 2 0 0 5
9. 2 0 0 6
10. 2 0 0 8
11. 2 0 0 9
12. 2 0 1 2
13. A V A N Ç O S D O
14. A V A N Ç O S • Padrões, padrões e mais padrões. • Mudanças semânticas • Plugin-free • Novas APIs nativas - Canvas - Aplicações offline - Mídia - Estrutura do DOM - Manipulação de eventos H T M L 5 D O
15. Q U A N D O V O C Ê J Q U E R Y P R E C I S A N Ã O D O
17. 1 Usar o jQuery apenas para selecionar elementos $(‘#elemento’)
18. 1 Usar o jQuery apenas para selecionar elementos return new jQuery.fn.init( selector, context, rootjQuery ); if ( !selector ) { if ( selector.nodeType ) { if ( selector === "body" && !context && document.body ) { if ( typeof selector === "string" ) { if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) { match = quickExpr.exec( selector ); if ( match && (match[1] || !context) ) { if ( match[1] ) { elem = document.getElementById( match[2] ); if ( elem && elem.parentNode ) { if ( elem.id !== match[2] ) { this.length = 1; this[0] = elem; this.context = document; this.selector = selector; return this;
19. 1 Usar o jQuery apenas para selecionar elementos document.querySelectorAll(‘#elemento’)
20. 1 Usar o jQuery apenas para selecionar elementos false ($(‘#elemento’) == document.querySelectorAll(‘#elemento’))
21. 1 Usar o jQuery apenas para selecionar elementos O jQuery não retorna um elemento do DOM! $(‘#elemento’)
22. 1 Usar o jQuery apenas para selecionar elementos O primeiro elemento do Objeto retornado pelo jQuery que é um elemento do DOM. $(‘#elemento’)[0]
23. function $(query) { return document.querySelectorAll(query); }
24. function $J(query) { return document.querySelectorAll(query); }
25. 2 Não manipule eventos com jQuery $(‘#elemento’).click(function(e){}); $(‘#elemento’).on('click', function(e){});
26. 2 Não manipule eventos com jQuery $J(‘#elemento’).addEventListener('click', function(e){});
27. function $(query) { return document.querySelectorAll(query); } Element.prototype.on = Element.prototype.addEventListener;
28. 3 Não manipule classes de um elemento com jQuery $(‘#elemento’).addClass(‘lindao’); $(‘#elemento’).addClass(‘lindao’); $(‘#elemento’).addClass(‘lindao’);
29. 3 Não manipule classes de um elemento com jQuery HTML5 classList API
30. 3 Não manipule classes de um elemento com jQuery $J(‘#elemento’).classList.add(‘lindao’); $J(‘#elemento’).classList.remove(‘lindao’); $J(‘#elemento’).classList.toggle(‘lindao’); $J(‘#elemento’).classList.contains(‘lindao’);
31. 4 Não manipule atributos de um elemento com jQuery $('input').on('change', function () { var value = $(this).attr('value'); alert('O novo valor é:' + value); });
32. 4 Não manipule atributos de um elemento com jQuery
33. 4 Não manipule atributos de um elemento com jQuery $('input').on('change', function () { alert('O novo valor é:' + input.value); });
34. 4 Não manipule atributos de um elemento com jQuery $('#elemento').attr('value','fulano'); $('#elemento').attr('value');
35. 4 Não manipule atributos de um elemento com jQuery $J('#elemento img').getAttribute('src'); $J('#elemento').id; $J('#elemento a').href; $J('#elemento img').setAttribute('src','fulano');
36. 5 $('#elemento').on('mouseenter', function() { $(this).animate({ opacity: 0.5 }, 2000); }).on('mouseleave', function() { $(this).animate({ opacity: 1 }, 2000); }); Não use as efeitos do jQuery
37. 5 Não use as efeitos do jQuery • el.hide(); • el.show(); • el.toggle(); • el.slideUp(); • el.slideDown(); • el.fadeIn(); • el.fadeOut(); • el.slideToggle(); • el.fadeToggle();
38. 5 Não use as efeitos do jQuery • el.hide(); • el.show(); • el.toggle(); • el.slideUp(); • el.slideDown(); • el.fadeIn(); • el.fadeOut(); • el.slideToggle(); • el.fadeToggle();
39. 5 #elemento { transition: opacity 2s linear; } #elemento:hover { opacity: 0; } Não use as efeitos do jQuery
40. 5 https://daneden.me/animate/ Não use as efeitos do jQuery
41. 5 Não use as efeitos do jQuery
42. 5 Não use as efeitos do jQuery flash bounce shake tada swing wobble pulse flip flipInX flipOutX flipInY flipOutY fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig slideInDown slideInLeft slideInRight slideOutUp slideOutLeft slideOutRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig hinge rollIn rollOut
43. 5 Não use as efeitos do jQuery $J(‘#elemento’).classList.add(‘tada’); $J(‘#elemento’).classList.remove(‘tada’);
44. 6 Use as APIs do browser Como verificar se o usuário está online?
45. 6 Use as APIs do browser $.ajaxSetup({ timeout: 1000, error: function(request, status, maybe_an_exception_object) { if(status != 'timeout') // Está online else // Está offline } }); Como verificar se o usuário está online?
46. 6 Use as APIs do browser $.ajaxSetup({ timeout: 1000, error: function(request, status, maybe_an_exception_object) { if(status != 'timeout') // Está online else // Está offline } }); Como verificar se o usuário está online?
47. 6 Use as APIs do browser if (navigator.onLine) { // Está online } Como verificar se o usuário está online?
48. 6 Use as APIs do browser • onLine • language • platform • userAgent • battery, vibrate, geolocation...
49. 7 Não use $(“document”).ready() nem $(“window”).load() $(document).ready(function(){ // DOM carregado }); $(window).load(function(){ // Janela carregada });
50. 7 Não use $(“document”).ready() nem $(“window”).load() document.addEventListener("DOMContentLoaded", init, false); function init() { // DOM carregado }
51. 7 Não use $(“document”).ready() nem $(“window”).load() window.load = function init() { // Janela carregada }
52. 8 Evite ao máximo injetar código no carregamento com jQuery $(“body”).html($(“body”).html()+ “<h1>Talk a bit++</h1>”); $(“body”).append(“<h1>Talk a bit++</h1>”);
53. 8 Evite ao máximo injetar código no carregamento com jQuery $(“<h1>Título do Sucesso</h1>”);
54. 8 Evite ao máximo injetar código no carregamento com jQuery $J(“#elemento”).innerHTML $J(“#elemento”).innerHTML = “Talk a bit”; $J(“#elemento”).innerHTML += “Talk a bit++”;
55. 8 Evite ao máximo injetar código no carregamento com jQuery var myDiv = document.createElement('div'); myDiv.id = “elemento”; myDiv.setAttribute(“class”,”lindao”); body.append(myDiv);
56. 9 Não use jQuery UI N O P E .
57. 9 Não use jQuery UI
58. 1 0 Armazenar Data com jQuery jQuery.data(document.body, "farol", 52); jQuery.data(document.body, "tuts", "quero ver");
59. 1 0 Armazenar Data com jQuery HTML5 data API
60. 1 0 Armazenar Data com jQuery <div id="joselito" data-member="elite" data- company="blackberry"></div>
61. 1 0 Armazenar Data com jQuery var html = []; for (var key in el.dataset) { html.push(key, ': ', el.dataset[key], '<br>'); } el.innerHTML = html.join('');
62. C O M O U S A R J Q U E R Y J E I T O D O C E R T O
63. 1 Porque você já está usando
64. 1 Porque você já está usando (e um monte de gente também)
65. 2 AJAX function sendRequest(url,callback,postData) { var req = createXMLHTTPObject(); if (!req) return; var method = (postData) ? "POST" : "GET"; req.open(method,url,true); req.setRequestHeader('User-Agent','XMLHTTP/1.0'); if (postData) req.setRequestHeader('Content-type','application/x-www-form- urlencoded'); req.onreadystatechange = function () { if (req.readyState != 4) return; if (req.status != 200 && req.status != 304) { return; } callback(req); } if (req.readyState == 4) return; req.send(postData); } var XMLHttpFactories = [ function () {return new XMLHttpRequest()}, function () {return new ActiveXObject("Msxml2.XMLHTTP")}, function () {return new ActiveXObject("Msxml3.XMLHTTP")}, function () {return new ActiveXObject("Microsoft.XMLHTTP")} ]; function createXMLHTTPObject() { var xmlhttp = false; for (var i=0;i<XMLHttpFactories.length;i++) { try { xmlhttp = XMLHttpFactories[i](); } catch (e) { continue; } break; } return xmlhttp; }
66. 2 AJAX function sendRequest(url,callback,postData) { var req = createXMLHTTPObject(); if (!req) return; var method = (postData) ? "POST" : "GET"; req.open(method,url,true); req.setRequestHeader('User-Agent','XMLHTTP/1.0'); if (postData) req.setRequestHeader('Content-type','application/x-www-form- urlencoded'); req.onreadystatechange = function () { if (req.readyState != 4) return; if (req.status != 200 && req.status != 304) { return; } callback(req); } if (req.readyState == 4) return; req.send(postData); } var XMLHttpFactories = [ function () {return new XMLHttpRequest()}, function () {return new ActiveXObject("Msxml2.XMLHTTP")}, function () {return new ActiveXObject("Msxml3.XMLHTTP")}, function () {return new ActiveXObject("Microsoft.XMLHTTP")} ]; function createXMLHTTPObject() { var xmlhttp = false; for (var i=0;i<XMLHttpFactories.length;i++) { try { xmlhttp = XMLHttpFactories[i](); } catch (e) { continue; } break; } return xmlhttp; }
67. 2 AJAX $.ajax({ type: "GET", url: "ocean.php", data: { name: "Sponge", last: "Bob" } }).done(function( msg ) { alert(msg); });
68. 3 Adicionar e modificar elementos diretamente no DOM • el.text() • el.html() • el.append() • el.css()
69. 4 Eventos do $(document) e do $(window) $(window).resize(function () { // Mudou a resolução });
70. 5 Aproveite-se dos utilitários • $.find() • $.map() • $.grep() • $.inArray() • $.merge() • $.extend()
71. 6 Seletores especiais do jQuery • el:has() • el:contains() • el:not() • el:filter() • el:animated • el:hidden • el:visible
72. 7 Use-o para tornar seu site responsivo http://farol52.org
73. 7 Use-o para tornar seu site responsivo
74. 7 Use-o para tornar seu site responsivo
75. 8 Faça Cache e Chaining function setDiv() { $("#elemento").attr("title", $("input").text()); $("#elemento").css("color", "white"); $("#elemento").css("background-color", "purple"); $("#elemento").fadeIn(); }
76. 8 Faça Cache e Chaining function setDivMelhor() { var el = $("#elemento"); el.attr("title", $("input").text()); el.css("color", "white"); el.css("background-color", "purple"); el.fadeIn(); }
77. 8 Faça Cache e Chaining function setDivBemMelhor() { var el = $("#elemento"); el.attr("title", $("input").text()).css("color", "white").css("background-color", "purple").fadeIn(); }
78. 9 Ok, o el.animate() ainda é seu amigo http://citi.org.br/talkabit/
79. 9 Ok, o el.animate() ainda é seu amigo $('#evento').on("click",function(){ $('html, body').animate({scrollTop:0}, 700); }); $('#learnmenu').on("click",function(){ $('html, body').animate({scrollTop:$ ("#learn").offset().top - 110 }, 700); });
80. 1 0 Já que você pode, abuse dos callbacks! $("#elemento").css({'top': 300, 'left':200}, function(){ // Meu callback });
81. 1 1 Plugins, plugins, plugins e mais plugins! http://jquer.in/
82. 1 1 Plugins, plugins, plugins e mais plugins! http://getbootstrap.com/javascript/
83. 1 2 Seu projeto precisa rodar em browsers antigos (aka IE)
84. 1 3 Use sempre a última versão
85. 1 4 Use só o jQuery que de fato você precisa http://projects.jga.me/jquery-builder/
86. 1 5 Conheça alternativas e os novos frameworks
87. F U T U R O D A W E B
88. <slider></slider>
89. Web Components
91. <x-pokemon></x-pokemon>
92. <link rel="import" href="x-pokemon.html"> <x-pokemon name="pikachu"></x-pokemon>
93. AFINAL, JQUERY É BOM?
94. http://www.a-blue-box.com
95. .box { background-color: blue; position: absolute; height: 60%; width: 60%; left: 20%; top: 20%; } <div class="box"></div>
96. <table style="position: absolute; background: blue; height: 60%; width: 60%; left: 20%; top: 20%"></table>
97. body:after { position: absolute; background: blue; display: block; content: ""; height: 60%; width: 60%; left: 20%; top: 20%; }
98. html { border: 10em solid #fff; background: #00f; height: 100%; }
99. * { font: 500px impact; text-decoration: none; text-align: center; } <a href="#">—</a>
100. <canvas id="blue-box-land"></canvas> var win = $(window); var canvas = $("#blue-box-land"); function resize() { canvas .width(win.width()) .height(win.height()); } win.resize(resize).resize(); var ctx = canvas[0].getContext('2d'); ctx.fillStyle = "blue"; ctx.fillRect(50, 50, 200, 50);
101. var div = document.createElement("div"); div.style.width = "50%"; div.style.height = "50%"; div.style.position = "relative"; div.style.top = "50%"; div.style.left = "50%"; div.style.marginLeft = "-25%"; div.style.marginTop = "-8%"; div.style.backgroundColor = "blue"; var body = document.getElementsByTagName("body")[0]; body.appendChild(div);
102. $.fn.BlueBox = function() { this.css({ backgroundColor: 'blue', position: 'absolute', height: '60%', width: '60%', left: '20%', top: '20%' }); }; $( '.box' ).BlueBox(); <div class="box"></div>
103. A FERRAMENTA NÃO IMPORTA
104. O IMPORTANTE É O RESULTADO
105. Joselito Júnior BlackBerry Elite @joselitojunior1 www.joselitojunior.com O B R I G A D O blackberrydeveloper.com.br jfnj.tk/jquery-tab