Apakah ciri baharu jQuery 3_jquery yang akan datang

Sudah sepuluh tahun sejak jQuery dilahirkan, dan umur panjangnya jelas bukan tanpa sebab. jQuery ialah satu lagi perpustakaan Javascript yang sangat baik selepas prototaip. Ia adalah pustaka js ringan yang serasi dengan CSS3 dan pelbagai penyemak imbas (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ dan versi seterusnya tidak lagi menyokong pelayar IE6/7/8). jQuery membolehkan pengguna memproses HTML dengan lebih mudah (aplikasi di bawah Standard Universal Markup Language), acara, melaksanakan kesan animasi dan menyediakan interaksi AJAX untuk tapak web dengan mudah. Satu lagi kelebihan besar jQuery ialah dokumentasinya sangat lengkap dan pelbagai aplikasinya dijelaskan secara terperinci Terdapat juga banyak pemalam matang untuk dipilih.

Dalam beberapa minggu akan datang, jQuery akan mencapai pencapaian penting - keluaran rasmi versi 3.0. jQuery 3 membetulkan sejumlah besar pepijat, menambah kaedah baharu, mengalih keluar beberapa antara muka, dan mengubah suai tingkah laku sebilangan kecil antara muka. Dalam artikel ini, saya akan menyerlahkan perubahan paling penting yang diperkenalkan oleh jQuery 3.

Ciri baharu

Mari kita bincangkan ciri baharu yang paling penting dalam jQuery 3 dahulu.

untuk...gelung

Dalam jQuery 3, kita boleh menggunakan pernyataan gelung for...of untuk mengulang semua elemen DOM dalam koleksi jQuery. Pendekatan berulang baharu ini adalah sebahagian daripada spesifikasi ECMAScript 2015 (aka ES6). Kaedah ini boleh melingkari "objek boleh lelar" (seperti Tatasusunan, Peta, Set, dll.).

Apabila menggunakan kaedah lelaran baharu ini, nilai yang anda dapat setiap kali dalam badan gelung bukanlah objek jQuery, tetapi elemen DOM (Terjemahan: Ini serupa dengan kaedah .each()). Kaedah lelaran baharu ini boleh menambah baik sedikit kod anda apabila anda beroperasi pada koleksi jQuery.

Untuk memahami cara kaedah lelaran ini berfungsi, mari kita anggap senario - anda perlu memberikan ID kepada setiap elemen input dalam halaman. Sebelum jQuery 3, anda mungkin menulis:

Salin kod Kod adalah seperti berikut:

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

Dalam jQuery 3, anda boleh menulis seperti ini:

Salin kod Kod adalah seperti berikut:

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

(Anotasi: Malah, jQuery sendiri mempunyai kaedah .each(), yang tidak buruk pada kebolehbacaan.)

Tandatangan baharu untuk fungsi $.get() dan $.post()

jQuery 3 menambah tandatangan baharu pada dua fungsi utiliti $.get() dan $.post(), menjadikannya konsisten dengan gaya antara muka $.ajax(). Tandatangan baharu kelihatan seperti ini:

Salin kod Kod adalah seperti berikut:

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

tetapan ialah objek yang mengandungi berbilang sifat. Formatnya adalah sama dengan format parameter yang anda hantar ke $.ajax() sebelum ini. Jika anda ingin memahami objek parameter ini dengan lebih jelas, sila rujuk penerangan berkaitan pada halaman $.ajax().

Satu-satunya perbezaan antara objek parameter $.get() dan $.post() dan parameter yang dihantar kepada $.ajax() ialah atribut kaedah bagi yang pertama sentiasa diabaikan. Alasannya sebenarnya sangat mudah. ​​$.get() dan $.post() sendiri sudah menetapkan kaedah HTTP untuk memulakan permintaan Ajax (jelas $.get() ialah GET, dan $.post() ialah POST). Dalam erti kata lain, manusia biasa tidak mahu menggunakan kaedah $.get() untuk menghantar permintaan POST.

Andaikan terdapat sekeping kod berikut:

