IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

jQuery 1.7 disponible en version finale
Unification de l'API évènements et amélioration des performances et des animations

Le , par danielhagnoul

447PARTAGES

7  1 
Mise à jour du 4 novembre 2011 par Idelways

La version 1.7 finale du framework JavaScript jQuery sort aujourd'hui et unifie les différentes manières d'attacher et de détacher des évènements aux éléments du DOM.

Cette version améliore aussi les performances des évènements délégués (delegate) jusqu'à réduire de moitié le temps nécessaire à leur traitement en comparaison avec la version 1.6.4. La refactorisation qui a abouti à cette optimisation avait été basée sur l'analyse des usages qu'en font les développeurs sur les projets open source via Google Search Code (bientôt fermé).



jQuery 1.7 intègre le support des nouvelles balises de l'HTML5 pour les versions d'Internet Explorer antérieures à la 9. Les balises <acticle>, <sections>, etc. peuvent être insérés avec .html() (ou équivalents) sans disparaître sur Explorer, mais l'initiation des balises présente dans le code original de la page reste nécessaire, manuellement ou à l'aide de bibliothèques tierces comme html5shiv ou Modernizr.

Il n'est plus nécessaire d'enregistrer les valeurs initiales des éléments avant de les animer, jQuery s'occupe désormais de les enregistrer pour un retour cohérent au point de départ en cas d'appel à .stop() en cours de route.

Bien qu'elle ne devienne pas un chargeur de script à part entière, jQuery supporte l'API AMD (Asynchronous Module Definition), un mécanisme pour la définition de modules qui se chargent et chargent leurs dépendances de façon asynchrone.

L'utilisation des nouvelles méthodes de l'API : .on() et .off() sont recommandés, mais les .(un)bind, .(un)delegate et live(), die() resteront sur place pour un bon bout de temps pour des raisons évidentes de rétrocompatibilité.

Si un sélecteur est fourni en deuxième argument d'un appel à .on(), jQuery comprendra que c'est une évènement délégué qu'il convient d'attacher. Autrement, il s'agit d'un .bind() classique, auquel cas, faire attention à fournir un sélecteur nul si le troisième argument data est une chaîne de caractère.

Pour plus de détails sur la nouvelle gestion des évènements, lire ci-devant.

Télécharger jQuery 1.7 (minifié)

Source : Site officiel

jQuery 1.7 Beta 1 est disponible
Nouveaux gestionnaires d'événements et plus de 50 corrections de bogues

Au fil des versions, jQuery a développé trois manières d'attacher des événements aux éléments du DOM : bind(), live() et delegate().

