Dévoilement de jQuery 3 :17 nouvelles fonctionnalités puissantes et comment les exploiter

Cela fait plus de 10 ans que jQuery a commencé à faire vibrer le Web et il est resté pour de bonnes raisons. En juillet 2015, jQuery a annoncé la première version alpha de la version 3.0 – une mise à jour majeure après une longue période. Ils y travaillent depuis près de 2 ans. La nouvelle version promet un jQuery plus fin et plus rapide avec une compatibilité ascendante à l'esprit.

La version actuelle 3.1.1 corrige de nombreux bugs, ajoute de nouvelles méthodes, supprime certaines fonctions et modifie le comportement de quelques fonctions. Examinons les nouvelles fonctionnalités qu'ils ont ajoutées et comment les utiliser.

17. Masquer et afficher les méthodes

Afin d'augmenter la compatibilité avec le responsive design, jQuery 3 a été amélioré pour masquer de nombreux éléments. Un test effectué sur 54 échantillons montre que la nouvelle version est 2 % plus rapide que la précédente.

En plus de cela, les méthodes .hide(), .show() et .toggle() se concentreront sur les styles en ligne plutôt que sur les styles calculés. De cette façon, ils respecteront mieux les valeurs d'affichage des feuilles de style autant que possible, ce qui signifie que les règles CSS peuvent changer dynamiquement lors d'événements tels que le redimensionnement de la fenêtre ou la réorientation du périphérique.

<script>
$( "#showr" ).click(function() {
 $( "div" ).first().show( "fast", function showNext() {
 $( this ).next( "div" ).show( "fast", showNext );
 });
});
 
$( "#hidr" ).click(function() {
 $( "div" ).hide( 1000 );
});
</script>

Lire : 28 effets CSS3 étonnants pour donner à votre site Web un look moderne

16. Fonctions WrapAll() et Unwrap()

Dans jQuery 2, la méthode .wrapAll() se comportait comme .wrap() lorsqu'une fonction était passée. Cela a été modifié :.wrapAll(function) appelle sa fonction une fois, en utilisant le résultat de la chaîne de l'appel de fonction pour envelopper la collection entière.

jQuery( "div" ).wrapAll(function( /* No index argument, since the function would be executed only once */ ) {
 // context is equal to the first found element
 return "<h4></h4>";
});

Dans jQuery 3, il existe un paramètre de sélection facultatif pour la méthode unwarp(). La nouvelle signature de la méthode est :

unwrap([selector])

Il vous permet de transmettre une chaîne contenant une expression de sélecteur à faire correspondre dans l'élément parent. S'il y a une correspondance, les éléments enfants correspondants sont déballés, sinon ils ne le seront pas.

15. Largeur/hauteur de la barre de défilement prise en compte

Dans jQuery 2, les appels à $(window).width() renvoient la « largeur du contenu » qui exclut toute barre de défilement ajoutée par le navigateur si le contenu dépasse les dimensions de l'élément. Afin de fournir une mesure équivalente à la requête multimédia CSS, $(window).outerWidth() et $(window).outerHeight() renvoient désormais la largeur et la hauteur, y compris la largeur et la hauteur de la barre de défilement. Ceci est équivalent à la propriété DOM window.innerWidth.

14. Comportement des données()

Dans jQuery 3, le comportement de la méthode data() a été légèrement modifié pour aligner la méthode sur les spécifications de l'API Dataset. Il va maintenant transformer toutes les clés des propriétés en chameau.

var $elem = $('#container');
$elem.data({
 'custom-property': 'Hello World'
});
console.log($elem.data());

Si vous utilisez une ancienne version, vous obtiendrez le résultat suivant sur la console :

{custom-property: "Hello World"}

Dans jQuery 3, vous obtiendrez :

{customProperty: "Hello World"}

Comme vous pouvez le voir, le nom de la propriété est en casse chameau sans tiret alors que dans les anciennes versions, il restait en minuscule et conservait le tiret.

13. Prise en charge des opérations de classe SVG

jQuery ne prend toujours pas entièrement en charge SVG, mais les méthodes qui manipulent les noms de classes CSS, comme .hasClass() ou .addClass(), peuvent être utilisées pour cibler les documents SVG. Vous pouvez modifier (ajouter, basculer, supprimer) ou rechercher des classes avec jQuery en SVG, puis styliser les classes à l'aide de CSS.

12. Filtres visibles et masqués

