jQuery deffered objects
-
Upload
la-feweb -
Category
Technology
-
view
301 -
download
0
description
Transcript of jQuery deffered objects
![Page 1: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/1.jpg)
D a m i e n B r u y n d o n c k x
19 Juin 2014
5 things you might not know about
jQuery
![Page 2: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/2.jpg)
Damien Bruyndonckx• Coordinateur eLearning à l’Ihecs
• Adobe Education Leader
• Adobe Certified Instructor
2
• Author for Packt Publishing
• Freelance instructor and consultant
• Sound Engineer
![Page 3: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/3.jpg)
Titre de cette présentationUne fonctionnalité de jQuery méconnue
• Elle ouvre la porte à des fonctions avancées.
• Elle permet de comprendre le fonctionnement de nombreuses autres fonctionnalités.
3
![Page 4: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/4.jpg)
D a m i e n B r u y n d o n c k x
19 Juin 2014
1 thing you might not know about jQuery…
…and the many things it allows you to do!
![Page 5: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/5.jpg)
jQuery Deferreds
5
![Page 6: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/6.jpg)
Agenda• Comprendre les jQuery Deferreds
• Exemple simple
• les deferreds dans le reste de la bibliothèque
6
![Page 7: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/7.jpg)
1 thing you might not know about jQuery… and the many things it allows you to do!
19 Juin 2014
Comprendre les deferrds
![Page 8: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/8.jpg)
Au restaurant1. Plus de place au resto!
2. Le serveur vous encode
3. Le serveur vous donne un récepteur
4. Vous allez vous promener
5. Quand une table est prête, le serveur envoie un signal au récepteur
6. Le récepteur vibre… retournez au restaurant!
8
![Page 9: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/9.jpg)
Traduction Deferreds1. Plus de place au resto!
2. Le serveur crée un Deferred
3. Le serveur vous retourne une promesse
4. D’autres actions ont lieu
5. Quand une table est prête, le serveur résout la promesse
6. Le récepteur vibre… exécutez des actions en réponse à la résolution de la promesse
9
![Page 10: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/10.jpg)
Caractéristiques d’un deferred
• Toujours lié à une promesse.
• Représente une transaction dont on ne connaît ni le résultat ni la durée.
• C’est celui crée le Deferred qui peut résoudre ou rejeter la promesse.
• Le détenteur de la promesse exécute une (des) action(s) en réaction au changement de statut de la promesse.
10
![Page 11: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/11.jpg)
1 thing you might not know about jQuery… and the many things it allows you to do!
19 Juin 2014
Exemple simple
![Page 12: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/12.jpg)
API - Création d’un deferredvar deferred = $.Deferred()!return deferred.promise()
12
Par défaut, les Deferreds ainsi créés ont un statut “pending”
![Page 13: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/13.jpg)
API - Résoudre, rejeter, notifierdeferred.resolve()!deferred.reject()!deferred.notify()
13
.done()!
.fail()!
.progress()!
.always()!
.then()
Permet de faire évoluer le statut du deferred
• pending -> resolved
• pending -> rejected
Une fois résolu ou rejeté, un deferred ne peut plus redevenir “pending”
![Page 14: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/14.jpg)
API - Callbacks multiples
Les fonctions de rappel sont exécutées dans l’ordre où elles ont été attachées.
14
something()!! .done(…).done(…)!! .fail(…).fail(…)
![Page 15: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/15.jpg)
Demo 1• Timers revisités
• Renvoyer des données
15
![Page 16: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/16.jpg)
API - grouper les promesseswhen(deferred1, deferred2, .., deferredn).done().fail().always()
16
.done() = appelé si tous les Deferreds sont “resolved”
.fail() = appelé si un des Deferreds est “rejected”
.always() = appelé quand plus aucun Deferred n’est “pending”
![Page 17: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/17.jpg)
Demo 2• Grouper les promesses avec when()
• Utilisation de then()
17
![Page 18: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/18.jpg)
1 thing you might not know about jQuery… and the many things it allows you to do!
19 Juin 2014
Les deferreds dans la bibliothèque -
AJAX
![Page 19: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/19.jpg)
AJAX• Depuis jQuery 1.5 AJAX utilise les
Deferreds et les promesses
• Ancienne API toujours valable
• Toutes les fonctionnalités des Deferreds disponibles dans Ajax
19
![Page 20: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/20.jpg)
Demo 3• Réécrire Ajax à la façon Deferreds
• Grouper les requêtes Ajax avec When()
20
![Page 21: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/21.jpg)
1 thing you might not know about jQuery… and the many things it allows you to do!
19 Juin 2014
Les deferreds dans la bibliothèque -
Animations
![Page 22: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/22.jpg)
AnimationsChaque objet jQuery est un Deferred et implémente les promesses!!
22
$(‘div’).promise()
• La promesse est résolue quand toutes les animations sur l’(les)objet(s) sélectionné(s) sont terminées
![Page 23: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/23.jpg)
AnimationsPossibilité d’écrire des callbacks façon Deferreds sur les éléments animés!
23
$(‘div’).fadeIn(200, function(){doSomething})
est équivalent à $(‘div’).fadeIn(200).promise().done(function(){doSomething})
![Page 24: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/24.jpg)
Animations• Possibilité de grouper des animations
avec when()
➡possibilité de réagir à l’issue d’un groupe d’animations.
• Possibilité de grouper des animations avec when()
24
![Page 25: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/25.jpg)
Démo 4• Fonction de rappel sur les animations
façon Deferreds
• Grouper les animations avec when()
25
![Page 26: jQuery deffered objects](https://reader033.fdocuments.net/reader033/viewer/2022060111/55629f64d8b42a802b8b48fa/html5/thumbnails/26.jpg)
MErciDamien Bruyndonckx
26
@damienbkx
www.dbr-taining.eu