Solutions pour la coexistence de plusieurs versions de jQuery_jquery

Comment faire coexister plusieurs jQuery sur une même page ? Tels que jquery-1.5 et jquery-1.11.

Vous vous demandez peut-être pourquoi avez-vous besoin de plusieurs jQuery pour coexister sur une seule page ? N'est-il pas possible de citer directement la dernière version de jQuery ?

La réponse est non. Parce que la vraie vie est très cruelle. Donnez-moi un exemple :

Des sites Web existants ont déjà référencé jQuery 1.5 et les plug-ins associés. Si vous mettez directement à niveau jQuery vers la dernière version, ces plug-ins ne fonctionneront pas à moins que vous puissiez mettre à niveau tous ces plug-ins ou attendre que l'auteur de chaque plug-in publie une version prenant en charge la dernière version de jQuery.

Maintenant, si nous voulons développer de nouveaux plug-ins ou écrire du code JavaScript basé sur jQuery, l'utilisation de la nouvelle version permettra d'économiser du temps et des efforts.

Mais il ne faut pas jeter l’ancienne version, que dois-je faire ?

La méthode consiste à utiliser noConflict() de jQuery pour permettre à plusieurs versions de coexister.

Lorsque nous importons jQuery, jQuery n'injecte que deux variables dans l'espace global de la fenêtre :

Copier le code Le code est le suivant :

​ window.$ = window.jQuery = { objet jQuery };

En même temps, jQuery conserve en interne les références aux anciens objets window.$ et window.jQuery. Quand on appelle :

Copier le code Le code est le suivant :

var $jq = $.noConflict();

window.$ est restauré, mais window.jQuery est toujours jQuery.

Quand on appelle :

Copier le code Le code est le suivant :

var $jq = $.noConflict(true);

window.$ et window.jQuery sont restaurés, et tout semble que jQuery n'a jamais été importé, sauf que jQuery peut être utilisé via la variable $jq.

Ainsi, permettre aux nouvelles et anciennes versions de jQuery de coexister peut être implémenté comme ceci :

Copier le code Le code est le suivant :

<script><br> // Maintenant window.$ et window.jQuery sont en version 1.11 :<br> console.log($().jquery); // => '1.11.0'<br> var $jq = jQuery.noConflict(true);<br> // Maintenant window.$ et window.jQuery sont restaurés en version 1.5 :<br> console.log($().jquery); // => '1.5.0'<br> // Vous pouvez accéder à jQuery version 1.11 via $jq<br> </script>

Dans myscript.js, utilisez $jq pour accéder à la version 1.11 de jQuery.

À ce stade, le problème est résolu.

Cependant, après avoir introduit deux versions de jQuery, la page était foirée. Que se passe-t-il si quelqu'un ne comprend pas le code et supprime var $jq = jQuery.noConflict(true); ? Ou, si vous échangez les deux lignes qui importent jQuery, vous n'obtiendrez finalement pas la bonne version de jQuery.

Le meilleur moyen est de citer directement le nouveau fichier js que nous avons écrit sans changer de page :

Copier le code Le code est le suivant :

De cette façon, nous référencerons la dernière version de jQuery dans myscript.js, et nous ne nous soucions pas de savoir si la page a jQuery ou non, et quelle version de jQuery existe.

Commencez à écrire de nouvelles et meilleures solutions. Tout d’abord, déterminez le corps principal de myscript.js :

Copier le code Le code est le suivant :

// monscript.js
(fonction () {
// COMMENCER
// A FAIRE : code javascript ici...
// FIN
})();

C'est une bonne habitude d'utiliser des fonctions anonymes pour éviter de polluer les variables globales et empêcher l'accès au code externe.

L'étape suivante consiste à intégrer directement le code jQuery 1.11 :

Copier le code Le code est le suivant :

// monscript.js
(fonction () {
// COMMENCER
/*! jQuery v1.11.1 */
​​ !function(a,b){"object"==typeof module&&"object"==typeof module.exports?...
If(k&&j[k]&&(e||j[k].data)||void 0!==d||"string"!=typeof b)return k||(k=...
},cur:function(){var a=Zb.propHooks[this.prop];return a&&a.get?a.get(thi...
      var $ = jQuery.noConflict(true);
// A FAIRE : code javascript ici...
// FIN
})();

Le code embarqué est bien sûr le code compressé, 3 lignes au total, puis ajoutez :

Copier le code Le code est le suivant :

var $ = jQuery.noConflict(true);

Notez que $ est une variable locale. Vous pouvez référencer ce $ à tout moment dans le code suivant. Ce n'est pas le même objet que la variable globale $ de jQuery dans les autres versions de la page.

La dernière étape consiste à vérifier si le protocole jQuery nous permet d'embarquer le code source jQuery directement dans notre propre code JavaScript.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.