Contenu connexe Similaire à jQuery — fonctionnalités avancées Similaire à jQuery — fonctionnalités avancées (20) jQuery — fonctionnalités avancées4. But
Pas
un tutoriel/pitch jQuery
5. But
Survol
des fonctionnalités moins connues
6. But
Sa force
Courbe d’apprentissage facile
8. But
Ensuite?
Beaucoup plus de possibilités
9. But
2006 2011
1.0 → 1.5
45 Ko → 208 Ko
10. But
• Utilitaires
• Événements
• Animations
• Manipulations
• Parsers
• Data
• Deferreds
14. Utilitaires
$.map
Modifie chaque élément d’un tableau
15. var noms = ["jack", "kate", "john", "james", "claire"]
$.map(noms, function(nom) { return nom.toUpperCase(); });
=> ["JACK", "KATE", "JOHN", "JAMES", "CLAIRE"]
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. Utilitaires
$.inArray
Vérifie la présence d’éléments
20. var numeros = [4, 8, 15, 16, 23, 42];
$.inArray(numeros, 16);
=> 3
$.inArray(numeros, 64);
=> -1
22. var tailies = ["libby", "bernard", "eko"];
var middlies = ["jack", "charlie", "eko"];
$.merge(tailies, middlies);
=> ["libby", "bernard", "eko", "jack", "charlie", "eko"]
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."
26. Utilitaires
• $.map
• $.grep
• $.inArray
• $.merge
• $.extend
28. Utilitaires
• _.reduce
• _.uniq
• _.keys
• _.values
• _.times
34. Événements
Arbitraires
Déclencher n’importe quoi (vraiment)
39. function increase_vote_count() {
var elem = $("#vote_count");
elem.text(parseInt(elem.text()) + 1);
}
$("#upvote-button").bind("click", increase_vote_count);
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. Événements
Arguments
Encore plus personnalisables
44. var Island = { is_magic: true };
$(Island).bind("move", function() {
alert(this.is_magic); // true
});
$(Island).trigger("move");
45. Événements
$.fn.live
Pour les éléments inexistants
48. Événements
$.fn.delegate
Plus performant que $.fn.live
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. Événements
Namespaces
Pour éviter la confusion
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. // 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. Événements
• $.fn.bind
• $.fn.trigger
• $.fn.live + $.fn.die
• $.fn.delegate + $.fn.undelegate
• Namespaces
62. Animations
$.fn.animate
Animations pour « power-users »
63. $("#element").animate({
left: "-=200px",
height: "toggle",
width: "toggle"
},{
duration: 1000,
easing: "linear",
complete: function() {},
step: function() {},
queue: false,
specialEasing: {
height: "easeIn",
width: "easeOut"
}
});
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" });
68. Animations
$.fn.delay
Pas seulement pour les animations
71. Animations
$.fx.off
Soyons gentils avec les plus lents
73. Animations
• $.fn.animate
• $.fn.queue
• $.fn.delay
• $.fx.off
75. Support
$.browser
Vous devriez l’éviter
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. Support
Implémentation
Pas réputation
78. if (typeof window.WebSocket != "undefined") {
// Quelque chose de cool avec les sockets
} else {
// Quelque chose de cool en… AJAX?
}
79. Support
$.support
Vous devriez le modifier
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. if ($.support.canvas) {
// Quelque chose de cool avec <canvas>
} else {
// Quelque chose de cool… des images?
}
84. Support
• Modernizr.borderradius
• Modernizr.geolocation
• Modernizr.localstorage
• Modernizr.draganddrop
• Modernizr.addTest
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");
93. $("#lacet").bind("boucler", function() { alert("yay!") });
var lacet = $("#lacet").detach();
// #lacet n’est plus dans le DOM
lacet.appendTo("#souliers");
// #lacet est de retour dans le DOM
lacet.trigger("boucler"); // yay!
96. var data = '{ "name": "John Locke" }';
var person = $.parseJSON(data);
person.name
=> "John Locke"
97. Parsers
$.parseXML
Parcourir du XML comme du HTML
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"]
100. Data
$.fn.data
Des données dans des objets jQuery
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. Data
Événements
de données
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. $("#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. Data
HTML5 data
Stocker de façon sémantique
107. Data
Avant
Des données dans les attributs HTML
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. <!-- 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. Data
Après
Le plugin $.metadata
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. <!-- HTML -->
<li class="story {id:5,user:'remi',category:6}"><a
href="#">Show</a></li>
// Javascript
$("li.story a").click(function() {
var data = $(this).parent().metadata();
$("#content").load("/"+data.user+"/stories/"+data.id);
});
113. Data
Maintenant
Les attributs « data » de HTML5
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. <!-- 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. Data
• $.fn.data
• Événements « getData » + « setData »
• $.fn.attr
• $.metadata
• $.fn.data + HTML5
118. Deferred
$.Deferred
Résolution, rejet et attente
119. var request = $.Deferred();
request.done(function() { alert("succes!"); });
request.fail(function() { alert("erreur!"); });
request.resolve();
=> "succes!"
// OU
request.reject();
=> "erreur!"
121. var request = $.get("/feed")
request.done(function(data) {
console.log(data.user.name);
});
request.fail(function(error) {
console.log(error.message);
});
122. var request = $.get("/feed")
request.done(function(data) {
console.log(data.user.name);
});
request.fail(function(error) {
console.log(error.message);
});
123. var request = $.get("/feed")
request.done(function(data) {
console.log(data.user.name);
});
request.fail(function(error) {
console.log(error.message);
});
124. Deferred
$.fn.then
Déclarer des callbacks
125. var request = $.get("/feed");
request.then(
function() { alert("done!"); },
function() { alert("failed!"); }
);
126. Deferred
$.fn.when
Gérer des deferred multiples
127. var request = $.get("/feed")
$.when(request)
.then(
function() { alert("done!") },
function() { alert("failed!") }
);
128. var request1 = $.get("/feed")
var request2 = $.get("/users")
$.when(request1, request2)
.then(
function() { alert("everything has succeed!") },
function() { alert("something has failed.") }
);
129. Deferred
Possibilités
Un wrapper d’API
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. Deferred
• $.Deferred
• $.fn.resolve
• $.fn.reject
• $.fn.then
• $.fn.when
133. Ressources
• api.jquery.com
• james.padolsey.com
• jaubourg.net
• ejohn.org/apps/workshop/adv-talk