jQuery 3 modifie la signification des filtres :visible et :hidden. Il considère les éléments :visibles s'ils ont des zones de mise en page, y compris celles de largeur et de hauteur nulles. Par exemple, l'élément br et les éléments en ligne sans contenu seront sélectionnés par le filtre :visible.

Si vous disposez de la page HTML suivante :

<section></section>
<div></div>
<br />

et vous exécutez l'instruction :

console.log($('body :visible').length);

Dans jQuery 1 et 2, vous obtiendrez 0 comme résultat, mais dans cette version, le résultat sera 3.

11. Fini les arrondis pour la largeur et la hauteur

jQuery renvoie désormais les valeurs de .width() et .height() en nombres flottants au lieu de nombres entiers, chaque fois que le navigateur le prend en charge. Pour les utilisateurs recherchant une précision au sous-pixel pour la conception de pages Web, cela peut être une bonne nouvelle.

Par exemple, si vous avez 3 éléments d'une largeur d'un tiers (33,3333333 %) à l'intérieur d'un élément conteneur d'une largeur de 100 px :

<div class="container">
 <div>The car is </div>
 <div>black</div>
 <div>Audi</div>
</div>

Si vous essayez d'obtenir la largeur des éléments enfants :

$('.container div').width();

Vous obtiendrez la valeur 33,3333333, le résultat le plus précis.

10. Couche de sécurité supplémentaire

Une couche de sécurité supplémentaire a été intégrée contre les attaques Cross-Site Scripting (XSS). Cela oblige les développeurs à spécifier dataType:”script” dans les options des méthodes $.ajax() et $.get(). Cela évite la possibilité d'une attaque dans laquelle le site distant fournit un contenu non script mais décide en outre de diffuser un script malveillant. Puisque jQuery.getScript() définit explicitement dataType:”script”, il n’est pas affecté par ce changement.

$.ajax({
 accepts: {
 mynewcustomtype: 'application/abc-some-custom-type'
 },
 // how to deserialize a `mynewcustomtype`
 converters: {
 'text mynewcustomtype': function(result) {
 // do things
 return newresult;
 }
 },
 
 // Expect a `mynewcustomtype` back from server
 dataType: 'mynewcustomtype'
});

9. Le dièse invalide

jQuery 3 renvoie une erreur de syntaxe si une chaîne de sélection ne consiste en rien d'autre qu'un dièse, comme jQuery("#") et .find("#"). Dans l'ancienne version, $("#") renvoyait une collection vide et .find("#") renvoyait une erreur.

8. Nouvelle méthode pour échapper une chaîne

La nouvelle méthode jQuery.escapeSelector() vous permet d'échapper à toute chaîne ou caractère ayant une signification particulière dans un sélecteur CSS. C'est utile dans les cas où un identifiant ou un nom de classe contient des caractères ayant une signification particulière en CSS, comme un point-virgule ou un point.

Par exemple, si un élément de la page a un identifiant « abc.xyz », il ne peut pas être sélectionné avec $(« abc.xyz ») car le sélecteur est analysé comme un élément avec l'identifiant « abc », qui a également une classe « xyz ». Cependant, il peut être sélectionné avec la nouvelle méthode $("#" + $.escapeSelector("abc.xyz")).

7. Arguments jQuery.when()

Dans jQuery 3, si vous ajoutez un argument d'entrée avec une méthode then() à $.when(), il sera interprété comme un « thenable » compatible avec Promise. Cela permet une gamme beaucoup plus large d'entrées, y compris les promesses Bluebird et ES6, ce qui permet d'écrire des rappels asynchrones plus sophistiqués.

$.when($.ajax("test.apx")).then(function(data,textStatus,jqHXR) {
 alert (jqHXR.status); //alerts 200
 }); 

Les appels jQuery.when multi-arguments se comportent comme Promise.all, agrégeant les valeurs de réalisation dans un tableau de réalisation, ou bien rejetant avec la première valeur de rejet. Les appels à argument unique et zéro se comportent comme Promise.resolve, renvoyant un Deferred qui se résout de manière identique à thenable, ou se remplit avec son entrée non-Promise.

De plus, la méthode jQuery.when() ne transmet plus les notifications de progression de l'entrée Deferred à la sortie Deferred.

6. Le hachage dans une URL est conservé

La méthode jQuery.ajax() envoie désormais l'URL complète au transport (script, xhr, jsonp ou transport personnalisé). Il ne supprime plus le hachage de l'URL s'il est présent. Cependant, vous devez le supprimer manuellement avant d'envoyer la requête si le serveur à l'autre extrémité de la connexion ne peut pas gérer un hachage sur une URL.

