jQuery - noConflict() メソッド
jQuery は、jQuery の短縮形として $ 記號(hào)を使用します。
他の JavaScript フレームワークでも $ 記號(hào)が省略表現(xiàn)として使用されたらどうなるでしょうか?
その他の JavaScript フレームワークには、MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman、Ext JS などがあります。
これらのフレームワークの一部では、(jQuery と同様に) $ 記號(hào)を省略記號(hào)として使用します。同じ省略記號(hào)を使用している 2 つの異なるフレームワークを使用している場合、スクリプトの実行が停止する可能性があります。
jQuery チームはこの問題を考慮し、noConflict() メソッドを?qū)g裝しました。
noConflict()
noConflict() の役割は 1 つの目的のみに存在します。同じページに複數(shù)の jQuery インスタンス、特に異なるバージョンの jQuery をロードできるようにします。なぜ 1 つのページで複數(shù)の異なるバージョンの jQuery オブジェクトをロード/使用する必要があるのか??と疑問に思われるかもしれません。一般的に、2 つの狀況があります。 1 番目のケースでは、ビジネス コードは最新バージョンの jQuery ライブラリを使用し、選択したサードパーティ プラグインは以前のバージョンの jQuery ライブラリに依存しています。2 番目のケースでは、既に存在するシステムを保守しています。ビジネス さまざまな理由により、コードは古いバージョンの jQuery ライブラリを參照しており、新しく開発されたモジュールは他のバージョンの jQuery ライブラリを使用しています。いずれの場合も、jQuery オブジェクト/メソッドの競合の問題に直面する必要があります。幸いなことに、jQuery.noConflict() はこの問題の解決に役立ちます。
jQuery noConflict() メソッド
noConflict() メソッドは $ 識(shí)別子の制御を解放し、他のスクリプトが $ 識(shí)別子を使用できるようにします。
<!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>點(diǎn)我</button>
</body>
</html>jQuery の略稱を正式名に置き換えて使用してください。
獨(dú)自の略語を作成できます:
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
});jQuery コード ブロックで $ 省略表現(xiàn)が使用されており、このショートカットを変更したくない場合は、$ 記號(hào)を変數(shù)として ready メソッドに渡すことができます。この方法では、関數(shù)內(nèi)で $ 記號(hào)を使用できますが、関數(shù)の外では引き続き「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>點(diǎn)擊顯示</button>
</body>
</html>
