Developpez.com

Le Club des Développeurs et IT Pro

jQuery 1.7 disponible en version finale

Unification de l'API évènements et amélioration des performances et des animations

Le 2011-09-29 01:35:11, par danielhagnoul, Rédacteur
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
  Discussion forum
14 commentaires
  • danielhagnoul
    Rédacteur
    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 :
    le 04/11/2011 à 21:51
  • kohsaka
    Membre confirmé
    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.
    le 29/09/2011 à 22:10
  • lepak
    Futur Membre du Club
    @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.
    le 30/09/2011 à 15:00
  • Eliovir
    Futur Membre du Club
    Bonjour,

    Merci pour cet article.
    le 10/10/2011 à 12:35
  • danielhagnoul
    Rédacteur
    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/

    le 29/09/2011 à 22:21
  • tontonnux
    Membre expérimenté
    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 ?
    le 30/09/2011 à 11:21
  • danielhagnoul
    Rédacteur
    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.
    le 30/09/2011 à 12:01
  • danielhagnoul
    Rédacteur
    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.
    le 30/09/2011 à 21:23
  • gwinyam
    Membre chevronné
    Cette dernière syntaxe est même recommandée. Question de clarté de lecture
    le 02/10/2011 à 21:19
  • Idelways
    Expert éminent sénior
    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
    le 04/11/2011 à 18:56
  Poster une réponse