Quelles sont les nouvelles fonctionnalités du prochain jQuery 3_jquery

Cela fait dix ans que jQuery est né, et sa longévité n'est évidemment pas sans raison. jQuery est une autre excellente bibliothèque Javascript après prototype. Il s'agit d'une bibliothèque js légère compatible avec CSS3 et divers navigateurs (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ et les versions ultérieures ne prendront plus en charge le navigateur IE6/7/8). jQuery permet aux utilisateurs de traiter plus facilement le HTML (une application sous Standard Universal Markup Language), les événements, d'implémenter des effets d'animation et de fournir facilement une interaction AJAX pour les sites Web. Un autre gros avantage de jQuery est que sa documentation est très complète et que ses différentes applications sont expliquées en détail. Il existe également de nombreux plug-ins matures parmi lesquels choisir.

Dans les prochaines semaines, jQuery franchira une étape importante : la sortie officielle de la version 3.0. jQuery 3 a corrigé un grand nombre de bugs, ajouté de nouvelles méthodes, supprimé certaines interfaces et modifié le comportement d'un petit nombre d'interfaces. Dans cet article, je mettrai en évidence les changements les plus importants introduits par jQuery 3.

Nouvelles fonctionnalités

Parlons d'abord des nouvelles fonctionnalités les plus importantes de jQuery 3.

pour...de boucle

Dans jQuery 3, nous pouvons utiliser l'instruction de boucle for...of pour parcourir tous les éléments DOM d'une collection jQuery. Cette nouvelle approche itérative fait partie de la spécification ECMAScript 2015 (alias ES6). Cette méthode peut boucler sur des « objets itérables » (tels que Array, Map, Set, etc.).

Lorsque vous utilisez cette nouvelle méthode d'itération, la valeur que vous obtenez à chaque fois dans le corps de la boucle n'est pas un objet jQuery, mais un élément DOM (Traduction : Ceci est similaire à la méthode .each()). Cette nouvelle méthode d'itération peut légèrement améliorer votre code lorsque vous travaillez sur une collection jQuery.

Pour comprendre comment fonctionne cette méthode d'itération, supposons un scénario : vous devez attribuer un identifiant à chaque élément d'entrée de la page. Avant jQuery 3, vous pouviez écrire :

Copier le code Le code est le suivant :

