jQuery deffered objects

618 views
466 views

Published on

Keynote de Damien Bruyndonckx, présenté le 19 juin 2014 à la Feweb

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
618
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery deffered objects

  1. 1. 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
  2. 2. Damien Bruyndonckx • Coordinateur eLearning à l’Ihecs • Adobe Education Leader • Adobe Certified Instructor 2 • Author for Packt Publishing • Freelance instructor and consultant • Sound Engineer
  3. 3. Titre de cette présentation Une 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
  4. 4. 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!
  5. 5. jQuery Deferreds 5
  6. 6. Agenda •Comprendre les jQuery Deferreds •Exemple simple •les deferreds dans le reste de la bibliothèque 6
  7. 7. 1 thing you might not know about jQuery… and the many things it allows you to do! 19 Juin 2014 Comprendre les deferrds
  8. 8. Au restaurant 1. 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
  9. 9. Traduction Deferreds 1. 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
  10. 10. 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
  11. 11. 1 thing you might not know about jQuery… and the many things it allows you to do! 19 Juin 2014 Exemple simple
  12. 12. API - Création d’un deferred var deferred = $.Deferred()! return deferred.promise() 12 Par défaut, les Deferreds ainsi créés ont un statut “pending”
  13. 13. API - Résoudre, rejeter, notifier deferred.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”
  14. 14. 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(…)
  15. 15. Demo 1 •Timers revisités •Renvoyer des données 15
  16. 16. API - grouper les promesses when(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”
  17. 17. Demo 2 •Grouper les promesses avec when() •Utilisation de then() 17
  18. 18. 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
  19. 19. 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
  20. 20. Demo 3 •Réécrire Ajax à la façon Deferreds •Grouper les requêtes Ajax avec When() 20
  21. 21. 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
  22. 22. Animations Chaque 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
  23. 23. Animations Possibilité 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})
  24. 24. 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
  25. 25. Démo 4 •Fonction de rappel sur les animations façon Deferreds •Grouper les animations avec when() 25
  26. 26. MErci Damien Bruyndonckx 26 @damienbkx www.dbr-taining.eu damien.bruyndonckx@gmail.com

×