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 les événements .

Comme ces erreurs, je parle

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

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

PS Je dois append Zurb Foundation 5 qui utilise jQuery 2.

  1. Ne pas utiliser offset option offset dans les propriétés de position, par exemple 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 assigner un gestionnaire d’événement, utilisez $element.on() .
  3. N’utilisez pas le navigateur reniflant avec $.browser , essayez plutôt d’utiliser la détection de fonctionnalités ( $.support ).
  4. N’utilisez pas deferred.isRejected() , deferred.isResolved() , utilisez plutôt deferred.state() . 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 ne comporte pas la surcharge d’un appel de fonction.
  6. L’état de la case à cocher / radio dans un .sortinggger() ed “click” a maintenant le même état que dans une action initiée par l’utilisateur.
  7. .data() de la convention de dénomination pour les clés .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() .
  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 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 une instance de widget. Utilisez la méthode instance() : $element.someWidget('instance') . Contrairement aux autres méthodes de plug-in, la méthode instance() est sûre pour appeler n’importe quel élément. Si l’élément n’est pas une instance du widget donné, la méthode retourne undefined : $('

    ').dialog('instance') /* returns undefined instead of throwing Error */ .

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

  • Guide de mise à niveau jQuery Core 1.9
  • Guide de mise à niveau de jQuery UI 1.9
  • Guide de mise à niveau de jQuery UI 1.10
  • Guide de mise à niveau de jQuery UI 1.11
  • Guide de mise à niveau de jQuery UI 1.12

Si vous envisagez de passer à jQuery 1.x, jQuery 2.x devrait en tenir compte et procéder comme suit :):

1. Plus de support pour IE6 / 7/8

Je pense toujours que c’est un peu prématuré d’abandonner IE8 mais l’équipe n’a plus pu attendre. jQuery 2.0 supprime tous les codes IE hérités pour la sélection des nœuds, la manipulation DOM, la gestion des événements et Ajax.

2. La fonctionnalité de génération 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 la taille de jQuery à moins de 10 Ko. Les modules pouvant être omis sont: Liste des fonctions

Devrais-je mettre à niveau?

Il est important de comprendre que jQuery 2.0 a la parité API avec jQuery 1.9. Il y a un petit nombre de corrections de bogues, mais pas de nouvelles fonctionnalités.

Cependant, si vous êtes l’un de ces développeurs chanceux qui ont abandonné le support pour IE6 / 7/8, récupérez jQuery 2.0 et ne retournez pas en arrière.

Dans jQuery 1.9, plusieurs méthodes ont été supprimées et étaient disponibles dans les versions antérieures 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 plug-in jQuery migrate que vous avez mentionné résoudra tous les problèmes que vous pourriez éventuellement rencontrer avec la mise à niveau de 1.8 à 1.9+ (qui inclut 2.x) et vous informera également de toutes les méthodes que vous utilisez qui ont été supprimées lorsque vous regardez la console. Le plugin migrate est le meilleur moyen de mettre à niveau jquery de 1.6x-1.8x à 1.9 + / 2.0 +. Inclure jquery 2.x, puis inclure le plug-in migrate, puis ouvrez votre console et remplacez les anciennes méthodes jusqu’à ce que le plug-in migrate cesse de donner vos avertissements. À ce stade, vous devriez pouvoir supprimer en toute sécurité le plug-in de migration.