Comment résoudre les conflits entre jQuery et d'autres bibliothèques

Dans la bibliothèque jQuery, presque tous les plugins sont limités à son espace de noms. Généralement, les objets globaux sont bien stockés dans l'espace de noms jQuery, il n'y aura donc aucun conflit lors de l'utilisation de la bibliothèque jQuery avec d'autres bibliothèques js (Prototype, MooTools ou YUI).

Remarque : Par défaut, jQuery utilise "$" comme son propre raccourci.

Lorsque d'autres bibliothèques JavaScript que nous utilisons utilisent également "$" comme raccourci, comment résoudre le conflit entre jQuery et d'autres bibliothèques à ce stade ?

1. Importez la bibliothèque jQuery après d'autres bibliothèques

(1) Utilisez le nom complet de "jQuery" au lieu de "$"

Une fois les autres bibliothèques et la bibliothèque jQuery chargées, la fonction jQuery.noConflict() peut être appelée à tout moment pour transférer le contrôle de la variable $ vers d'autres bibliothèques JavaScript.

Exemple :

//...省略其他代码
<p id="pp">Text-prototype(将被隐藏)</p>
<p>Text-jQuery(将被绑定单击事件)</p>
<!-- 引入prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script>
    jQuery.noConflict();                 //将变量$的控制权让渡给prototype.js
    jQuery(function(){                   //使用jQuery
        jQuery("p").click(function(){
            alert( jQuery(this).text() );
        })
})
$("pp").style.display = &#39;none&#39;;          //使用prototype隐藏元素
</script>

Ensuite, vous pouvez utiliser la fonction jQuery() comme usine de fabrication d'objets jQuery dans le programme.

(2) Raccourci personnalisé

Des noms alternatifs peuvent être personnalisés, tels que jq, $j, etc. Exemple :

var $j = jQuery.noConflict();        //自定义一个快捷方式
$j(function(){                       //使用jQuery,利用自定义快捷方式——$j
    $j("p").click(function(){
        alert( $j(this).text() );
    })
})
$("pp").style.display = 'none';      //使用prototype.js隐藏元素

(3) Utilisez $ sans entrer en conflit avec d'autres bibliothèques

Si vous ne souhaitez pas personnaliser ces noms alternatifs pour jQuery, vous souhaitez toujours utiliser $ Quelle que soit la méthode $() des autres bibliothèques, et en même temps ne voulez pas entrer en conflit avec d'autres bibliothèques, vous pouvez utiliser les deux solutions suivantes.

L'un :

jQuery.noConflict();                 //将变量$的控制权让渡给prototype.js
jQuery(function($){                  //使用jQuery设定页面加载时执行的函数
    $("p").click(function(){         //在函数内部继续使用 $()方法
        alert( $(this).text() );
    })
})
$("pp").style.display = 'none';      //使用prototype

L'autre :

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

C'est la manière la plus idéale qui peut être obtenue en changeant le moins de code pour une compatibilité totale.

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

Si la bibliothèque jQuery est importée avant les autres bibliothèques, alors le contrôle de $() appartient à la bibliothèque JavaScript importée ultérieurement par défaut. Vous pouvez utiliser "jQuery" directement pour effectuer certains travaux. 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. Exemple :

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

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

<script>
jQuery(function(){                     //直接使用 jQuery ,无需调用"jQuery.noConflict()"函数
    jQuery("p").click(function(){      
        alert( jQuery(this).text() );
    });
});
$("pp").style.display = &#39;none&#39;;        //使用prototype
</script>

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!