Comparaison des méthodes de jQuery pour éviter les conflits entre le symbole $ et les autres bibliothèques JS

Comparaison des méthodes de jQuery pour éviter les conflits entre le symbole $ et les autres bibliothèques JS_jquery

WBOY

Libérer： 2016-05-16 16:59:09

original

966 Les gens l'ont consulté

Le symbole $ doit être utilisé dans jQuery. Si d'autres bibliothèques js (comme le célèbre prototype) définissent également le symbole $, cela provoquera un conflit et affectera l'exécution normale du code js. jqeury propose quelques solutions pour éviter ce problème. Jetons un coup d'œil aux différences entre ces solutions

Option 1 :
Introduisez noConflict() et remplacez $ par d'autres symboles

Copier le code Le code est le suivant :

 
var $j = jQuery.noConflict(); 
$j(document ) .ready(function(){ 
$j("#btn1").click(function(){ 
alert("Texte : " $j("#test").text()); 
}); 
}); 

Inconvénients : Après avoir introduit ce code, non seulement le fichier js actuel, mais aussi tous les js référencés par le html, s'ils sont utiles dans jquery $, doivent utilisez $j pour remplacer le $

Option 2 précédent :
la fonction ready est la fonction d'entrée de jquery, vous pouvez
changer $(document).ready(function(){
Remplacer avec
jQuery(document).ready(function($){}
Inconvénients : Il n'est valable que pour le code à l'intérieur du nid prêt, et n'est pas valide pour le code à l'extérieur du nid. Si toute votre logique, c'est le tout dans la fonction ready, ce n'est pas un problème. Mais nous écrivons généralement certaines sous-fonctions en dehors de la fonction ready, puis la fonction ready appelle ces fonctions, cette solution n'est donc pas valide.
Option 3 (recommandée, notamment lors du développement de plug-ins js) :

Ajouter une fonction au package de contenu js

Copier le code Le code est le suivant : jQuery(function($){

//Mettez ici votre code js (par exemple, le ready mentionné dans la deuxième solution Fonctions et sous-fonctions)

//S'il s'agit d'un fichier js, ajoutez effectivement une ligne de code au début et à la fin du fichier 
} 

 
 ou 

Copier le code Le code est le suivant : (function($) {

//Votre code js

}) (jQuery ); 

 
Cette méthode ne présente pas les défauts des deux solutions ci-dessus. Elle n'affectera que le code enveloppé dans jQuery(function($){}. 
 n'affectera pas les autres. js Code, c'est très important. Imaginez, si vous écrivez un composant public js, qui doit utiliser jquery, afin d'améliorer la robustesse, vous devez prendre en compte le conflit de symboles $. Si vous utilisez l'option 1, lorsque d'autres l'utilisent, ils doivent respecter votre accord et remplacer le $ dans leur code js par $. Si vous utilisez l'option 3, vous pouvez éviter l'impact du conflit $ sur le composant sans nécessiter. l'utilisation de celui-ci. Les personnes disposant de composants publics modifient leur propre code.