jQuery — fonctionnalités avancées

6,276 views
6,057 views

Published on

Published in: Technology
1 Comment
7 Likes
Statistics
Notes
  • Bonjour; j'ai un petit soucis.
    je vais récuperer les données qui se trouver sur ce lien au format json http://tikprod2.tikdem.com/tests/test_app_plateformobile/offres.json et le placer automatiquement sur mon apps mobile.
    c'est-à-dire quand on lance l'apps les données ce charge automatique dans l'accordeon.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
6,276
On SlideShare
0
From Embeds
0
Number of Embeds
1,174
Actions
Shares
0
Downloads
121
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

jQuery — fonctionnalités avancées

  1. 1. jQueryfonctionnalités avancées Rémi Prévost — ConFoo 2011
  2. 2. Rémi Prévost Développeur Web@remi + http://remiprevost.com
  3. 3. Butde cette présentation
  4. 4. But Pas un tutoriel/pitch jQuery
  5. 5. But Survol des fonctionnalités moins connues
  6. 6. But Sa force Courbe d’apprentissage facile
  7. 7. $(".surprise").click(function() { $(this).fadeOut("slow");});
  8. 8. But Ensuite? Beaucoup plus de possibilités
  9. 9. But 2006 2011 1.0 → 1.5 45 Ko → 208 Ko
  10. 10. But • Utilitaires • Événements • Animations • Manipulations • Parsers • Data • Deferreds
  11. 11. UtilitairesPour sauver du temps
  12. 12. Utilitaires Implémentations natives
  13. 13. Utilitaires $ Ne touchent pas aux objets natifs
  14. 14. Utilitaires $.mapModifie chaque élément d’un tableau
  15. 15. var noms = ["jack", "kate", "john", "james", "claire"]$.map(noms, function(nom) { return nom.toUpperCase(); });=> ["JACK", "KATE", "JOHN", "JAMES", "CLAIRE"]
  16. 16. $(".user-name").map(function() { return $(this).text(); } );=> ["@remi", "@garno", "@jmlacroix", "@vincentroyc"]
  17. 17. Utilitaires $.grep Filtre un tableau
  18. 18. var personnes = [ { nom: "Jack Sheppard", evil: false }, { nom: "Benjamin Linus", evil: true }, { nom: "Kate Austen", evil: false }];$.grep(personnes, function(p) { return p.evil });=> [{ nom: "Benjamin Linus", evil: true }]$.grep(personnes, function(p) { return p.evil }, false);=> [{ nom: "Jack Sheppard", … }, { nom: "Kate Austen", … }]
  19. 19. Utilitaires $.inArray Vérifie la présence d’éléments
  20. 20. var numeros = [4, 8, 15, 16, 23, 42];$.inArray(numeros, 16);=> 3$.inArray(numeros, 64);=> -1
  21. 21. Utilitaires $.merge Fusionne deux tableaux
  22. 22. var tailies = ["libby", "bernard", "eko"];var middlies = ["jack", "charlie", "eko"];$.merge(tailies, middlies);=> ["libby", "bernard", "eko", "jack", "charlie", "eko"]
  23. 23. Utilitaires $.extend Fusionne deux objets
  24. 24. function push_button(options) { options = $.extend({ delay: 108, input: [4, 8, 15, 16, 23, 42] }, options); return "Wait for "+options.delay+" minutes.";}push_button({ delay: 64 });=> "Wait for 64 minutes."
  25. 25. $.extend($.easing, { customEasing : function(p, n, firstNum, diff) { return firstNum - diff / p; }});
  26. 26. Utilitaires • $.map • $.grep • $.inArray • $.merge • $.extend
  27. 27. Utilitaires Pas assez? Underscore.js
  28. 28. Utilitaires • _.reduce • _.uniq • _.keys • _.values • _.times
  29. 29. Événements Lier et déclencher
  30. 30. Événements Base Événements faciles
  31. 31. $(".element").click(function() {});$(".element").dblclick(function() {})$(".element").mouseover(function() {});$(".element").mouseout(function() {});$(".element").keyup(function() {});$(".element").keydown(function() {});$(".element").keypress(function() {});
  32. 32. $(".element").bind("click", function() {});$(".element").bind("dblclick", function() {})$(".element").bind("mouseover", function() {});$(".element").bind("mouseout", function() {});$(".element").bind("keyup", function() {});$(".element").bind("keydown", function() {});$(".element").bind("keypress", function() {});
  33. 33. $(".element").bind({ click: function() {}, dblclick: function() {}, mouseover: function() {}, mouseleave: function() {}});
  34. 34. Événements ArbitrairesDéclencher n’importe quoi (vraiment)
  35. 35. $.fn.bind("anything", function() { // this});$.fn.trigger("anything");
  36. 36. $("#element").bind("anything", function() { // this});$("#element").trigger("anything");
  37. 37. Événements Méthodes événementielles
  38. 38. $("#vote-count").bind("increase", function() { $(this).text(parseInt($(this).text) + 1);});$("#upvote-button").bind("click", function() { $("#vote-count").trigger("increase");});
  39. 39. function increase_vote_count() { var elem = $("#vote_count"); elem.text(parseInt(elem.text()) + 1);}$("#upvote-button").bind("click", increase_vote_count);
  40. 40. function VoteCount(selecteur) { this.element = $(selecteur); this.increase = function() { this.element.text(parseInt(this.element.text()) + 1); }}vote_count = new VoteCount("#vote-count");$("#upvote-button").bind("click", function() { vote_count.increase();});
  41. 41. Événements Arguments Encore plus personnalisables
  42. 42. $(".tweets").bind("add-tweet", function(event, tweet) { $(this).append("<li>"+tweet.text+" — @"+tweet.user+"</li>");})$(".tweets").trigger("add-tweet", [{ user: "garno", text: "Tweeting live from @remi’s presentation at #confoo!"}])
  43. 43. Événements Tout peut être lié à un événement
  44. 44. var Island = { is_magic: true };$(Island).bind("move", function() { alert(this.is_magic); // true});$(Island).trigger("move");
  45. 45. Événements $.fn.live Pour les éléments inexistants
  46. 46. $("#tweets a.user").live("click", function() { // Faire quelque chose});$(document).bind("click", function(event) { if ($(event.target).is("#tweets a.user")) { // Faire quelque chose }})
  47. 47. $(".user").live("click", function() { // Faire quelque chose});$(document).bind("click", function(event) { if ($(event.target).is(".user")) { // Faire quelque chose }})
  48. 48. Événements $.fn.delegate Plus performant que $.fn.live
  49. 49. $("#tweets").delegate("a.user", "click", function() { // Faire quelque chose});$("#tweets").bind("click", function(event) { if ($(event.target).is("a.user")) { // Faire quelque chose }})
  50. 50. Événements $.fn.die Le contraire de « live »
  51. 51. $("#tweets a.user").bind("click", function() { // Quelque chose});$("#tweets *").unbind("click");
  52. 52. $("#tweets a.user").live("click", function() { // Faire quelque chose});$("a.user").die("click"); // ne fonctionnera pas$("#tweets a.user").die("click"); // fonctionne!
  53. 53. Événements $.fn.undelegate Le contraire de « delegate » (duh)
  54. 54. $("#tweets").delegate("a.user", "click", function() { // Faire quelque chose});$("#tweets").undelegate("a", "click"); // ne fonctionne pas!$("body").undelegate("#tweets a.user", "click"); // non plus!$("#tweets").undelegate("a.user", "click"); // fonctionne!
  55. 55. Événements Namespaces Pour éviter la confusion
  56. 56. // contenu de application.js$("#contenu a.user").bind("click", function() { // Faire quelque chose avec un utilisateur…});// contenu de janalytics.js$("a").bind("click", function() { // Enregistrer ce “click”});$("a").unbind("click"); // retire *tous* les “click”
  57. 57. // contenu de janalytics.js$("a").bind("click.jAnalytics", function() { // Enregistrer ce “click”});$("a").unbind("click.jAnalytics"); // tous les “click”$("a").unbind(".jAnalytics"); // tous les événements
  58. 58. Événements • $.fn.bind • $.fn.trigger • $.fn.live + $.fn.die • $.fn.delegate + $.fn.undelegate • Namespaces
  59. 59. Animations Au-delà de « fadeOut »
  60. 60. Animations Base Animations faciles
  61. 61. $("#menu").slideUp();$("#menu").slideDown();$("#menu").slideToggle();$("#fantome").fadeIn();$("#fantome").fadeOut();$("#fantome").fadeToggle();
  62. 62. Animations $.fn.animate Animations pour « power-users »
  63. 63. $("#element").animate({ left: "-=200px", height: "toggle", width: "toggle"},{ duration: 1000, easing: "linear", complete: function() {}, step: function() {}, queue: false, specialEasing: { height: "easeIn", width: "easeOut" }});
  64. 64. Animations $.fn.queue Gérer la file d’attente
  65. 65. $("#element-1").animate({ fontSize: "14em" }).animate({ width: "+=200px" }).animate({ height: "+=200px" });$("#element-2").animate({ fontSize: "14em" }, { queue: false }).animate({ width: "+=200px" }).animate({ height: "+=200px" });
  66. 66. Animations $.fn.delay Animer avec un délai
  67. 67. $("#element").animate({ fontSize: "14em" }).delay(1000).animate({ width: "+=200px" }).delay(1000).animate({ height: "+=200px" });
  68. 68. Animations $.fn.delay Pas seulement pour les animations
  69. 69. $("#ajax-mais-tantot").delay(2000).queue(function() { $(this).load("/ajax_content.html")});
  70. 70. $("#element").bind("click", function() { $(this).delay(2000).queue(function() { $(this).css("background", "yellow"); });});
  71. 71. Animations $.fx.off Soyons gentils avec les plus lents
  72. 72. $.fx.off = true;
  73. 73. Animations • $.fn.animate • $.fn.queue • $.fn.delay • $.fx.off
  74. 74. SupportTester la compatibilité du navigateur
  75. 75. Support $.browser Vous devriez l’éviter
  76. 76. if ($.browser.webkit) { // Chose que seulement Webkit supporte (pour l’instant)} else if ($.browser.mozilla) { // Chose que seulement Gecko supporte (pour l’instant)} else if ($.browser.msie) { // Chose que seulement IE supporte (pour l’instant)}
  77. 77. Support Implémentation Pas réputation
  78. 78. if (typeof window.WebSocket != "undefined") { // Quelque chose de cool avec les sockets} else { // Quelque chose de cool en… AJAX?}
  79. 79. Support $.support Vous devriez le modifier
  80. 80. $.support.ajax$.support.boxModel$.support.hrefNormalized$.support.opacity
  81. 81. $.extend($.support, { webSockets : (function() { return typeof window.WebSocket != "undefined" }).call(), canvas : (function() { var canvas = document.createElement("canvas"); return !!(canvas.getContext && canvas.getContext("2d")); }).call()});
  82. 82. if ($.support.canvas) { // Quelque chose de cool avec <canvas>} else { // Quelque chose de cool… des images?}
  83. 83. Support Pas assez? Modernizr
  84. 84. Support • Modernizr.borderradius • Modernizr.geolocation • Modernizr.localstorage • Modernizr.draganddrop • Modernizr.addTest
  85. 85. Manipulations Modifier le DOM facilement
  86. 86. Manipulations Base Manipulations faciles
  87. 87. $(".article").append("<div class="share-this"></div>");$("<strong>!!!</strong>").insertAfter(".important");$("Attention! Spoiler").insertBefore(".spoiler");$(".no-javascript-message").remove();
  88. 88. Manipulations $("<foo />") Création de noeuds DOM jQuery
  89. 89. var ennemi = $("<div />", { "class": "ennemi", text: "|---0-0---|", data: { name: "Blinky" }, click: function() { alert($(this).data("name")+ " a été cliqué!"); }});ennemi.appendTo(".planche-de-jeu")ennemi.css("background", "cyan");
  90. 90. Manipulations $.fn.clone Cloner des noeuds
  91. 91. $(".dolly").clone().appendTo("#ferme");$(".dolly").clone(true).appendTo("#ferme");$(".dolly").clone(true, false).appendTo("#ferme");
  92. 92. Manipulations $.fn.detach Supprimer du DOM seulement
  93. 93. $("#lacet").bind("boucler", function() { alert("yay!") });var lacet = $("#lacet").detach();// #lacet n’est plus dans le DOMlacet.appendTo("#souliers");// #lacet est de retour dans le DOMlacet.trigger("boucler"); // yay!
  94. 94. ParsersAnalyseurs intégrés à jQuery
  95. 95. Parsers $.parseJSON Analyse de JSON
  96. 96. var data = { "name": "John Locke" };var person = $.parseJSON(data);person.name=> "John Locke"
  97. 97. Parsers $.parseXML Parcourir du XML comme du HTML
  98. 98. var data = "<personne><nom>John Locke</nom></personne>"; data += "<personne><nom>James Ford</nom></personne>";var personnages = $($.parseXML(data));personnages.find("personne").map(function() { return $(this).find("nom").text().split(" ")[0];});=> ["John", "James"]
  99. 99. DataStocker des données
  100. 100. Data $.fn.dataDes données dans des objets jQuery
  101. 101. $(".unstoppable-button").data("count", 0);$(".unstoppable-button).bind("click", function() { $(this).data("count", $(this).data("count") + 1);});
  102. 102. // Afficher le “count” du bouton$(".report-button").bind("click", function() { var count = $(".unstoppable-button").data("count"); alert("The other button has been clicked "+count+" times");});// Remettre le "count" à zéro$(".reset-button").bind("click", function() { $(".unstoppable-button").data("count", 0);});// Supression de toutes les méta-données du bouton$(".unstoppable-button").removeData();
  103. 103. Data Événements de données
  104. 104. // Modification du "get"$(".unstoppable-button").bind("getData", function(event, key) { if (key == "count") { return jQuery.data(this, key) * 2; }});$(".unstoppable-button").data("count", 10);$(".unstoppable-button").data("count");=> 20
  105. 105. $("#slideshow").data("position", 0).bind({ "forward" : function() { $(this).data("position", $(this).data("position") + 1); }, "backward" : function() { $(this).data("position", $(this).data("position") - 1); }, "changeData", function(event, key, value) { if (key != "position") { return true; } if (value >= $(this).children().length) { jQuery.data(this, "position", 0); } else if (value == -1) { jQuery.data(this, "position", $(this).children().length - 1); } }});$("#slideshow").trigger("forward"); // position=1$("#slideshow").trigger("forward"); // position=2$("#slideshow").trigger("forward"); // position=0$("#slideshow").trigger("backward"); // position=2
  106. 106. Data HTML5 data Stocker de façon sémantique
  107. 107. Data Avant Des données dans les attributs HTML
  108. 108. <!-- HTML --><li rel="5" class="story"><a href="#">Show</a></li>// Javascript$("li.story a").click(function() { var id = $(this).parent().attr("rel"); $("#content").load("/stories/"+id);});
  109. 109. <!-- HTML --><li rel="5|remi" class="story"><a href="#">Show</a></li>// Javascript$("li.story a").click(function() { var data = $(this).parent().attr("rel").split("|"); var id = data[0]; var user = data[1]; $("#content").load("/"+user+"/stories/"+id);});
  110. 110. Data Après Le plugin $.metadata
  111. 111. <!-- HTML --><li class="story {id:5}"><a href="#">Show</a></li>// Javascript$("li.story a").click(function() { var data = $(this).parent().metadata(); $("#content").load("/stories/"+data.id);});
  112. 112. <!-- HTML --><li class="story {id:5,user:remi,category:6}"><ahref="#">Show</a></li>// Javascript$("li.story a").click(function() { var data = $(this).parent().metadata(); $("#content").load("/"+data.user+"/stories/"+data.id);});
  113. 113. Data Maintenant Les attributs « data » de HTML5
  114. 114. <!-- HTML --><li data-id="5" class="story"><a href="#">Show</a></li>// Javascript$("li.story a").click(function() { var id = $(this).parent().data("id"); $("#content").load("/stories/"+id);});
  115. 115. <!-- HTML --><div data-remote="foo" class="block-1"></div><div data-remote="true" class="block-2"></div>// Javascript$("div.block-1").data("remote");=> "foo"$("div.block-2").data("remote");=> true
  116. 116. Data • $.fn.data • Événements « getData » + « setData » • $.fn.attr • $.metadata • $.fn.data + HTML5
  117. 117. DeferredGestion facile de callbacks
  118. 118. Deferred $.Deferred Résolution, rejet et attente
  119. 119. var request = $.Deferred();request.done(function() { alert("succes!"); });request.fail(function() { alert("erreur!"); });request.resolve();=> "succes!"// OUrequest.reject();=> "erreur!"
  120. 120. DeferredDeferred AJAX Exemple classique
  121. 121. var request = $.get("/feed")request.done(function(data) { console.log(data.user.name);});request.fail(function(error) { console.log(error.message);});
  122. 122. var request = $.get("/feed")request.done(function(data) { console.log(data.user.name);});request.fail(function(error) { console.log(error.message);});
  123. 123. var request = $.get("/feed")request.done(function(data) { console.log(data.user.name);});request.fail(function(error) { console.log(error.message);});
  124. 124. Deferred $.fn.then Déclarer des callbacks
  125. 125. var request = $.get("/feed");request.then( function() { alert("done!"); }, function() { alert("failed!"); });
  126. 126. Deferred $.fn.when Gérer des deferred multiples
  127. 127. var request = $.get("/feed")$.when(request).then( function() { alert("done!") }, function() { alert("failed!") });
  128. 128. var request1 = $.get("/feed")var request2 = $.get("/users")$.when(request1, request2).then( function() { alert("everything has succeed!") }, function() { alert("something has failed.") });
  129. 129. Deferred Possibilités Un wrapper d’API
  130. 130. // Exemple par Michael Bleigh (intridea.com)Twitter = { search: function(query) { var dfr = $.Deferred(); $.ajax({ url: "http://search.twitter.com/search.json", data: { q: query }, dataType: "jsonp", success: dfr.resolve }); return dfr.promise(); }}Twitter.search("#confoo").done(function(data) { alert(data.results[0].text);});
  131. 131. Deferred • $.Deferred • $.fn.resolve • $.fn.reject • $.fn.then • $.fn.when
  132. 132. BrefFonctionnalités avancées
  133. 133. Ressources • api.jquery.com • james.padolsey.com • jaubourg.net • ejohn.org/apps/workshop/adv-talk
  134. 134. Questions? Commentaires? @remi

×