var $inputs = $('input');for (var je = 0; je $inputs[i].id = 'input-' + i;
>

Dans jQuery 3, vous pouvez écrire comme ceci :

Copier le code Le code est le suivant :

var $inputs = $('input');var je = 0 ;
pour (var entrée de $inputs) {
input.id = 'input-' + i++;
>

(Annotation : en fait, jQuery lui-même a une méthode .each(), qui n'est pas mauvaise en termes de lisibilité.)

Nouvelles signatures pour les fonctions $.get() et $.post()

jQuery 3 ajoute de nouvelles signatures aux deux fonctions utilitaires $.get() et $.post(), les rendant cohérentes avec le style d'interface de $.ajax(). La nouvelle signature ressemble à ceci :

Copier le code Le code est le suivant :

$.get([paramètres])
$.post([paramètres])

settings est un objet qui contient plusieurs propriétés. Son format est le même que celui du paramètre que vous avez passé à $.ajax() auparavant. Si vous souhaitez comprendre plus clairement cet objet paramètre, veuillez vous référer à la description associée sur la page $.ajax().

La seule différence entre les objets paramètres de $.get() et $.post() et les paramètres passés à $.ajax() est que l'attribut méthode du premier est toujours ignoré. La raison est en fait très simple. $.get() et $.post() eux-mêmes prédéfinissent déjà la méthode HTTP pour lancer les requêtes Ajax (évidemment, $.get() est GET et $.post() est POST). En d’autres termes, les humains normaux ne voudraient pas utiliser la méthode $.get() pour envoyer une requête POST.

Supposons qu'il y ait le morceau de code suivant :

Copier le code Le code est le suivant :

$.get({
URL : 'https://www.audero.it',
Méthode : 'POST' // Cette propriété est ignorée
                                                                                                                                                                                                                              // Cet attribut sera ignoré});

Peu importe comment nous écrivons l'attribut de méthode, cette requête sera toujours envoyée en tant que GET.

Utilisez requestAnimationFrame() pour implémenter l'animation

Tous les navigateurs modernes (y compris IE10 et supérieur) prennent en charge requestAnimationFrame. jQuery 3 utilisera cette API en interne pour implémenter des animations afin d'obtenir des effets d'animation plus fluides et plus économes en ressources.

Méthode unwrap()

jQuery 3 ajoute un paramètre de sélection facultatif à la méthode unwrap(). La nouvelle signature de cette méthode est :

Copier le code Le code est le suivant :

déballer([sélecteur])

Avec cette fonctionnalité, vous pouvez transmettre à cette méthode une chaîne contenant une expression de sélecteur et l'utiliser pour faire correspondre l'élément parent. S'il existe un élément enfant correspondant, la couche parent de cet élément enfant sera levée ; s'il n'y a pas de correspondance, aucune opération ne sera effectuée.

Fonctionnalités modifiées

jQuery 3 modifie également le comportement de certaines fonctionnalités.

:visible et :caché

jQuery 3 changera la signification des filtres :visible et :hidden. Tant que l'élément possède une zone de mise en page, même si la largeur et la hauteur sont nulles, il sera considéré comme : visible. Par exemple, les éléments br et les éléments en ligne sans contenu sont désormais sélectionnés par le filtre :visible.

Donc si votre page contient la structure suivante :

Copier le code Le code est le suivant :

Ensuite, exécutez l'instruction suivante :

Copier le code Le code est le suivant :

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

Dans jQuery 1.x et 2.x, vous obtiendriez 0 ; mais dans jQuery 3, vous obtiendriez 2.

Méthode data()

Un autre changement important est lié à la méthode data(). Son comportement est désormais cohérent avec la spécification de l'API Dataset. jQuery 3 convertira tous les noms de clés de propriété en camelCase. Regardons de plus près en prenant comme exemple l'élément suivant :

Copier le code Le code est le suivant :

Lorsque nous utilisons des versions antérieures à jQuery 3, si nous exécutons le code suivant :

Copier le code Le code est le suivant :

var $elem = $('#container');
$elem.data({ 'ma-propriété': 'bonjour'});console.log($elem.data());

Vous obtiendrez les résultats suivants dans la console :

Copier le code Le code est le suivant :

{ma-propriété : "hello">

Dans jQuery 3, nous obtiendrons les résultats suivants :

Copier le code Le code est le suivant :

{myProperty : "hello">

Veuillez noter que dans jQuery 3, les noms d'attribut sont devenus camelCase et les tirets ont été supprimés ; alors que dans les versions précédentes, les noms d'attribut restaient tous en minuscules et conservaient les tirets tels quels.

Objet différé

jQuery 3 modifie également le comportement des objets différés. L'objet Deferred peut être considéré comme l'un des prédécesseurs de l'objet Promise et il implémente la compatibilité avec le protocole Promise/A+. Cet objet et son histoire sont assez intéressants. Si vous souhaitez en savoir plus, vous pouvez lire la documentation officielle de jQuery ou mon livre "jQuery in Practice (Troisième édition)" - ce livre couvre également jQuery 3.

Dans jQuery 1.x et 2.x, si une exception non interceptée se produit dans la fonction de rappel passée à Deferred, l'exécution du programme sera immédiatement interrompue (Annotation : échouer silencieusement, en fait, le comportement de la plupart des fonctions de rappel dans jQuery sont tous comme ça). Ce n'est pas le cas avec les objets Promise natifs. Il lèvera une exception et continuera à bouillonner vers le haut jusqu'à ce qu'il atteigne window.onerror (généralement, le point final du bouillonnement est ici). Si vous ne définissez pas de fonction pour gérer cet événement d'erreur (généralement nous ne le faisons pas), alors les informations d'exception seront affichées, puis l'exécution du programme s'arrêtera.

jQuery 3 suivra le modèle des objets Promise natifs. Par conséquent, les exceptions générées dans le rappel entraîneront un état d'échec (rejet) et déclencheront le rappel d'échec. Une fois le rappel d'échec exécuté, l'ensemble du processus continuera à avancer et les rappels de réussite ultérieurs seront exécutés.

Pour vous permettre de mieux comprendre cette différence, regardons un petit exemple. Par exemple, nous avons le code suivant :

Copier le code Le code est le suivant :

var deferred = $.Deferred();
différé
.then(function() { throw new Error('Une erreur');
})
.then( function() { console.log('Success 1');
}, function() { console.log('Failure 1');
>
)
.then( function() { console.log('Success 2');
}, function() { console.log('Failure 2');
>
);
différé.resolve();

Dans jQuery 1.x et 2.x, seule la première fonction (celle qui renvoie l'erreur) sera exécutée. De plus, comme nous n'avons défini aucun gestionnaire d'événements pour window.onerror, la console affichera "Erreur non détectée : une erreur" et l'exécution du programme sera abandonnée.

Dans jQuery 3, tout le comportement est complètement différent. Vous verrez les messages « Échec 1 » et « Succès 2 » dans la console. Cette exception sera gérée par le premier rappel d'échec et, une fois l'exception gérée, les rappels de réussite suivants seront appelés.

Document SVG

Aucune version de jQuery (y compris jQuery 3) n'a jamais officiellement prétendu prendre en charge les documents SVG. En fait, de nombreuses méthodes fonctionneront, et certaines méthodes ne fonctionnaient pas auparavant (comme celles permettant de manipuler les noms de classes), mais elles ont également été mises à jour dans jQuery 3. Par conséquent, dans jQuery 3, vous devriez pouvoir utiliser en toute sécurité des méthodes telles que addClass() et hasClass() pour manipuler des documents SVG.

Méthodes et propriétés obsolètes et supprimées

Tout en ajoutant les améliorations ci-dessus, jQuery a également supprimé et rendu obsolète certaines fonctionnalités.

Méthodes bind(), unbind(), délégué() et undelegate() obsolètes

jQuery a introduit il y a longtemps la méthode on(), qui fournit une interface unifiée pour remplacer des méthodes telles que bind(), délégué() et live(). Dans le même temps, jQuery a également introduit la méthode off() pour remplacer unbind(), undelegated() et die(). Depuis lors, bind(), délégué(), unbind() et undelegate() sont obsolètes, mais ils existent toujours.

jQuery 3 commence enfin à marquer ces méthodes comme "obsolètes", avec l'intention de les supprimer complètement dans une future version (très probablement jQuery 4). Par conséquent, veuillez utiliser les méthodes on() et off() de manière uniforme dans votre projet afin de ne pas avoir à vous soucier des modifications dans les versions futures.

Supprimer les méthodes load(), unload() et error()

jQuery 3 abandonne complètement les méthodes load(), unload() et error() qui ont été marquées comme obsolètes. Ces méthodes ont été marquées comme obsolètes il y a longtemps (à partir de jQuery 1.8) mais n'ont pas été supprimées. Si vous utilisez un plugin qui repose toujours sur ces méthodes, la mise à niveau vers jQuery 3 cassera votre code. Par conséquent, soyez attentif pendant le processus de mise à niveau.

Supprimer les attributs de contexte, de support et de sélecteur

jQuery 3 abandonne complètement les attributs tels que le contexte, le support et le sélecteur qui ont été marqués comme obsolètes. Comme ci-dessus, lors de la mise à niveau vers jQuery 3, soyez conscient des plugins que vous utilisez.

Bogues corrigés

jQuery 3 corrige quelques bugs très importants des versions précédentes. Dans cette section, je me concentrerai sur deux d’entre eux car ils devraient avoir un impact significatif sur vos habitudes de codage.

Les valeurs de retour de width() et height() ne seront plus arrondies

jQuery 3 corrige un bug dans width(), height() et d'autres méthodes associées. Les valeurs de retour de ces méthodes ne seront plus arrondies, car ce comportement d'arrondi rend le positionnement des éléments peu pratique dans certains cas.

Jetons un coup d’œil en détail. Supposons que vous ayez un élément conteneur d'une largeur de 100 px. Il contient trois éléments enfants et la largeur est d'un tiers (c'est-à-dire 33,333333 %) :

.

Copier le code Le code est le suivant :

Mon nom

est

Aurelio De Rosa

Dans les versions antérieures à jQuery 3, si vous essayez d'obtenir la largeur d'un élément enfant via le code suivant...

Copier le code Le code est le suivant :

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

… 그러면 얻는 결과는 33이 됩니다. 그 이유는 jQuery가 값 33.33333을 반올림하기 때문입니다. jQuery 3에서는 이 버그가 수정되어 보다 정확한 결과(예: 부동 소수점 수)를 얻을 수 있습니다.

wrapAll() 메서드

jQuery 3에서는 함수가 매개변수로 전달될 때 발생한 WrapAll() 메서드의 버그도 수정되었습니다. jQuery 3 이전 버전에서는 함수가 WrapAll() 메서드에 전달되면 jQuery 컬렉션의 각 요소를 개별적으로 래핑했습니다. 즉, 동작은 Wrap()에 함수를 전달할 때와 완전히 동일합니다.

이 문제를 해결하는 동안 또 다른 변경 사항도 도입되었습니다. jQuery 3에서는 이 함수가 한 번만 호출되므로 jQuery 컬렉션의 모든 요소를 ​​함수에 전달할 수 없습니다. 따라서 이 함수(this)의 실행 컨텍스트는 현재 jQuery 컬렉션의 첫 번째 요소만 가리킵니다.

jQuery 3 베타 1 다운로드 방법

이제 여기까지 읽었으므로 아마도 jQuery 3의 첫 번째 베타를 사용해 보고 싶을 것입니다. 이 버전은 다음 두 주소를 통해 구할 수 있습니다:

비압축 버전: https://code.jquery.com/jquery-3.0.0-beta1.js

압축 버전: https://code.jquery.com/jquery-3.0.0-beta1.min.js

물론 npm을 통해 다운로드할 수도 있습니다.

[코드]npm 설치 jquery@3.0.0-beta1[/code]

결론

많은 사람들이 최신 웹 개발에서는 jQuery가 설 자리가 없다고 욕설을 퍼부었습니다. 그러나 그럼에도 불구하고 jQuery 개발은 계속되고 객관적인 통계(상위 100만개 웹사이트 중 78.5%를 차지)는 이러한 주장을 약화시킵니다.

이 기사에서는 jQuery 3이 가져올 주요 변경 사항 중 일부를 소개했습니다. 아시다시피, 이 버전은 주요 변경 사항이 거의 없기 때문에 기존 프로젝트를 중단할 가능성이 없습니다. 그러나 jQuery 3으로 업그레이드할 때 Deferred 객체 개선 등과 같은 몇 가지 핵심 사항을 염두에 두어야 합니다. 마찬가지로, 타사 라이브러리를 업그레이드할 때 예상치 못한 동작을 최대한 빨리 감지하고 특정 기능의 실패를 방지하려면 프로젝트의 호환성을 확인하는 것도 필요합니다.

번역 주석

이 글에서 언급한 변경 사항 외에도 jQuery 3.0의 가장 큰 변경 사항은 IE8에 대한 지원이 완전히 중단된 것입니다. jQuery 팀이 이런 결정을 내린 이유는 마이크로소프트가 올해 초 IE 8~10 지원을 중단하겠다고 발표했기 때문이다. 따라서 jQuery 3.0 알파 단계에서 출시된 jQuery Compat 프로젝트가 계속 존재할 필요가 없습니다.

그러나 IE8은 여전히 ​​중국 본토에서 가장 인기 있는 브라우저 중 하나이기 때문에 국내 개발자는 단기(또는 중기) 기간 동안 jQuery 1.x 버전을 유지해야 합니다.

자, 드디어 좋은 소식을 전해드리겠습니다. 사용자의 원활한 업그레이드를 돕기 위해 jQuery는 이번에 버전 3.0용 마이그레이션 플러그인(jQuery Migrate 플러그인)도 제공할 예정입니다. jQuery를 3.0으로 업그레이드한 후 이 플러그인을 동시에 실행하여 jQuery 1.x 또는 2.x 기반의 기존 비즈니스 코드가 동시에 정상적으로 실행되는지 확인하세요. 또한 콘솔에 다음과 같은 내용이 보고됩니다. 기존 코드가 jQuery 3과 다릅니다. 호환되는 곳입니다. 이러한 비호환성을 해결한 후에는 플러그인을 제거해도 안전합니다.