Jquery ライブラリと他のライブラリ間の $naming の競合を解決する方法

まず、jquery では $ (ドル記号) が jquery のエイリアスであることを知っておく必要があります。これは、多くの場合、名前空間を設定する場合、$ (ドル記号) は jquery を使用することと同じであることを意味します。この $ 競合が発生します。たとえば、$('#xmlas') と JQuery('#xmlas') の書き方は異なりますが、実際には完全に同等です。

この競合を解決する最も簡単な方法は、別の名前を付けるか、実行中のコードに別の名前空間であると認識させることです。

1. 他のライブラリの前に jQuery ライブラリをインポートし、次のような jQuery (コールバック) メソッドを直接使用します。

コードをコピー コードは次のとおりです。 🎜> テスト---プロトタイプ

テスト---jQuery

jQuery(function(){ //jQuery を直接使用します。「jQuery.noConflict()」関数を呼び出す必要はありません。 jQuery ("p" ).click(function(){ alert( jQuery(this).text() ); }); });

$("pp").style.display = 'none'; //プロトタイプを使用

2. 他のライブラリの後に jQuery ライブラリをインポートし、jQuery.noConflict() メソッドを使用して変数 $ の制御を他のライブラリに転送します。

コードをコピー コードは次のとおりです: jQuery.noConflict(); //変数 $ の制御をprototype.js jQuery(function(){ //jQueryを使用 jQuery("p").click(function( ){ alert( jQuery(this).text() ); }); });

$("pp").style.display = 'none' //プロトタイプを使用

;

コード 2

コードをコピー コードは次のとおりです: var $j = jQuery.noConflict(); //短いショートカットをカスタマイズします $j(function(){ //jQuery を使用します $j("p").click(function) (){ alert( $j(this).text() ); }); });

$("pp").style.display = 'none' //プロトタイプを使用

コード 3

コードをコピー コードは次のとおりです: jQuery.noConflict(); //変数$の制御をprototype.jsに移す jQuery(function($){ //jQueryを使用 $("p").click(function) (){ // $ メソッドの使用を継続します alert( $(this).text() ); }); });

$("pp").style.display = 'none' //プロトタイプを使用

コード 4

コードをコピー コードは次のとおりです: jQuery.noConflict(); //変数$の制御をprototype.jsに移す (function($){ //匿名関数を定義し、仮パラメータを$ $( function( ){ //匿名関数内の $ は jQuery $("p").click(function(){ //引き続き $ メソッドを使用します alert($(this).text( )); }); }); })(jQuery); //匿名関数を実行し、実際のパラメータ jQuery を渡します。 $("pp").style.display = 'none' //プロトタイプを使用 /************************************************* *******************/

jQuery(document).ready(function(){ //ページが読み込まれるとすぐに権限を放棄します jQuery.noConflict(); } );

上記の方法に加えて、2 番目の方法を使用して競合の問題を解決することもできます。これは最も愚かですが最も効果的な解決策です。つまり、カスタム名前空間を使用して競合を回避します。 たとえば、必要なプロジェクト名が xmlas の場合、元のコードは次のようになります:

コードをコピー コードは次のとおりです: $('contentArea').show() は次の形式で記述できます:

コードをコピー コードは次のとおりです。 XMLAS('contentArea').show( )

3. jquery コードでは、競合が発生した場合に $ 記号を使用できます。そのためには、ready イベントに次のコードを追加する必要があります。

コードをコピーします コードは次のとおりです。 jQuery(document).ready(function( $) { //ここでは安心して $ を使用できます }); もちろん、次の形式で省略することもできます:

コードをコピー

コードは次のとおりです。 jQuery(function($){ // これは $ } を使用したコードです

ここから、最初の方法に従って実装された完全なコードは次のようになります:

コードをコピー

コードは次のとおりです: //jquery ライブラリ間の競合に対する完全な解決策およびその他のライブラリ &lt ;/script> $.noConflict(); //$ を使用した jQuery コード }); //他の JS ライブラリ コードは次のとおりです

もちろん、上記の完全なコードを簡略化することもできます。簡略化されたコードは次のとおりです。 コードをコピーします

コードは次のとおりです: //簡略化されたコード $.noConflict()(function(){ //$ }を使用した jquery コードは次のとおりです。 🎜>//他のライブラリのコードは次のとおりです