5. Les objets différés sont compatibles avec les promesses JS

Les différés sont des objets chaînables qui permettent de créer des files d'attente de rappel. jQuery 3 a rendu les objets différés compatibles avec les nouveaux standards Promises/A+. Il y a un changement clé dans la méthode .then(). Toute exception levée dans un rappel .then() est désormais interceptée et convertie en valeur de rejet. La valeur non exploitable renvoyée par un gestionnaire de rejet se transforme en valeur d'exécution.

L'ancienne méthode différée :

$.ajax("/stat")
 .done(function(data) {
 whoops();
 // console displays: "whoops is not a function"
 // no further execution
 })
 .fail(function(arg) {
 // doesn't execute since the was not caught 
 });

Le nouveau comportement standard Promesses/A+

$.ajax("/stat")
 .then(function(data) {
 whoops();
 // console displays "jQuery.Deferred exception: whoops is not a function"
 // no further execution
 })
 .catch(function(arg) {
 // arg is an Error object - "whoops is not a function"
 });

4. Nouvelle API pour les animations

jQuery 3 utilise l'API requestAnimationFrame() pour exécuter des animations. Cette nouvelle API exécute l'animation de manière plus fluide et plus rapide, consommant moins de temps CPU. Il n'est utilisé que dans les navigateurs qui le prennent en charge. Pour les navigateurs plus anciens comme Internet Explorer 9, jQuery utilise son ancienne API comme méthode de secours.

Lire : 24 outils d'animation CSS3 et HTML5 pour les concepteurs

3. jQuery 3 s'exécute en mode strict

La plupart des navigateurs prenant en charge jQuery 3 utilisent le mode strict et la nouvelle version a été conçue en tenant compte de cette directive. Bien que jQuery 3 ait été écrit en mode strict, votre code n'est pas obligé de s'exécuter en mode strict, vous n'avez donc pas besoin de réécrire le code existant si vous envisagez de migrer vers la version actuelle. Il existe cependant une exception :certaines versions d'ASP.net ne sont pas compatibles en raison du mode strict.

Si vous exécutez ASP.net 4.0 qui utilise arguments.caller.callee pour tenter de tracer les piles d'appels dans la méthode doPostBack(), vous feriez mieux de continuer à utiliser jQuery 2.x ou des versions antérieures. De nos jours, les navigateurs prennent en charge les traces de pile via error.stack, il n'est donc pas nécessaire d'examiner arguments.caller.callee.

2. Nouvelle signature pour les méthodes Get et Post

jQuery a une nouvelle signature pour les fonctions utilitaires $.get() et $.post() afin de les aligner sur $.ajax(). La nouvelle signature concerne les paramètres de configuration.

$.get([settings])
$.post([settings])

Les paramètres de l'objet peuvent avoir de nombreuses propriétés. C'est le même objet que vous pouvez fournir à $.ajax(). La seule différence lors du passage de l'objet à $.get() et $.post() par opposition à $.ajax() est que la propriété de méthode est toujours ignorée, car $.get() et $.post() ont une méthode HTTP prédéfinie pour effectuer la requête Ajax (GET et POST).

Considérons un code :

$.get({
 url: 'https://www.rankred.com',
 method: 'POST' // property is ignored
});

Malgré la propriété de la méthode, l'instruction n'enverra pas de requête POST mais une requête GET.

1. Pour…de Boucle

jQuery 3 prend en charge la boucle for…of introduite dans la spécification ECMAScript 6. Il vous permet de parcourir des objets itérables tels que Map, Set, Array, etc. Lors de l'utilisation de cette boucle, la valeur obtenue est un élément DOM d'une collection jQuery, un à la fois.

Lire :26 plugins jQuery modernes pour améliorer votre site Web

La boucle for…of peut être utilisée pour remplacer l'ancienne syntaxe $.each() et faciliter la navigation dans les éléments d'une collection jQuery. Supposons que vous souhaitiez attribuer un nom à chaque élément d'entrée d'une page.

Le code jQuery 2 ressemblerait à…

var $inputs = $('input');
for(var j = 0; j < $inputs.length; j++) {
 $inputs[j].id = 'input - ' + j;
 }

Le code jQuery 3 sera similaire à…

var $inputs = $('input');
var j = 0; 
 
for(var input of $inputs) {
 input.id = 'input - ' + j++;
 }