jQuery deffered objects
-
Upload
la-feweb -
Category
Technology
-
view
300 -
download
0
description
Transcript of jQuery deffered objects
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
Damien Bruyndonckx• Coordinateur eLearning à l’Ihecs
• Adobe Education Leader
• Adobe Certified Instructor
2
• Author for Packt Publishing
• Freelance instructor and consultant
• Sound Engineer
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
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!
jQuery Deferreds
5
Agenda• Comprendre les jQuery Deferreds
• Exemple simple
• les deferreds dans le reste de la bibliothèque
6
1 thing you might not know about jQuery… and the many things it allows you to do!
19 Juin 2014
Comprendre les deferrds
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
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
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
1 thing you might not know about jQuery… and the many things it allows you to do!
19 Juin 2014
Exemple simple
API - Création d’un deferredvar deferred = $.Deferred()!return deferred.promise()
12
Par défaut, les Deferreds ainsi créés ont un statut “pending”
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”
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(…)
Demo 1• Timers revisités
• Renvoyer des données
15
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”
Demo 2• Grouper les promesses avec when()
• Utilisation de then()
17
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
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
Demo 3• Réécrire Ajax à la façon Deferreds
• Grouper les requêtes Ajax avec When()
20
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
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
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})
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
Démo 4• Fonction de rappel sur les animations
façon Deferreds
• Grouper les animations avec when()
25
MErciDamien Bruyndonckx
26
@damienbkx
www.dbr-taining.eu