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

jQuery ライブラリでは、ほぼすべてのプラグインがその名前空間に制限されています。一般に、グローバル オブジェクトは jQuery 名前空間に適切に保存されるため、jQuery ライブラリを他の js ライブラリ (Prototype、MooTools、または YUI) と使用するときに競合は発生しません。

注: デフォルトでは、jQuery は独自のショートカットとして「$」を使用します。

私たちが使用している他の JavaScript ライブラリも "$" をショートカットとして使用している場合、このとき jQuery と他のライブラリの間の競合を解決するにはどうすればよいでしょうか?

1. jQueryライブラリは他のライブラリの後にインポートされます

(1) "$"の代わりに"jQuery"の完全な名前を使用します

他のライブラリとjQueryライブラリがロードされた後、jQueryを呼び出すことができますnoConflict() 関数はいつでも変数 $ の制御を他の JavaScript ライブラリに渡します。

例:

//...省略其他代码
<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>

これで、プログラム内で jQuery() 関数を jQuery オブジェクト製造ファクトリーとして使用できます。

(2) カスタムショートカット

jq、$j などの代替名をカスタマイズできます。例:

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

(3) 他のライブラリと競合せずに $ を使用する

これらの代替名を jQuery 用にカスタマイズしたくない場合は、他のライブラリの $() メソッドに関係なく $ を使用することもできます。他のライブラリと競合したくない場合は、次の 2 つの解決策を使用できます。

1 つ目:

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

2 つ目:

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

これは、最小限のコード変更で完全な互換性を実現する最も理想的な 方法です。

2. jQuery ライブラリは他のライブラリより前にインポートされます

jQuery ライブラリが他のライブラリよりも先にインポートされた場合、$() のコントロールはデフォルトで後でインポートされる JavaScript ライブラリに属します。 「jQuery」を直接使用して何らかの作業を行うことができます。同時に、$() メソッドを他のライブラリへのショートカットとして使用できます。ここで jQuery.noConflict() 関数を呼び出す必要はありません。例:

りー

以上がjQueryと他のライブラリ間の競合を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。