Lorsque plusieurs méthodes sont utilisées dans la même page web, il a été constaté des interactions surprenantes. Par exemple : $(document).unbind("click" retire tous les événements .live("click", ...). C'est pourquoi il est toujours recommandé d'utiliser les événements nommés (events namespaces).

La version 1.7, qui sort aujourd'hui en bêta, introduit une nouvelle méthode qui corrige les incohérences des trois précédentes.

Mais pour des raisons de rétrocompatibilité, les anciennes méthodes resteront encore longtemps disponibles.

Code : Sélectionner tout
1
2
3
$(elems).on(events, selector, data, fn);

$(elems).off(events, selector, fn);
Si l'attribut selector est présent, c'est un événement délégué (ex delegate()), sinon c'est un événement normal. Toutes les fonctionnalités des anciennes versions sont présentes.

Un tableau qui résume les changements.

Old API	                                      New API
$(elems).bind(events, fn)	                    $(elems).on(events, fn)
$(elems).bind(events, { mydata: 42 }, fn)    $(elems).on(events, { mydata: 42 }, fn)
$(elems).unbind(events, fn)	                    $(elems).off(events, fn)
$(elems).delegate(events, selector, fn)	    $(elems).on(events, selector, fn)
$(elems).undelegate(events, selector, fn)    $(elems).off(events, selector, fn)
$(selector).live(events, fn)	                    $(document).on(events, selector, fn)
$(selector).die(events, fn)	                    $(document).off(events, selector, fn)
Amélioration des animations

Avant la version 1.7, lorsque vous arrêtiez une animation avant son terme l'élément animé pouvait ne jamais revenir à la taille souhaitée.
Pour corriger ce défaut, la fonction animate enregistre maintenant les dimensions d'origine de l'élément animé.

Divers

La méthode removeData() accepte maintenant une chaîne (string) de noms séparés par un espace ou un tableau de noms.

La méthode removeAttr() peut supprimer plusieurs attributs.

Les éléments HTML5 ajouter dynamiquement (append() et autres méthodes) au DOM sont pris en compte.

Le traitement des événements change et submit des formulaires IE 6/7/8 a été amélioré.

La liste complète des modifications

Pour utiliser cette version, il suffit d'inclure un appel au serveur de code jQuery dans votre page web : <script charset="utf-8" src="http://code.jquery.com/jquery-1.7b1.js"></script>.

Voir : Comment installer la bibliothèque jQuery ?

Source

Une erreur dans cette actualité ? Signalez-nous-la !

Avatar de danielhagnoul
Rédacteur https://www.developpez.com
Le 04/11/2011 à 21:51
Bonsoir

Quelques informations complémentaires sur la version 1.7

jQuery.Callbacks() gère une file d'attende de fonction de rappel (callback).

Cet objet est également utilisé en interne par jQuery pour mettre en place les files d'attendes succès (done), échec (faill) et toujours (always) des objets différés (deferred).

---

jQuery.Deferred(), ajout et modification de méthodes

FAQ jQuery : Comment puis-je utiliser l'objet jQuery.Deferred ?

La méthode notify( args) ou la méthode notifyWith(context [, args]) déclenche l'exécution des fonctions de rappel ajoutées par les méthodes then() et progress().

La méthode progress( ) ajoute une ou des fonctions de rappels qui seront exécutées par les nouvelles méthodes notify() ou notifyWith().

La méthode then() peut contenir un nouveau paramètre optionnel, progressCallbacks. Il s'agit d'une fonction ou d'un array de fonctions de rappel qui seront exécutées lors d'un appel généré par notify().

La méthode pipe() peut contenir un nouveau paramètre optionnel, progressFilter. Il s'agit d'une fonction qui filtre les appels générés par notify() et qui sera exécutée lorsque l'objet différé est rejeté (rejected).

La méthode state() permet de connaître l'état de l'objet différé : en cours (pending), succès (resolved) ou rejeté (rejected).

----

Le fonctionnement de la méthode is() a été revu et amélioré pour mieux prendre en charge le contexte du document. Il est recommandé de faire appel aux sélecteurs CSS du W3C.

----

Le booléen jQuery.isNumeric( arg ) détermine si arg peut être converti en une expression numérique.

----

Ajout d'une nouvelle signature pour la méthode removeData( ) , removeData( [list]) ou list est un array de string.

-----

Ajout d'une nouvelle signature pour la méthode stop(). .stop( [queue] [, clearQueue] [, jumpToEnd] ) ou queue peut être une queue nommée différente de "fx", la valeur par défaut.

-----

$(elements).on( events [, selector] [, data] , handler );
$(elements).off( [ events ] [, selector] [, handler] );


La méthode on() remplacent : bind(), live(), et delegate().
La méthode off() remplacent : unbind(), die() et undelegate().

Lorsque le paramètre "selector" est présent, on() remplace delegate(). La méthode live() avait déjà été dépréciée lors de la naissance de delegate().

Pour des raisons de rétrocompatibilité, les anciennes méthodes resteront disponibles pour une période indéterminée, mais il est vivement conseillé d'utiliser les nouvelles.

Nota bene : l'habitude de toujours placer le paramètre "handler" en dernière position et les paramètres optionnels justes avant le paramètre "handler" peut provoquer une bogue.

Si le paramètre "data" est un "string" vous devez fournir une valeur (string ou null) au paramètre "selector", sinon la fonction affectera la valeur de "data" au "selector".

Ce genre de bogue peut se produire dans toutes les méthodes jQuery contenant des paramètres optionnels et se terminant par un "handler".

------

jQuery.ajax()

Seront dépréciés à partir de la version 1.8, les méthodes : jqXHR.success, jqXHR.error et jqXHR.complete. On devra utiliser : jqXHR.done, jqXHR.fail, et jqXHR.always (qui n'est pas exactement équivalent à jqXHR.complete).

L'annonce de cette modification évolue dans le temps et provoque quelques remous.

------

Pour utiliser jQuery 1.7, il suffit d'inclure un appel au serveur de code jQuery dans votre page web : <script charset="utf-8" src="http://code.jquery.com/jquery-1.7.min.js"></script>.

Voir : Comment installer la bibliothèque jQuery ?

Sources :
4  0 
Avatar de kohsaka
Membre confirmé https://www.developpez.com
Le 29/09/2011 à 22:10
Old API	                                      New API
$(elems).delegate(selector, events, fn)	      $(elems).on(events, selector, fn)
$(elems).undelegate(selector, events, fn)     $(elems).off(events, selector, fn)
Coquille ? en revanche c'est bien le bon ordre dans la nouvelle API.
2  0 
Avatar de lepak
Futur Membre du Club https://www.developpez.com
Le 30/09/2011 à 15:00
@tontonnux

Je pense que leur but est de garder fn à la fin, pour ensuite avoir une syntaxe tel que celle-ci
Code : Sélectionner tout
1
2
3
4
$(element).on(events, function(){
	// ...
});
Donc quoi qu'il y ait au millieu comme param optionnels, avoir l'info sur le binding en une seule ligne, puis le handler.
2  0 
Avatar de Eliovir
Futur Membre du Club https://www.developpez.com
Le 10/10/2011 à 12:35
Bonjour,

Merci pour cet article.
2  0 
Avatar de danielhagnoul
Rédacteur https://www.developpez.com
Le 29/09/2011 à 22:21
Bonsoir

J'ai repris le tableau du blog jQuery, et il comporte bien les erreurs que vous relevez.

.delegate( selector, eventType, eventData, handler ) : http://api.jquery.com/delegate/
.undelegate( selector, eventType, handler ) : http://api.jquery.com/undelegate/

1  0 
Avatar de tontonnux
Membre expérimenté https://www.developpez.com
Le 30/09/2011 à 11:21
Bonjour,

Je suis utilisateur de Mootools, mais je m’intéresse à jQuery pour éventuellement l'utiliser pour certains projets futurs (jQuery mobile m'interpelle beaucoup).

Du coup je ne connais pas les spécificités de la syntaxe utilisée par jQuery, mais en voyant ça :
Code : Sélectionner tout
1
2
3
4
New API
$(elems).on(events, fn)
$(elems).on(events, { mydata: 42 }, fn)
$(document).on(events, selector, fn)
j'ai l'impression qu'avec jQuery, les paramètres optionnels ne sont pas en fin de déclaration, mais au milieu (ici on a toujours events en premier et fn en dernier).

Je ne sais pas si c'est par ce qu'on est vendredi ou qu'une logique évidente m'échappe, mais je m'attendais plus à un truc du genre :
Code : Sélectionner tout
1
2
3
New API
$(elems).on(events, fn)
$(elems).on(events, fn, selector, { mydata: 42 })
Quelqu'un peut-il m'expliquer pourquoi beaucoup doivent avoir envie de me moisser en lisant ce message et éclairer ma lanterne ?
1  0 
Avatar de danielhagnoul
Rédacteur https://www.developpez.com
Le 30/09/2011 à 12:01
Bonjour

Le premier gestionnaire d'événement disponible à l'aube de jQuery a été .bind( eventType, [eventData,] handler(eventObject) ) (.eventType(handler(eventObject) est une forme abbrége de bind()).

Je crois que live et delegate ont été créés en disposant les paramètres par rapport à bind.

Mettre un paramètre optionnel au milieu de paramètres obligatoires ne viendrait pas à l'esprit d'un programmeur ordonné.

Ce programmeur était sans doute un peu "bordélique", mais en JavaScript même la déclaration des paramètres est une option.
1  0 
Avatar de danielhagnoul
Rédacteur https://www.developpez.com
Le 30/09/2011 à 21:23
Bonsoir

C'est un point de vue aussi valable qu'un autre, mais l'eventHandler peut être une fonction séparée.

Code : Sélectionner tout
1
2
3
var eventTypeEventHandler = function(event){ ... };

$(element).on(eventType, eventTypeEventHandler);
Avec le chaînage des instructions, la fonction anonyme peut aussi être suivie d'autres instructions.

Dans tous les langages ordonnés que j'ai eu l'occasion de taquiner, les paramètres optionnels viennent en dernier.
1  0 
Avatar de gwinyam
Membre chevronné https://www.developpez.com
Le 02/10/2011 à 21:19
Cette dernière syntaxe est même recommandée. Question de clarté de lecture
1  0 
Avatar de Idelways
Expert éminent sénior https://www.developpez.com
Le 04/11/2011 à 18:56
jQuery 1.7 disponible en version finale
Unification de l'API évènements et amélioration des performances et des animations

Mise à jour du 4 novembre 2011 par Idelways

La version 1.7 finale du framework JavaScript jQuery sort aujourd'hui et unifie les différentes manières d'attacher et de détacher des évènements aux éléments du DOM.

Cette version améliore aussi les performances des évènements délégués (delegate) jusqu'à réduire de moitié le temps nécessaire à leur traitement en comparaison avec la version 1.6.4. La refactorisation qui a abouti à cette optimisation avait été basée sur l'analyse des usages qu'en font les développeurs sur les projets open source via Google Search Code (bientôt fermé).



jQuery 1.7 intègre le support des nouvelles balises de l'HTML5 pour les versions d'Internet Explorer antérieures à la 9. Les balises <acticle>, <sections>, etc. peuvent être insérés avec .html() (ou équivalents) sans disparaître sur Explorer, mais l'initiation des balises présente dans le code original de la page reste nécessaire, manuellement ou à l'aide de bibliothèques tierces comme html5shiv ou Modernizr.

Il n'est plus nécessaire d'enregistrer les valeurs initiales des éléments avant de les animer, jQuery s'occupe désormais de les enregistrer pour un retour cohérent au point de départ en cas d'appel à .stop() en cours de route.

Bien qu'elle ne devienne pas un chargeur de script à part entière, jQuery supporte l'API AMD (Asynchronous Module Definition), un mécanisme pour la définition de modules qui se chargent et chargent leurs dépendances de façon asynchrone.

L'utilisation des nouvelles méthodes de l'API : .on() et .off() sont recommandés, mais les .(un)bind, .(un)delegate et live(), die() resteront sur place pour un bon bout de temps pour des raisons évidentes de rétrocompatibilité.

Si un sélecteur est fourni en deuxième argument d'un appel à .on(), jQuery comprendra que c'est une évènement délégué qu'il convient d'attacher. Autrement, il s'agit d'un .bind() classique, auquel cas, faire attention à fournir un sélecteur nul si le troisième argument data est une chaîne de caractère.

Pour plus de détails sur la nouvelle gestion des évènements, lire ci-devant.

Télécharger jQuery 1.7 (minifié)

Source : Site officiel
1  0