Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Más práticas de jQuery

Más práticas de jQuery

Palestra no Talk a Bit++

joseli.to
PRO

November 30, 2013
Tweet

More Decks by joseli.to

Other Decks in Programming

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

    View Slide

  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

    View Slide

  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

    View Slide

  4. O ?
    Q U E É

    View Slide

  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.

    View Slide

  6. View Slide

  7. H I S T Ó R I C O

    View Slide

  8. 2 0 0 5

    View Slide

  9. 2 0 0 6

    View Slide

  10. 2 0 0 8

    View Slide

  11. 2 0 0 9

    View Slide

  12. 2 0 1 2

    View Slide

  13. A V A N Ç O S D O

    View Slide

  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

    View Slide

  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

    View Slide

  16. View Slide

  17. 1 Usar o jQuery apenas para selecionar elementos
    $(‘#elemento’)

    View Slide

  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;

    View Slide

  19. 1 Usar o jQuery apenas para selecionar elementos
    document.querySelectorAll(‘#elemento’)

    View Slide

  20. 1 Usar o jQuery apenas para selecionar elementos
    false
    ($(‘#elemento’) ==
    document.querySelectorAll(‘#elemento’))

    View Slide

  21. 1 Usar o jQuery apenas para selecionar elementos
    O jQuery não retorna um elemento do DOM!
    $(‘#elemento’)

    View Slide

  22. 1 Usar o jQuery apenas para selecionar elementos
    O primeiro elemento do Objeto retornado pelo
    jQuery que é um elemento do DOM.
    $(‘#elemento’)[0]

    View Slide

  23. function $(query) {
    return document.querySelectorAll(query);
    }

    View Slide

  24. function $J(query) {
    return document.querySelectorAll(query);
    }

    View Slide

  25. 2 Não manipule eventos com jQuery
    $(‘#elemento’).click(function(e){});
    $(‘#elemento’).on('click', function(e){});

    View Slide

  26. 2 Não manipule eventos com jQuery
    $J(‘#elemento’).addEventListener('click',
    function(e){});

    View Slide

  27. function $(query) {
    return document.querySelectorAll(query);
    }
    Element.prototype.on =
    Element.prototype.addEventListener;

    View Slide

  28. 3 Não manipule classes de um elemento com jQuery
    $(‘#elemento’).addClass(‘lindao’);
    $(‘#elemento’).addClass(‘lindao’);
    $(‘#elemento’).addClass(‘lindao’);

    View Slide

  29. 3 Não manipule classes de um elemento com jQuery
    HTML5 classList API

    View Slide

  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’);

    View Slide

  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);
    });

    View Slide

  32. 4 Não manipule atributos de um elemento com jQuery

    View Slide

  33. 4 Não manipule atributos de um elemento com jQuery
    $('input').on('change', function () {
    alert('O novo valor é:' + input.value);
    });

    View Slide

  34. 4 Não manipule atributos de um elemento com jQuery
    $('#elemento').attr('value','fulano');
    $('#elemento').attr('value');

    View Slide

  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');

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  39. 5
    #elemento {
    transition: opacity 2s linear;
    }
    #elemento:hover {
    opacity: 0;
    }
    Não use as efeitos do jQuery

    View Slide

  40. 5
    https://daneden.me/animate/
    Não use as efeitos do jQuery

    View Slide

  41. 5 Não use as efeitos do jQuery

    View Slide

  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

    View Slide

  43. 5 Não use as efeitos do jQuery
    $J(‘#elemento’).classList.add(‘tada’);
    $J(‘#elemento’).classList.remove(‘tada’);

    View Slide

  44. 6 Use as APIs do browser
    Como verificar se o usuário está online?

    View Slide

  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?

    View Slide

  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?

    View Slide

  47. 6 Use as APIs do browser
    if (navigator.onLine) {
    // Está online
    }
    Como verificar se o usuário está online?

    View Slide

  48. 6 Use as APIs do browser
    • onLine
    • language
    • platform
    • userAgent
    • battery, vibrate, geolocation...

    View Slide

  49. 7 Não use $(“document”).ready() nem $(“window”).load()
    $(document).ready(function(){
    // DOM carregado
    });
    $(window).load(function(){
    // Janela carregada
    });

    View Slide

  50. 7 Não use $(“document”).ready() nem $(“window”).load()
    document.addEventListener("DOMContentLoaded", init, false);
    function init() {
    // DOM carregado
    }

    View Slide

  51. 7 Não use $(“document”).ready() nem $(“window”).load()
    window.load = function init() {
    // Janela carregada
    }

    View Slide

  52. 8 Evite ao máximo injetar código no carregamento com jQuery
    $(“body”).html($(“body”).html()+
    “Talk a bit++”);
    $(“body”).append(“Talk a bit++”);

    View Slide

  53. 8 Evite ao máximo injetar código no carregamento com jQuery
    $(“Título do Sucesso”);

    View Slide

  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++”;

    View Slide

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

    View Slide

  56. 9 Não use jQuery UI
    N O P E .

    View Slide

  57. 9 Não use jQuery UI

    View Slide

  58. 1 0 Armazenar Data com jQuery
    jQuery.data(document.body, "farol", 52);
    jQuery.data(document.body, "tuts", "quero ver");

    View Slide

  59. 1 0 Armazenar Data com jQuery
    HTML5 data API

    View Slide

  60. 1 0 Armazenar Data com jQuery
    company="blackberry">

    View Slide

  61. 1 0 Armazenar Data com jQuery
    var html = [];
    for (var key in el.dataset) {
    html.push(key, ': ', el.dataset[key], '
    ');
    }
    el.innerHTML = html.join('');

    View Slide

  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

    View Slide

  63. 1 Porque você já está usando

    View Slide

  64. 1 Porque você já está usando (e um monte de gente também)

    View Slide

  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;itry {
    xmlhttp = XMLHttpFactories[i]();
    }
    catch (e) {
    continue; }
    break; }
    return xmlhttp;
    }

    View Slide

  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;itry {
    xmlhttp = XMLHttpFactories[i]();
    }
    catch (e) {
    continue; }
    break; }
    return xmlhttp;
    }

    View Slide

  67. 2 AJAX
    $.ajax({
    type: "GET",
    url: "ocean.php",
    data: { name: "Sponge", last: "Bob" }
    }).done(function( msg ) {
    alert(msg);
    });

    View Slide

  68. 3 Adicionar e modificar elementos diretamente no DOM
    • el.text()
    • el.html()
    • el.append()
    • el.css()

    View Slide

  69. 4 Eventos do $(document) e do $(window)
    $(window).resize(function () {
    // Mudou a resolução
    });

    View Slide

  70. 5 Aproveite-se dos utilitários
    • $.find()
    • $.map()
    • $.grep()
    • $.inArray()
    • $.merge()
    • $.extend()

    View Slide

  71. 6 Seletores especiais do jQuery
    • el:has()
    • el:contains()
    • el:not()
    • el:filter()
    • el:animated
    • el:hidden
    • el:visible

    View Slide

  72. 7 Use-o para tornar seu site responsivo
    http://farol52.org

    View Slide

  73. 7 Use-o para tornar seu site responsivo

    View Slide

  74. 7 Use-o para tornar seu site responsivo

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  78. 9 Ok, o el.animate() ainda é seu amigo
    http://citi.org.br/talkabit/

    View Slide

  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);
    });

    View Slide

  80. 1 0 Já que você pode, abuse dos callbacks!
    $("#elemento").css({'top': 300, 'left':200}, function(){
    // Meu callback
    });

    View Slide

  81. 1 1 Plugins, plugins, plugins e mais plugins!
    http://jquer.in/

    View Slide

  82. 1 1 Plugins, plugins, plugins e mais plugins!
    http://getbootstrap.com/javascript/

    View Slide

  83. 1 2 Seu projeto precisa rodar em browsers antigos (aka IE)

    View Slide

  84. 1 3 Use sempre a última versão

    View Slide

  85. 1 4 Use só o jQuery que de fato você precisa
    http://projects.jga.me/jquery-builder/

    View Slide

  86. 1 5 Conheça alternativas e os novos frameworks

    View Slide

  87. F U T U R O
    D A W E B

    View Slide


  88. View Slide

  89. Web Components

    View Slide

  90. View Slide


  91. View Slide



  92. View Slide

  93. AFINAL, JQUERY É BOM?

    View Slide

  94. http://www.a-blue-box.com

    View Slide

  95. .box {
    background-color: blue;
    position: absolute;
    height: 60%;
    width: 60%;
    left: 20%;
    top: 20%;
    }

    View Slide


  96. View Slide

  97. body:after {
    position: absolute;
    background: blue;
    display: block;
    content: "";
    height: 60%;
    width: 60%;
    left: 20%;
    top: 20%;
    }

    View Slide

  98. html {
    border: 10em solid #fff;
    background: #00f;
    height: 100%;
    }

    View Slide

  99. * {
    font: 500px impact;
    text-decoration: none;
    text-align: center;
    }

    View Slide


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

    View Slide

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

    View Slide

  102. $.fn.BlueBox = function() {
    this.css({
    backgroundColor: 'blue',
    position: 'absolute',
    height: '60%',
    width: '60%',
    left: '20%',
    top: '20%'
    });
    };
    $( '.box' ).BlueBox();

    View Slide

  103. A FERRAMENTA NÃO IMPORTA

    View Slide

  104. O IMPORTANTE É O RESULTADO

    View Slide

  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

    View Slide