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

damien.bruyndonckx@gmail.com