Vous devez le savoir, mais la bibliothèque JavaScript, jQuery, la plus populaire du Web a été mise à jour il y a de cela quelques semaines. Il s’agit de la version 1.7 qui peut maintenant être téléchargée à partir de l’URL suivante : docs.jquery.com/Downloading_jQuery.
Alternativement, si vous préférez un CDN, utilisez l’une des adresses suivantes :
- http://code.jquery.com/jquery-1.7.min.js
- http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js
- http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js
Pour rappel, un Content Delivery Network (CDN) est constitué d’ordinateurs reliés en réseau à travers Internet et qui coopèrent afin de mettre à disposition du contenu ou des données à des utilisateurs.
Allez, regardons ce qui est nouveau …
Méthodes supprimées
Avant de nous pencher sur les nouvelles fonctionnalités apportées par cette nouvelle version de jQuery, vous devriez vérifier si votre code existant est toujours valide. Utilisez-vous :
event.layerXouevent.layerYjQuery.isNaN()jQuery.event.proxy()
Ainsi, si vous voulez passer à la toute dernière version de jQuery, 1.7, vous allez devoir remplacer ou supprimer l’appel à ces méthodes devenues obsolètes, sous peine de voir votre système non fonctionnel.
Nouveaux événements dans l’API : on() et off()
Les nouvelles méthodes on() et off() permettent d’unifier la gestion des événements jQuery, vous évitant d’utiliser les appels aux fonctions bind(), delegate() ou encore live(). Ces fonctions permettent d’accélérer considérablement la vitesse d’exécution de vos scripts !
La syntaxe est la suivante :
$(elements).on( events [, selector] [, data] , handler );
$(elements).off( [events] [, selector] [, handler] );
[/sourcecode]
Pour faire simple, l’événement on() permet d’associer un événement à un élément parent de l’arborescence dom au lieu de l’associer individuellement à chacun des éléments concernés :
Exemple 1 : lier un événement click à un lien
// onclick
$("a#link").on( "click", handler );
// identique
// à : $("a#link").bind( "click", handler );
// ou : $("a#link").click( handler );
[/sourcecode]
Exemple 2 : lier un événement click à tous les éléments dans une liste non-ordonnée
// onclick
$("ul#list").on( "click", "li", handler );
// identique
// à : $("ul#list").delegate( "li", "click", handler );
[/sourcecode]
Les méthodes existantes bind() et delegate() existent toujours, mais l’équipe de jQuery vous recommande d’utiliser on() ou off() pour tous vos nouveaux projets utilisant jQuery 1.7.
Utilisant l’appel à ces fonctions dans mes développements, notamment pour le thème du blog, j’ai constaté un net gain en termes de fluidité lors de mon refactoring.
Support HTML5 pour IE6, 7 et 8
Des méthodes telles que html() prennent désormais en charge les balises HTML5 comme header, footer ou encore article. Notez que vous aurez toujours besoin d’HTML5 Shiv pour certains navigateurs, notamment Internet Explorer…
Nouvelle méthode isNumeric()
Comme vous l’aurez deviné, la nouvelle méthode implémentée dans cette version 1.7 de jQuery nommée isNumeric() renvoie vrai si la chaîne est un nombre. En exemple cela donne :
$.isNumeric(3); // true
$.isNumeric("3"); // true
$.isNumeric(0); // true
$.isNumeric(""); // false
$.isNumeric(false); // false
$.isNumeric(Toto); // false
[/sourcecode]
Diverses améliorations et corrections de bugs
Les questions suivantes ont été abordées :
- Les performances de la délégation d’évènements ont été doublées avec la 1.7. L’équipe de jQuery a identifié que la délégation était devenue de plus en plus importante dans les frameworks et elle a donc apporté des optimisations au sein du code source de jQuery
- Les animations de basculement, y compris les méthodes
slideToggle()etfadeToggle(), fonctionnent désormais correctement même à la suite d’effets en file d’attente à l’aide de la méthodestop(). En effet, jQuery s’occupe désormais de les enregistrer pour un retour cohérent au point de départ - 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. - 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
stop()s’est vu dotée d’un premier paramètre, une chaîne, qui représente le nom de la file d’attente d’animation - 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
Mises à jour de la documentation
Pour plus de détails sur toutes les nouvelles fonctionnalités, reportez-vous à la page de la documentation 1.7. Toutes les nouvelles fonctionnalités sont taguées avec le label “version added: 1.7”.
Vers une mise à niveau ?
C’est la question à un million de dollars ! Si le travail de l’équipe de jQuery a travaillé dur sur les problèmes de performance, elle a également travaillé afin de minimiser les problèmes de compatibilité et logiquement la version 1.7 est susceptible de ne pas casser votre code.
Cela dit, si vous êtes particulièrement prudent lors des mises à jour, je vous conseille de retarder celle-ci pendant une semaine ou deux. La correction de bugs mineurs se trouvent normalement, fixée et publiée rapidement !
Vous voilà prêt à sauter le pas vers cette nouvelle version de jQuery ! L’avez-vous fait ? Avez-vous vu des améliorations ?
