jQuery は、jQuery の短縮形として $ 記号を使用します。
他の JavaScript フレームワークでも $ 記号が省略表現として使用されたらどうなるでしょうか?
その他の JavaScript フレームワークには、MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman、Ext JS などがあります。
これらのフレームワークの一部では、(jQuery と同様に) $ 記号を省略記号として使用します。同じ省略記号を使用している 2 つの異なるフレームワークを使用している場合、スクリプトの実行が停止する可能性があります。
jQuery チームはこの問題を考慮し、noConflict() メソッドを実装しました。
noConflict()
noConflict() の役割は 1 つの目的のみに存在します。同じページに複数の jQuery インスタンス、特に異なるバージョンの jQuery をロードできるようにします。なぜ 1 つのページで複数の異なるバージョンの jQuery オブジェクトをロード/使用する必要があるのかと疑問に思われるかもしれません。一般的に、2 つの状況があります。 1 番目のケースでは、ビジネス コードは最新バージョンの jQuery ライブラリを使用し、選択したサードパーティ プラグインは以前のバージョンの jQuery ライブラリに依存しています。2 番目のケースでは、既に存在するシステムを保守しています。ビジネス さまざまな理由により、コードは古いバージョンの jQuery ライブラリを参照しており、新しく開発されたモジュールは他のバージョンの jQuery ライブラリを使用しています。いずれの場合も、jQuery オブジェクト/メソッドの競合の問題に直面する必要があります。幸いなことに、jQuery.noConflict() はこの問題の解決に役立ちます。
jQuery noConflict() メソッド
noConflict() メソッドは $ 識別子の制御を解放し、他のスクリプトが $ 識別子を使用できるようにします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery在工作!");
});
});
</script>
</head>
<body>
<p>看我的变化</p>
<button>点我</button>
</body>
</html> jQuery の略称を正式名に置き換えて使用してください。
独自の略語を作成できます:
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
}); jQuery コード ブロックで $ 省略表現が使用されており、このショートカットを変更したくない場合は、$ 記号を変数として ready メソッドに渡すことができます。この方法では、関数内で $ 記号を使用できますが、関数の外では引き続き「jQuery」を使用する必要があります:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("这是覆盖的文字");
});
});
</script>
</head>
<body>
<p>这是一段文字</p>
<button>点击显示</button>
</body>
</html>
