web-dev-qa-db-fra.com

Mise à niveau de jQuery 1.x vers jQuery 2.x

J'essaie de passer de jQuery 1.x à jQuery 2.x.

J'ai jQuery 1.8 et jQueryUI 1.8, et maintenant je veux passer à jQuery 2.x et améliorer mon application web.

Donc, ma question est de savoir quoi changer et supprimer, comme pour Ajax et events.

Comme ces erreurs dont je parle

Uncaught TypeError: Object [object Object] has no method 'live'

Des fonctions comme .on () et .ajax () en ont-elles changé? (Je sais que .live était obsolète).

P.S. Je dois ajouter Zurb Foundation 5 qui utilise jQuery 2.

jqueryupgrade
47
ucefkh

Si vous envisagez de mettre à niveau vers jQuery 1.x vers jQuery 2.x, pensez à cela et procédez comme suit:

1. Plus de support pour IE6/7/8

Je pense toujours qu'il est un peu prématuré d'abandonner IE8 mais l'équipe ne pouvait plus attendre. jQuery 2.0 supprime tout l'héritage IE code pour la sélection des nœuds, la manipulation DOM, la gestion des événements et Ajax.

2. La fonction de construction personnalisée a été améliorée dans la version 2.0

vous pouvez donc exclure l'un des 12 modules inutilisés et réduire jQuery en dessous de 10 Ko. Les modules qui peuvent être omis sont: Liste des fonctions

Dois-je mettre à niveau?

Il est important de comprendre que jQuery 2.0 a la parité API avec jQuery 1.9. Il existe un petit nombre de corrections de bogues mais aucune nouvelle fonctionnalité.

Cependant, si vous êtes l'un de ces développeurs chanceux qui a abandonné le support pour IE6/7/8, prenez jQuery 2.0 et ne regardez pas en arrière.

35
ucefkh
  1. N'utilisez pas l'option offset dans les propriétés de position, par ex. le code $element.position({my: 'center center', at: 'center center', offset: '5 -10'}) doit être remplacé par $element.position({my: 'center center', at: 'center+5 center-10'}).
  2. N'utilisez pas $element.bind(), $element.live(), $element.delegate() pour attribuer un gestionnaire d'événements, utilisez $element.on().
  3. N'utilisez pas le sniffing du navigateur avec $.browser, Essayez plutôt d'utiliser la détection des fonctionnalités ($.support).
  4. N'utilisez pas deferred.isRejected(), deferred.isResolved(), utilisez deferred.state() à la place. N'utilisez pas deferred.pipe(), la méthode deferred.then() doit être utilisée à la place.
  5. N'utilisez pas la méthode $elements.size(), utilisez plutôt la propriété $elements.length. La méthode .size() est fonctionnellement équivalente à la propriété .length; cependant, la propriété .length est préférée car elle n'a pas la surcharge d'un appel de fonction.
  6. La case à cocher/l'état de la radio dans un événement .trigger() ed "clic" a maintenant le même état que dans une action lancée par l'utilisateur.
  7. Convention de dénomination modifiée pour les touches .data(), par exemple, ui-dialog Au lieu de dialog. ( http://jqueryui.com/upgrade-guide/1.9/#changed-naming-convention-for-data-keys ).
  8. N'utilisez pas $.ui.contains(), utilisez $.contains() à la place.
  9. Chaque instance de widget a déjà un identifiant unique this.uuid Et un espace de noms d'événement this.eventNamespace = "." + this.widgetName + this.uuid. Ne générez pas de choses similaires manuellement.
  10. N'utilisez pas $element.focus(n) - il est obsolète. Utilisez setTimeout(function() { $element.focus(); }, n);.
  11. N'utilisez pas $element.zIndex() - il est obsolète.
  12. N'utilisez pas les constantes $.ui.keyCode.NUMPAD_* - elles sont supprimées.
  13. N'utilisez pas $element.data('someWidget') pour récupérer l'instance de widget. Utilisez la méthode instance(): $element.someWidget('instance'). Contrairement à d'autres méthodes de plugin, la méthode instance() est sûre d'appeler n'importe quel élément. Si l'élément n'est pas une instance du widget donné, la méthode renvoie undefined: $('<div></div>').dialog('instance') /* returns undefined instead of throwing Error */.

Guides de mise à niveau d'origine et liste complète des modifications:

70
Victor

Dans jQuery 1.9, plusieurs méthodes ont été supprimées qui étaient disponibles dans les versions précédentes de jquery.

Si vous utilisez ces méthodes, alors oui, vous rencontrerez des problèmes.

Sinon, vous ne rencontrerez pas de problèmes.

L'utilisation du plugin jQuery migrate que vous avez mentionné résoudra tous les problèmes que vous pourriez avoir avec la mise à niveau de 1.8 vers 1.9+ (qui inclut 2.x) et il vous informera également de toutes les méthodes que vous utilisez qui ont été supprimées lorsque vous regardez la console. Le plugin de migration est le meilleur moyen de mettre à niveau jquery de 1.6x-1.8x à 1.9 +/2.0 +. Incluez jquery 2.x, puis incluez le plug-in de migration, puis ouvrez votre console et remplacez les anciennes méthodes jusqu'à ce que le plug-in de migration cesse de donner vos avertissements. À ce stade, vous devriez pouvoir supprimer en toute sécurité le plug-in de migration.

3
Kevin B