jQuery noConflict() メソッド

どうしてページ上でjQueryと他のフレームワークを同時に使用するか?

jQueryと他のJavaScriptフレームワーク

ご存知の通り、jQueryは$シンボルを使用してjQueryのショートカットとしています。

他の JavaScript フレームワークも $ シンボルをショートカットとして使用している場合どうしますか?

他のいくつかの JavaScript フレームワークには:MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman そして Ext JS があります。

一部のフレームワークも $ シンボルをショートカットとして使用しています(jQuery と同様に)(例えば、jQuery),あなたが使用している二つの異なるフレームワークが同じショートカットシンボルを使用している場合、スクリプトが停止する可能性があります。

jQuery のチームはこの問題を考慮し、noConflict() メソッドを実装しました。

jQuery noConflict() メソッド

noConflict() メソッドは $ イドゥアリティの制御を解放し、他のスクリプトがそれを使用できるようにします。

もちろん、完全な名前でショートカットを置き換えて jQuery を使用することもできます:

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在运行!");
  });
});

自分で試してみてください

あなた自身のショートカットを作成することもできます。noConflict() メソッドは jQuery のリファレンスを返し、それを変数に保存して後で使用することができます。この例を見てください:

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍在运行!");
  });
});

自分で試してみてください

あなたの jQuery コードブロックが $ ショートカットを使用していて、そのショートカットを変更したくない場合は、$ シンボルを変数として ready メソッドに渡すことができます。そうすることで、関数内で $ シンボルを使用できます - 関数外では、"jQuery"を使用する必要があります:

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍在运行!");
  });
});

自分で試してみてください

jQuery 核心リファレンスマニュアル

完全な jQuery 核心メソッドの概要を取得するには、私たちの jQuery 核心リファレンスマニュアル