jQuery.noConflict()_jquery を 3 分で説明します。

jQuery は最も広く使用されているフロントエンド フレームワークの 1 つであり、これに基づいて多数のサードパーティ ライブラリやプラグインが開発されています。グローバルな名前空間の汚染を避けるために、jQuery は変数の競合を解決する jQuery.noConflict() メソッドを提供します。この方法は間違いなく非常に効果的です。残念ながら、jQuery の公式ドキュメントではこのメソッドについて十分に明確に説明されておらず、多くの開発者は jQuery.noConflict() を呼び出したときに正確に何が起こるかを理解していないため、使用時に多くの問題が発生します。それにもかかわらず、jQuery.noConflict() の背後にある実装原則は、Web 開発者が学習して習得する価値があり、グローバルな名前空間汚染などの問題を解決する強力なツールになる可能性があります。

jQuery.noConflict() の役割は何ですか?

jQuery.noConflict() は 1 つの目的のためにのみ存在します。これにより、同じページに複数の jQuery インスタンス、特に異なるバージョンの jQuery をロードできるようになります。なぜ 1 つのページで複数の異なるバージョンの jQuery オブジェクトをロード/使用する必要があるのか​​と疑問に思われるかもしれません。一般的に、2 つの状況があります。 1 番目のケースでは、ビジネス コードは最新バージョンの jQuery ライブラリを使用し、選択したサードパーティ プラグインは以前のバージョンの jQuery ライブラリに依存しています。2 番目のケースでは、既に存在するシステムを保守しています。ビジネス さまざまな理由により、コードは古いバージョンの jQuery ライブラリを参照しており、新しく開発されたモジュールは他のバージョンの jQuery ライブラリを使用しています。いずれの場合も、jQuery オブジェクト/メソッドの競合の問題に直面する必要があります。幸いなことに、jQuery.noConflict() はこの問題の解決に役立ちます。

jQuery が読み込まれるとどうなりますか?

jQuery がページによって参照/ロードされると、jQuery は自己実行関数 (匿名関数) にカプセル化され、それが提供するすべての変数、関数、オブジェクトは、匿名関数内の実行可能環境と外部環境内にあります。グローバル名前空間汚染を防ぐために呼び出すことはできません。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

jQuery は、匿名関数内で jQuery と $ という 2 つのグローバル オブジェクトを定義し、それ自体を外部環境に公開します。開発者が使用するさまざまなパブリック メソッド (jQuery.ajax()、jQuery.css() など) には、これら 2 つのオブジェクトを通じてアクセスします。最初は、それらは匿名関数内の同じオブジェクト jQuery (プライベート変数) を指しており、これを通じて匿名関数内のプライベート変数と関数にアクセスします。これにより、匿名関数の内部プライベート変数と関数は、実行後もメモリ内に残り、JavaScript ガベージ コレクション メカニズムによってクリアされなくなります。

window.jQuery = window.$ = jQuery; 

jQuery がページによってロードされるとき、現在のページにはすでに 2 つのグローバル変数 jQuery と $ が含まれている可能性があります (たとえば、他のサードパーティ ライブラリがロードされ、それらも内部的に定義されています)。これにより、既存のオブジェクトが上書きされます (グローバルな名前空間汚染)。この問題を解決するために、jQuery は既存のグローバル変数を内部的にキャッシュし、後続の呼び出しのためにプライベート変数 _jQuery および _$ に保存します。したがって、jQuery ライブラリがページにロードされたときに jQuery オブジェクトと $ オブジェクトがまだ存在しない場合、_jQuery と _$ は両方とも未定義になります。それ以外の場合は、既存の jQuery と $ への参照が保存されます (おそらくサードパーティからのもの)。以前に参照したライブラリ) または別のバージョンの jQuery ライブラリ)。その後、jQuery はこれら 2 つのグローバル変数を上書きし、上記のように自身を外部環境に公開します。この時点で、ページ上のグローバル変数 jQuery と $ は、導入したばかりの jQuery ライブラリを指しています。

// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
// Otherwise expose jQuery to the global object as usual
window.jQuery = window.$ = jQuery; 

jQuery.noConflict() の魔法の効果?

