jQueryfonctionnalités avancées    Rémi Prévost — ConFoo 2011
Rémi Prévost Développeur Web@remi + http://remiprevost.com
Butde cette présentation
But              Pas      un tutoriel/pitch jQuery
But              Survol      des fonctionnalités moins connues
But         Sa force      Courbe d’apprentissage facile
$(".surprise").click(function() {	 $(this).fadeOut("slow");});
But         Ensuite?      Beaucoup plus de possibilités
But      2006          2011      1.0 → 1.5        45 Ko → 208 Ko
But •    Utilitaires •    Événements •    Animations •    Manipulations •    Parsers •    Data •    Deferreds
UtilitairesPour sauver du temps
Utilitaires  Implémentations      natives
Utilitaires                   $     Ne touchent pas aux objets natifs
Utilitaires              $.mapModifie chaque élément d’un tableau
var noms = ["jack", "kate", "john", "james", "claire"]$.map(noms, function(nom) { return nom.toUpperCase(); });=> ["JACK",...
$(".user-name").map(function() { return $(this).text(); } );=> ["@remi", "@garno", "@jmlacroix", "@vincentroyc"]
Utilitaires              $.grep              Filtre un tableau
var    personnes = [   {   nom: "Jack Sheppard", evil: false },   {   nom: "Benjamin Linus", evil: true },   {   nom: "Kat...
Utilitaires              $.inArray          Vérifie la présence d’éléments
var numeros = [4, 8, 15, 16, 23, 42];$.inArray(numeros, 16);=> 3$.inArray(numeros, 64);=> -1
Utilitaires              $.merge              Fusionne deux tableaux
var tailies = ["libby", "bernard", "eko"];var middlies = ["jack", "charlie", "eko"];$.merge(tailies, middlies);=> ["libby"...
Utilitaires              $.extend              Fusionne deux objets
function push_button(options) {	 options = $.extend({     delay: 108,     input: [4, 8, 15, 16, 23, 42]   }, options);	 re...
$.extend($.easing, {	 customEasing : function(p, n, firstNum, diff) {	 	 return firstNum - diff / p;	 }});
Utilitaires •   $.map •   $.grep •   $.inArray •   $.merge •   $.extend
Utilitaires              Pas assez?                Underscore.js
Utilitaires •   _.reduce •   _.uniq •   _.keys •   _.values •   _.times
Événements  Lier et déclencher
Événements                Base             Événements faciles
$(".element").click(function() {});$(".element").dblclick(function() {})$(".element").mouseover(function() {});$(".element...
$(".element").bind("click", function() {});$(".element").bind("dblclick", function() {})$(".element").bind("mouseover", fu...
$(".element").bind({  click: function() {},  dblclick: function() {},  mouseover: function() {},  mouseleave: function() {...
Événements             ArbitrairesDéclencher n’importe quoi (vraiment)
$.fn.bind("anything", function() {	 // this});$.fn.trigger("anything");
$("#element").bind("anything", function() {	 // this});$("#element").trigger("anything");
Événements             Méthodes              événementielles
$("#vote-count").bind("increase", function() {  $(this).text(parseInt($(this).text) + 1);});$("#upvote-button").bind("clic...
function increase_vote_count() {  var elem = $("#vote_count");  elem.text(parseInt(elem.text()) + 1);}$("#upvote-button")....
function VoteCount(selecteur) {  this.element = $(selecteur);  this.increase = function() {    this.element.text(parseInt(...
Événements             Arguments        Encore plus personnalisables
$(".tweets").bind("add-tweet", function(event, tweet) {   $(this).append("<li>"+tweet.text+" — @"+tweet.user+"</li>");})$(...
Événements                 Tout        peut être lié à un événement
var Island = { is_magic: true };$(Island).bind("move", function() {	 alert(this.is_magic); // true});$(Island).trigger("mo...
Événements             $.fn.live        Pour les éléments inexistants
$("#tweets a.user").live("click", function() {	 // Faire quelque chose});$(document).bind("click", function(event) {	 if (...
$(".user").live("click", function() {	 // Faire quelque chose});$(document).bind("click", function(event) {	 if ($(event.t...
Événements      $.fn.delegate        Plus performant que $.fn.live
$("#tweets").delegate("a.user", "click", function() {	 // Faire quelque chose});$("#tweets").bind("click", function(event)...
Événements               $.fn.die             Le contraire de « live »
$("#tweets a.user").bind("click", function() {  // Quelque chose});$("#tweets *").unbind("click");
$("#tweets a.user").live("click", function() {	 // Faire quelque chose});$("a.user").die("click"); // ne fonctionnera pas$...
Événements $.fn.undelegate   Le contraire de « delegate » (duh)
$("#tweets").delegate("a.user", "click", function() {	 // Faire quelque chose});$("#tweets").undelegate("a", "click"); // ...
Événements        Namespaces             Pour éviter la confusion
// contenu de application.js$("#contenu a.user").bind("click", function() {	 // Faire quelque chose avec un utilisateur…})...
// contenu de janalytics.js$("a").bind("click.jAnalytics", function() {	 // Enregistrer ce “click”});$("a").unbind("click....
Événements •   $.fn.bind •   $.fn.trigger •   $.fn.live + $.fn.die •   $.fn.delegate + $.fn.undelegate •   Namespaces
Animations Au-delà de « fadeOut »
Animations               Base             Animations faciles
$("#menu").slideUp();$("#menu").slideDown();$("#menu").slideToggle();$("#fantome").fadeIn();$("#fantome").fadeOut();$("#fa...
Animations    $.fn.animate     Animations pour « power-users »
$("#element").animate({	 left: "-=200px",	 height: "toggle",	 width: "toggle"},{	 duration: 1000,	 easing: "linear",	 comp...
Animations         $.fn.queue             Gérer la file d’attente
$("#element-1").animate({ fontSize: "14em" }).animate({ width: "+=200px" }).animate({ height: "+=200px" });$("#element-2")...
Animations             $.fn.delay              Animer avec un délai
$("#element").animate({ fontSize: "14em" }).delay(1000).animate({ width: "+=200px" }).delay(1000).animate({ height: "+=200...
Animations             $.fn.delay   Pas seulement pour les animations
$("#ajax-mais-tantot").delay(2000).queue(function() {	 $(this).load("/ajax_content.html")});
$("#element").bind("click", function() {  $(this).delay(2000).queue(function() {    $(this).css("background", "yellow");  ...
Animations             $.fx.off    Soyons gentils avec les plus lents
$.fx.off = true;
Animations •   $.fn.animate •   $.fn.queue •   $.fn.delay •   $.fx.off
SupportTester la compatibilité du navigateur
Support          $.browser           Vous devriez l’éviter
if ($.browser.webkit) {	 // Chose que seulement Webkit supporte (pour l’instant)} else if ($.browser.mozilla) {	 // Chose ...
Support     Implémentation          Pas réputation
if (typeof window.WebSocket != "undefined") {	 // Quelque chose de cool avec les sockets} else {	 // Quelque chose de cool...
Support          $.support          Vous devriez le modifier
$.support.ajax$.support.boxModel$.support.hrefNormalized$.support.opacity
$.extend($.support, {  webSockets : (function() {    return typeof window.WebSocket != "undefined"  }).call(),  canvas : (...
if ($.support.canvas) {	 // Quelque chose de cool avec <canvas>} else {	 // Quelque chose de cool… des images?}
Support          Pas assez?             Modernizr
Support •   Modernizr.borderradius •   Modernizr.geolocation •   Modernizr.localstorage •   Modernizr.draganddrop •   Mode...
Manipulations Modifier le DOM facilement
Manipulations                    Base                Manipulations faciles
$(".article").append("<div class="share-this"></div>");$("<strong>!!!</strong>").insertAfter(".important");$("Attention! S...
Manipulations    $("<foo />")    Création de noeuds DOM jQuery
var ennemi = $("<div />", {	 "class": "ennemi",	 text: "|---0-0---|",	 data: { name: "Blinky" },	 click: function() {	 	 a...
Manipulations            $.fn.clone                Cloner des noeuds
$(".dolly").clone().appendTo("#ferme");$(".dolly").clone(true).appendTo("#ferme");$(".dolly").clone(true, false).appendTo(...
Manipulations       $.fn.detach       Supprimer du DOM seulement
$("#lacet").bind("boucler", function() { alert("yay!") });var lacet = $("#lacet").detach();// #lacet n’est plus dans le DO...
ParsersAnalyseurs intégrés à jQuery
Parsers  $.parseJSON          Analyse de JSON
var data = { "name": "John Locke" };var person = $.parseJSON(data);person.name=> "John Locke"
Parsers     $.parseXML  Parcourir du XML comme du HTML
var data = "<personne><nom>John Locke</nom></personne>";    data += "<personne><nom>James Ford</nom></personne>";var perso...
DataStocker des données
Data       $.fn.dataDes données dans des objets jQuery
$(".unstoppable-button").data("count", 0);$(".unstoppable-button).bind("click", function() {  $(this).data("count", $(this...
// Afficher le “count” du bouton$(".report-button").bind("click", function() {  var count = $(".unstoppable-button").data(...
Data       Événements          de données
// Modification du "get"$(".unstoppable-button").bind("getData", function(event, key) {  if (key == "count") {    return j...
$("#slideshow").data("position", 0).bind({  "forward" : function() {     $(this).data("position", $(this).data("position")...
Data       HTML5 data       Stocker de façon sémantique
Data           Avant  Des données dans les attributs HTML
<!-- HTML --><li rel="5" class="story"><a href="#">Show</a></li>// Javascript$("li.story a").click(function() {  var id = ...
<!-- HTML --><li rel="5|remi" class="story"><a href="#">Show</a></li>// Javascript$("li.story a").click(function() {  var ...
Data         Après       Le plugin $.metadata
<!-- HTML --><li class="story {id:5}"><a href="#">Show</a></li>// Javascript$("li.story a").click(function() {  var data =...
<!-- HTML --><li class="story {id:5,user:remi,category:6}"><ahref="#">Show</a></li>// Javascript$("li.story a").click(func...
Data       Maintenant       Les attributs « data » de HTML5
<!-- HTML --><li data-id="5" class="story"><a href="#">Show</a></li>// Javascript$("li.story a").click(function() {  var i...
<!-- HTML --><div data-remote="foo" class="block-1"></div><div data-remote="true" class="block-2"></div>// Javascript$("di...
Data •   $.fn.data •   Événements « getData » + « setData » •   $.fn.attr •   $.metadata •   $.fn.data + HTML5
DeferredGestion facile de callbacks
Deferred           $.Deferred           Résolution, rejet et attente
var request = $.Deferred();request.done(function() { alert("succes!"); });request.fail(function() { alert("erreur!"); });r...
DeferredDeferred AJAX           Exemple classique
var request = $.get("/feed")request.done(function(data) {	 console.log(data.user.name);});request.fail(function(error) {	 ...
var request = $.get("/feed")request.done(function(data) {	 console.log(data.user.name);});request.fail(function(error) {	 ...
var request = $.get("/feed")request.done(function(data) {	 console.log(data.user.name);});request.fail(function(error) {	 ...
Deferred           $.fn.then           Déclarer des callbacks
var request = $.get("/feed");request.then(	 function() { alert("done!"); },	 function() { alert("failed!"); });
Deferred             $.fn.when           Gérer des deferred multiples
var request = $.get("/feed")$.when(request).then(   function() { alert("done!") },   function() { alert("failed!") });
var request1 = $.get("/feed")var request2 = $.get("/users")$.when(request1, request2).then(	 function() { alert("everythin...
Deferred           Possibilités            Un wrapper d’API
// Exemple par Michael Bleigh (intridea.com)Twitter = {  search: function(query) {    var dfr = $.Deferred();    $.ajax({ ...
Deferred •   $.Deferred •   $.fn.resolve •   $.fn.reject •   $.fn.then •   $.fn.when
BrefFonctionnalités avancées
Ressources •   api.jquery.com •   james.padolsey.com •   jaubourg.net •   ejohn.org/apps/workshop/adv-talk
Questions? Commentaires?     @remi
Prochain SlideShare
Chargement dans…5
×

jQuery — fonctionnalités avancées

6 965 vues

Publié le

Publié dans : Technologie
  • 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.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

×