recherche

Maison >interface Web >js tutoriel >Que faire en cas de conflits de bibliothèque jQuery

Que faire en cas de conflits de bibliothèque jQuery

小云云
小云云original
2018-01-11 14:08:401462parcourir

Lors du développement avec jQuery, vous pouvez également utiliser d'autres bibliothèques JS, telles que Prototype, mais des conflits peuvent survenir lorsque plusieurs bibliothèques coexistent. Cet article vous présente principalement la solution parfaite aux conflits de bibliothèques jQuery. Ce dont vous avez besoin. Les amis peuvent se référer. cela, jetons un oeil ci-dessous.

Mon idée est que si on me demandait de concevoir, j'utiliserais une valeur par défaut de $. Si je ne passe pas de paramètres, j'utiliserais $. Enfin, je le monterais sur window.$. et transmettez les paramètres Name, tels que jq, puis je le monterai sur window.jq. 

var myControl="jq";
(function(name){
 var $=name ||"$"; //name存在$的值就是name的值，不存在或为null，$的值为字符串"$"
 console.log($);
 window[$]=function(){
 alert("123");
 }
})(myControl)
window[myControl]();

En fait, ce n’est certainement pas la façon dont jquery résout les conflits. Jetez ensuite un œil à la façon dont jQuery résout les conflits.

Les versions multiples de jQuery ou les conflits avec d'autres bibliothèques js sont principalement des conflits avec le symbole $ couramment utilisé.

1. Résolution des conflits

1. Comment résoudre les conflits entre plusieurs versions de jQuery sur la même page

<body>
<!-- 引入1.6.4版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script> var jq164 = jQuery.noConflict(true); </script>
<!-- 引入1.4.2版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script> var jq142 = jQuery.noConflict(true); </script>

<script>
(function($){
 //此时的$是jQuery-1.6.4
 $('#');
})(jq164);
</script>
 
<script>
jq142(function($){
 //此时的$是jQuery-1.4.2
 $('#');
});
</script>
 
</body>

2. dans d'autres bibliothèques L'importation ultérieure de la méthode

jQuery noConflict() libérera le contrôle de l'identifiant $ afin que d'autres scripts puissent l'utiliser.

1. Vous pouvez utiliser jQuery en remplaçant son abréviation par son nom complet

Une fois les autres bibliothèques et la bibliothèque jQuery chargées, vous pouvez appeler la fonction jQuery.noConflict() à tout moment pour Le contrôle de la variable $ est transféré vers d'autres bibliothèques JavaScript. Ensuite, vous pouvez utiliser la fonction jQuery() comme usine de fabrication d'objets jQuery dans votre programme. 

<script src="prototype.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>

<p id="pp">test---prototype</p>
<p>test---jQuery</p>

<script type="text/javascript">
jQuery.noConflict();  //将变量$的控制权让渡给prototype.js，全名可以不调用。
jQuery(function(){   //使用jQuery
 jQuery("p").click(function(){
 alert( jQuery(this).text() );
 });
});
//此处不可以再写成$,此时的$代表prototype.js中定义的$符号。

$("pp").style.display = 'none'; //使用prototype
</script>

2. Personnaliser un raccourci

noConflict() peut renvoyer une référence à jQuery, qui peut être stockée dans un nom personnalisé, tel que jq, $J variables, pour une utilisation ultérieure. .

Cela garantit que jQuery n'entrera pas en conflit avec d'autres bibliothèques lors de l'utilisation d'un raccourci personnalisé. 

<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){   //使用jQuery
 $j("p").click(function(){
 alert( $j(this).text() );
 });
});

$("pp").style.display = 'none'; //使用prototype
</script>

3. S'il n'y a pas de conflit, utilisez toujours $

Si vous souhaitez utiliser l'abréviation $ dans le bloc de code jQuery et ne souhaitez pas modifier ce raccourci, vous pouvez passez le symbole $ en tant que variable Give ready méthode. De cette façon, vous pouvez utiliser le symbole $ à l'intérieur de la fonction, mais en dehors de la fonction, vous devez toujours utiliser "jQuery". 

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(document).ready(function($){
 $("p").click(function(){ //继续使用 $ 方法
 alert( $(this).text() );
 });
});
//或者如下
jQuery(function($){   //使用jQuery
 $("p").click(function(){ //继续使用 $ 方法
 alert( $(this).text() );
 });
});
</script>

Ou utilisez des blocs d'instructions IEF, ce qui devrait être le moyen le plus idéal, car une compatibilité totale peut être obtenue avec un minimum de modifications de code.

