jQuery 1.7 finale est disponible

[danielhagnoul]

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



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 :

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

[kohsaka]

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.

[danielhagnoul]

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/

[tontonnux]

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 :

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 :

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 ?

[danielhagnoul]

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.

[lepak]

@tontonnux

Je pense que leur but est de garder fn à la fin, pour ensuite avoir une syntaxe tel que celle-ci

Code :

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.

[danielhagnoul]

Bonsoir

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

Code :

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.

[gwinyam]

Cette dernière syntaxe est même recommandée. Question de clarté de lecture

[Eliovir]

Bonjour,

Merci pour cet article.

[danielhagnoul]

Bonsoir

Je suis hélas ! un habitué des fautes d'orthographe et en particulier de l'inversion entre "er" et "è". J'utilise le correcteur Antidote, mais il laisse souvent passer ce type d'erreur.

N'hésitez pas à l'avenir à signaler les erreurs.

@vermine : merci pour la correction.

[danielhagnoul]

jQuery 1.7 b2 est disponible

Cette deuxième version Beta était bien nécessaire, j'ai pu constater plusieurs bogues dans la première, surtout avec jQuery UI.

La liste 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.7b2.js"></script>.

Source

[Idelways]

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

[danielhagnoul]

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 :

• Blog jQuery ;
• La documentation, API, sur les nouveautés.

[Bovino]

Merci Daniel pour ces compléments très complets et très utiles

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".

C'est pour cela qu'il est recommandé de passer à data une valeur sous forme d'objet.

Noter aussi la suppression de la méthode jQuery.isNaN() (qui, contrairement à ce que son nom peut laisser croire n'était pas un doublon de la méthode native JavaScript isNaN()) au profit d'une nouvelle méthode utilitaire jQuery.isNumeric().

[danielhagnoul]

Bonsoir

La première version candidate (rc1) de la version de maintenance jQuery 1.7.1 est disponible.

Source et liste des bogues corrigées