Salin kod Kod adalah seperti berikut:

$.get({
URL: 'https://www.audero.it',
Kaedah: 'POST' // Sifat ini diabaikan
// atribut ini akan diabaikan});

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 :

< /div>

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() ;

… alors le résultat que vous obtiendrez sera 33. La raison en est que jQuery arrondira la valeur 33,33333. Dans jQuery 3, ce bug a été corrigé, vous obtiendrez donc un résultat plus précis (c'est-à-dire un nombre à virgule flottante).

Méthode wrapAll()

jQuery 3 corrige également un bug dans la méthode wrapAll() qui se produisait lorsqu'une fonction lui était passée en paramètre. Dans les versions antérieures à jQuery 3, lorsqu'une fonction était transmise à la méthode wrapAll(), elle encapsulait individuellement chaque élément de la collection jQuery. En d’autres termes, le comportement est exactement le même que lors du passage d’une fonction à wrap().

En corrigeant ce problème, un autre changement a également été introduit : puisque dans jQuery 3, cette fonction n'est appelée qu'une seule fois, il est impossible de lui transmettre tous les éléments de la collection jQuery. Par conséquent, le contexte d'exécution de cette fonction (this) pointera uniquement vers le premier élément de la collection jQuery actuelle.

Comment télécharger jQuery 3 bêta 1

Maintenant que vous avez lu jusqu'ici, vous voudrez probablement essayer la première version bêta de jQuery 3. Vous pouvez vous procurer cette version via les deux adresses suivantes :

Version non compressée : https://code.jquery.com/jquery-3.0.0-beta1.js

Version compressée : https://code.jquery.com/jquery-3.0.0-beta1.min.js

Bien sûr, vous pouvez également le télécharger via npm :

[code]npm install jquery@3.0.0-beta1[/code]

Conclusion

Beaucoup de gens ont dénigré jQuery, affirmant qu'il n'a pas sa place dans le développement Web moderne. Quoi qu’il en soit, le développement de jQuery se poursuit et les statistiques objectives (une part de 78,5 % du million de sites Web les plus performants) mettent à mal ces arguments.

Dans cet article, je vous ai présenté certains des changements majeurs qu'apportera jQuery 3. Comme vous l'avez peut-être remarqué, il est peu probable que cette version interrompe vos projets existants car elle introduit très peu de modifications majeures. Cependant, lors de la mise à niveau vers jQuery 3, vous devez toujours garder à l'esprit certains points clés, tels que les améliorations apportées aux objets différés, etc. De même, lors de la mise à niveau d'une bibliothèque tierce, il est également nécessaire de vérifier la compatibilité du projet afin de détecter au plus tôt tout comportement inattendu et d'éviter la panne de certaines fonctions.

Note de traduction

En plus des changements mentionnés dans cet article, le plus gros changement dans jQuery 3.0 est l'abandon complet du support d'IE8. La raison pour laquelle l'équipe jQuery a pris cette décision est que Microsoft a annoncé au début de cette année qu'il cesserait de prendre en charge IE 8~10. Par conséquent, il n'est pas nécessaire que le projet jQuery Compat publié dans la phase alpha 3.0 de jQuery continue d'exister.

Cependant, comme IE8 reste l'un des navigateurs les plus populaires en Chine continentale, les développeurs nationaux devront s'en tenir à la version jQuery 1.x à court (voire moyen) terme.

Bon, on vous annonce enfin la bonne nouvelle. Pour aider les utilisateurs à effectuer une mise à niveau en douceur, jQuery fournira également cette fois un plugin de migration (plugin jQuery Migrate) pour la version 3.0. Après la mise à niveau de jQuery vers 3.0, exécutez ce plug-in en même temps pour vous assurer que le code métier existant basé sur jQuery 1.x ou 2.x s'exécute normalement en même temps, il vous le signalera également dans la console ; le code existant est différent de jQuery 3. Lieux compatibles. Une fois que vous avez corrigé ces incompatibilités, vous pouvez supprimer le plugin en toute sécurité.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn