Quoi de neuf dans jQuery 3 - 10 plus cool fonctionnalités
JQuery 3.0, la nouvelle version majeure de jQuery a finalement été publié. La communauté des développeurs Web attendait cette étape importante depuis octobre 2014, date à laquelle l'équipe de jQuery a commencé à travailler sur la nouvelle version majeure. version finale est dehors.
La note de publication promet une plus mince et plus rapide jQuery, avec rétrocompatibilité à l'esprit. Dans cet article, nous examinons certaines des nouvelles fonctionnalités de jQuery 3.0 pour vous donner un aperçu de la façon dont cela change le paysage JavaScript..
Où commencer
Si vous voulez télécharger jQuery 3.0 pour expérimenter par vous-même, allez directement à la page de téléchargement. Il vaut également la peine de consulter le Guide de mise à niveau ou le code source..
Si vous souhaitez tester le fonctionnement de votre projet existant avec jQuery 3.0, vous pouvez essayer le plug-in jQuery Migrate qui identifie les problèmes de compatibilité dans votre code. Vous pouvez également jeter un coup d'œil sur les prochaines étapes.
Cet article ne couvre pas tout les nouvelles fonctionnalités de jQuery 3.0, mais uniquement les plus intéressantes: amélioration de la qualité du code, intégration des nouvelles fonctionnalités ECMAScript 6, nouvelle API pour les animations, nouvelle méthode d'extraction des chaînes, prise en charge SVG accrue, amélioration des rappels async, meilleure compatibilité et sécurité accrue.
1. Les anciennes solutions de contournement d'IE ont été supprimées
L'un des principaux objectifs de la nouvelle version majeure était de la rendre plus rapide et plus élégant, donc les vieilles hacks et les solutions de contournement liées à IE9- s'est retiré. Cela signifie que si vous voulez ou avez besoin de supporter IE6-8, vous devrez continuer à utiliser les dernières 1.12 libérer, comme même le 2.x La série ne prend pas totalement en charge les anciens Internet Explorer (IE9-). Consultez les notes sur la prise en charge du navigateur dans la documentation.
Notez qu'il y a aussi nombreuses fonctionnalités déconseillées dans jQuery 3. L’un des gros inconvénients du Guide de mise à niveau est que les fonctions obsolètes - à compter de juin 2016 - ne sont pas groupées. Par conséquent, si vous êtes intéressé par celles-ci, vous devrez les rechercher avec l’outil de recherche de votre navigateur ( Ctrl + F).
2. jQuery 3.0 s'exécute en mode strict
Comme la plupart des navigateurs pris en charge par jQuery 3 prennent en charge le mode strict, la nouvelle version majeure a été conçue en tenant compte de cette directive..
Bien que jQuery 3 ait été écrit en mode strict, il est important de savoir que votre code n'est pas obligé de fonctionner en mode strict, alors vous pas besoin de réécrire votre code jQuery existant si vous souhaitez migrer vers jQuery 3. Mode strict et non strict JavaScript peut coexister avec bonheur.
Il y a une exception: certaines versions d'ASP.NET que - à cause du mode strict - sont non compatible avec jQuery 3. Si vous êtes impliqué dans ASP.NET, vous pouvez consulter les détails ici dans la documentation..
3. Pour… des boucles est introduite
jQuery 3 prend en charge le for… of statement, un nouveau type de pour boucle, introduite dans ECMAScript 6. Elle donne un moyen plus simple de boucle sur les objets itérables, tels que les tableaux, les cartes et les ensembles.
Dans jQuery, le pour… de boucle peut remplacer l'ancien $ .each (…) syntaxe et facilite la lecture en boucle des éléments d’une collection jQuery.
Notez que le pour… de boucle sera seulement le travail soit dans un environnement qui prend en charge ECMAScript 6, ou si vous utiliser un compilateur JavaScript comme Babel.
4. Les animations ont une nouvelle API
jQuery 3 utilise l’API requestAnimationFrame () pour effectuer des animations, créer des animations courir plus vite et mieux. La nouvelle API est uniquement utilisée dans les navigateurs qui la prennent en charge. pour les anciens navigateurs (IE9), jQuery utilise sa précédente API comme méthode de secours pour afficher les animations..
RequestAnimationFrame est absent depuis un moment, si vous êtes intéressé par ce qu’il sait ou pourquoi vous devriez l’utiliser, CSS Tricks a un bon post à ce sujet.
5. Nouvelle méthode pour échapper des chaînes avec une signification particulière
Le nouveau jQuery.escapeSelector () Cette méthode vous permet d’échapper des chaînes ou des caractères signifie quelque chose d'autre en CSS afin de pouvoir utilisez-le dans un sélecteur jQuery; sans échapper à l'interpréteur JavaScript ne peut pas bien comprendre.
La documentation nous aide à mieux comprendre cette méthode avec l'exemple suivant:
“Par exemple, si un élément de la page a un identifiant de “a B c d e F” il ne peut pas être sélectionné avec $ ("# abc.def") parce que le sélecteur est analysé comme “un élément avec id 'abc' qui a aussi une classe 'def'. Cependant, il peut être sélectionné avec $ ("#" + $ .escapeSelector ("abc.def")).”
Je ne sais pas à quelle fréquence un tel cas se produit, mais si vous rencontrez un problème de ce type, vous disposez désormais d'un moyen facile de le résoudre rapidement..
6. Support des méthodes de manipulation de classe SVG
Malheureusement, jQuery 3 encore ne supporte pas complètement SVG, mais les méthodes jQuery qui manipulent les noms de classe CSS, tels que .addClass () et .hasClass (), maintenant peut être utilisé pour documents SVG cibles ainsi que. Cela signifie que vous pouvez modifier (ajouter, supprimer, basculer) ou trouver des classes avec jQuery en graphiques vectoriels évolutifs, puis style les classes avec CSS.
7. Les objets différés sont désormais compatibles avec JS Promises
Promesses JavaScript - objets utilisés pour les calculs asynchrones - ont été normalisés dans ECMAScript 6; leur comportement et leurs caractéristiques sont spécifiés dans les normes Promises / A +.
Dans jQuery 3, Objets différés sont compatibles avec les nouvelles normes Promises / A +. Les différés sont objets chaînables qui permettent de créer des files d'attente de rappel.
La nouvelle fonctionnalité change comment les fonctions de rappel asynchrones sont exécutées; Promesses permettre aux développeurs d'écrire du code asynchrone plus proche logiquement du code synchrone.
Consultez des exemples de code dans le Guide de mise à niveau ou consultez ce didacticiel de Scotch.io sur les bases des promesses JavaScript..
8. jQuery.when () interprète les multi-arguments différemment
le $ .when () méthode fournit un moyen de exécuter des fonctions de rappel. Cela fait partie de jQuery depuis la version 1.5. C'est une méthode flexible. cela fonctionne aussi avec zéro argument, et il peut accepter un ou plusieurs objets comme arguments.
jQuery 3 change la façon dont les arguments de $ .when () sont interprétés quand ils contiennent le $ .then () méthode avec lequel vous pouvez passer des rappels supplémentaires comme arguments de la $ .when () méthode.
Dans jQuery 3, si vous ajoutez un argument d'entrée avec le puis() méthode pour $ .when (), l'argument sera interprété comme un "compatible" avec Promise.
Cela signifie que le $ .when méthode sera en mesure de accepter une gamme d'entrées frontière, tels que les promesses natives ES6 et Bluebird Promises, qui permettent d’écrire des rappels asynchrones plus sophistiqués.
9. Nouvelle logique d'affichage / masquage
Pour augmenter compatibilité avec responsive design, le code lié à montrer et cacher des éléments a été mis à jour dans jQuery 3.
A partir de maintenant, le .spectacle(), .cacher(), et .basculer() les méthodes se concentreront sur styles en ligne, au lieu de styles calculés, de cette façon ils vont mieux respecter les changements de style.
Le nouveau code respecte les afficher valeurs de feuilles de style chaque fois que cela est possible, ce qui signifie que les règles CSS peuvent changer dynamiquement lors d'événements tels que la réorientation du périphérique et le redimensionnement de la fenêtre.
La documentation affirme que le résultat le plus important sera:
"En conséquence, les éléments déconnectés sont n'est plus considéré comme caché à moins qu'ils aient en ligne affichage: aucun;, et donc .basculer() volonté ne les différencie plus à partir d'éléments connectés à partir de jQuery 3.0. "
Si vous voulez mieux comprendre le résultats de la nouvelle logique d'affichage / masquage, voici une discussion intéressante sur Github à ce sujet.
Les développeurs jQuery ont également publié un tableau Google Docs sur le fonctionnement du nouveau comportement. dans différents cas d'utilisation.
10. Protection supplémentaire contre les attaques XSS
jQuery 3 ajouté une couche de sécurité supplémentaire contre les attaques XSS (Cross-Site Scripting) en obligeant les développeurs à spécifier dataType: "script" dans les options du $ .ajax () et le $ .get () les méthodes.
En d’autres termes, si vous souhaitez exécuter des requêtes de script entre domaines, vous devez: doit déclarer cela dans les paramètres de ces méthodes.
Selon la documentation, la nouvelle exigence est utile lorsqu'un "site distant fournit un contenu non scripté mais décide plus tard de servir un script qui a une intention malveillante". Le changement n'affecte pas le $ .getScript () méthode, car il définit la dataType: "script" option explicitement.