あなたが保守しているシステムがすでに jQuery ライブラリ バージョン 1.7.0 を参照しており、新しく追加された関数で jQuery ライブラリ バージョン 1.10.2 を参照しているとします。それでは、jQuery 1.7.0 を再利用したり、両方のバージョンの jQuery ライブラリを同時に使用したりする方法はあるのでしょうか?答えは「はい」です、それは jQuery.noConflict() です。実際、jQuery.noConflict() を使用すると、グローバル変数 jQuery と $ を以前に参照したオブジェクトに即座にリダイレクトできます。すごいですよね？これが、jQuery がそれ自体を外部に公開する前に、以前に参照したオブジェクトを内部的にキャッシュする理由です。

jQuery.noConflict() はオプションのブール値パラメーターを受け入れます。通常、デフォルト値は false です。このパラメータはどのような影響を与えるのでしょうか?実際、それはとても簡単です。 jQuery.noConflict() または jQuery.noConflict(false) が呼び出された場合、グローバル変数 $ のみが以前の参照値にリセットされます。jQuery.noConflict() または jQuery.noConflict(true) が呼び出された場合、グローバル変数$ は以前の参照値にリセットされます。jQuery と $ は両方とも以前の参照値にリセットされます。これは非常に重要なので、覚えておくことをお勧めします。 jQuery.noConflict(false/true) を呼び出すと、現在の jQuery インスタンスが返されます。この機能を使用して、jQuery の名前を変更できます。

// "Renaming" jQuery
var jayquery = jQuery.noConflict( true );
// Now we can call things like jayquery.ajax(), jayquery.css(), and so on

別のコード スニペットを見て、魔法の noConflict() を本当に理解しているかどうかをテストしてみましょう

<!-- jQuery and $ are undefined -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- jQuery and $ now point to jQuery 1.10.2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
<!-- jQuery and $ now point to jQuery 1.7.0 -->
<script>jQuery.noConflict();</script>
<!-- jQuery still points to jQuery 1.7.0; $ now points to jQuery 1.10.2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
<!-- jQuery and $ now point to jQuery 1.6.4 -->
<script>var jquery164 = jQuery.noConflict( true );</script>
<!-- jQuery now points to jQuery 1.7.0; $ now points to jQuery 1.10.2; jquery164 points to jQuery 1.6.4 --> 

避免第三方库的冲突

以上的代码片段展示了如何解决多版本jQuery的冲突。接下来，我们尝试解决jQuery库和第三方库的冲突，下面出现的代码片段在jQuery的官方文档中都有，有兴趣的程序猿可以仔细阅读官方文档体会其中的区别。

直接使用No-Conflict模式

使用No-Conflict模式，其实就是对jQuery进行重命名，再调用。

<!-- 采用no-conflict模式，jquery.js在prototype.js之后被引入. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// $j 引用了jQuery对象本身.
$j(document).ready(function() {
$j( "div" ).hide();
});
// $ 被重新指向prototype.js里定义的对象
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
var mainDiv = $( "main" );
}
</script> 

使用自执行函数封装

使用这种方式，你可以在匿名函数内部继续使用标准的$对象，这也是众多jQuery插件采用的方法。需要注意的是，使用这种方法，函数内部无法再使用prototype.js定义的$对象了。

<!-- jquery.js在prototype.js之后被引入. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
(function( $ ) {
// Your jQuery code here, using the $
})( jQuery );
</script> 

使用标准jQuery(document).ready()函数

如果jQuery库在其它库之前引入，那么jQuery内部定义的jQuery和$会被第三方库覆盖，这时候再使用noConflict()已经没有什么意义了。解决的方法很简单，直接使用jQuery的标准调用方式。

<!-- jquery.js在prototype.js之前被引入. -->
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
// Use full jQuery function name to reference jQuery.
jQuery( document ).ready(function() {
jQuery( "div" ).hide();
});
// 或者
jQuery(function($){
// Your jQuery code here, using the $
});
// Use the $ variable as defined in prototype.js
window.onload = function() {
var mainDiv = $( "main" );
};
</script>

下面给大家介绍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 仍在运行！");
});
});