Lorsque nous écrivons nos propres plug-ins jquery, nous devrions tous utiliser cette méthode d'écriture, car nous ne savons pas comment introduire séquentiellement diverses bibliothèques js au cours du processus de travail spécifique, mais cette méthode d'écriture de blocs d'instructions peut conflits de boucliers. 

<script type="text/javascript">
jQuery.noConflict();  //将变量$的控制权让渡给prototype.js
(function($){   //定义匿名函数并设置形参为$
 $(function(){   //匿名函数内部的$均为jQuery
 $("p").click(function(){ //继续使用 $ 方法
  alert($(this).text());
 });
 });
})(jQuery);    //执行匿名函数且传递实参jQuery

$("pp").style.display = 'none'; //使用prototype
</script>

3. La bibliothèque jQuery est importée avant les autres bibliothèques

La bibliothèque jQuery est importée avant les autres bibliothèques La propriété de $ appartient par défaut à la bibliothèque JavaScript suivante. . Ensuite, vous pouvez utiliser "jQuery" directement pour effectuer du travail jQuery.

En même temps, vous pouvez utiliser la méthode $() comme raccourci vers d'autres bibliothèques. Il n'est pas nécessaire d'appeler la fonction jQuery.noConflict() ici. 

<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>

<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>

<script type="text/javascript">
jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
 jQuery("p").click(function(){  
  alert( jQuery(this).text() );
 });
});

$("pp").style.display = 'none'; //使用prototype
</script>
</body>

2. Principe

1. Code source

Code source : Jetez un oeil à comment le faire dans le code source

var
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,

// Map over the $ in case of overwrite
_$ = window.$,

jQuery.extend({
 noConflict: function( deep ) {
   if ( window.$ === jQuery ) {
    window.$ = _$;
   }

   if ( deep && window.jQuery === jQuery ) {
    window.jQuery = _jQuery;
   }

   return jQuery;
  }
});

Lorsque jQuery est chargé, le window.jQuery actuel est obtenu via la variable _jQuery déclarée à l'avance, et le window.$ actuel est obtenu via _$.

Montez noConflict sur jQuery via jQuery.extend(). Nous ajustons donc toujours jQuery.noConflict() comme ceci lors de l'appel.

J'ai fait deux jugements lors de l'appel de noConflict(),

Le premier if, cède le contrôle de $.

Le deuxième if donne le contrôle de jQuery lorsque noConflict() passe les paramètres.

Enfin, noConflict() renvoie l'objet jQuery, quel paramètre est utilisé pour le recevoir et quel paramètre aura le contrôle jQuery.

2. Vérification

//冲突 
 var $ = 123; //假设其他库中$为123
 $(
   function () {
    console.log($); //报错Uncaught TypeError: $ is not a function
   }
 );

Résoudre les conflits

//解决冲突
 var jq = $.noConflict();
 var $ = 123;
 jq(function () {
  alert($); //123
 });

Exemple de contrôle $ de libération

<script>
 var $ = 123; // window.$是123，存储在私有的_$上。

</script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
<p>aaa</p>
<script>
 var jq = $.noConflict();//当window.$===jQuery的时候，把_$赋给了window.$。
 jq(function () {
  alert($); //123
 });
</script>

Exemple de contrôle de libération jQuery

Le rôle du paramètre deep : deep permet d'abandonner l'interface externe de jQuery.

Comme suit, noConflict() n'écrit pas de paramètres et affiche jQuery en tant que constructeur. 

<script>
 var $ = 123;
 var jQuery=456;
</script>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<body>
<p>aaa</p>
<script>
 var jq = $.noConflict();
 jq(function () {
  alert(jQuery); //构造函数
 });
</script>


Si vous écrivez un paramètre vrai, 456 apparaîtra. 

<script>
 var $ = 123;
 var jQuery=456;
</script>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<body>
<p>aaa</p>
<script>
 var jq = $.noConflict(true); //写了true或者参数的时候，deep为真window.jQuery===jQuery为真，所以进入if条件。把456赋值给window.jQuery
 jq(function () {
  alert(jQuery); //456
 });
</script>

Recommandations associées :

Utilisez jquery.noConflict() pour résoudre le problème des conflits entre la bibliothèque jquery et d'autres bibliothèques

Comment écrire une bibliothèque js/jQuery (résumé d'expérience)

Solution au conflit entre la bibliothèque jQuery et les autres bibliothèques JS_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript jquery if 构造函数 标识符 接口 JS 对象 prototype
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：ztree implémente le partage d'exemples de fonction d'affichage horizontal d'autorisationArticle suivant：ztree implémente le partage d'exemples de fonction d'affichage horizontal d'autorisation

Articles Liés

Voir plus