jQuery_jqueryのnoconflict関数の実装原理の分解

jQuery では、noconflict は変数の競合を防ぎ、変数の制御を解放するために使用される重要なメソッドです。 jQuery が $ と jQuery という 2 つのグローバル変数を外部に提供することはわかっていますが、jQuery は 2 つのグローバル変数しか生成しないため、競合はまれに発生します。ただし、Web ページにさらに多くのクラス ライブラリが含まれている場合は、自動的に競合が発生します。 $ を定義する場合、または jQuery グローバル変数が存在する場合に発生します。

jQuery が提供する noconflict 関数は、$ であれ jQuery での競合であれ、変数の競合問題をうまく解決します。次に、jQuery の競合処理を分析してみましょう。

まず、jQuery ソース コードでの noconflict の実装を見てみましょう。

(function(window,undefined){
var 
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
jQuery.extend({
noConflict: function( deep ){
 if ( window.$ === jQuery ) {
 window.$ = _$;
 }
 if ( deep && window.jQuery === jQuery ) {
 window.jQuery = _jQuery;
 }
 return jQuery;
}
})
}(window)

ここで、jQuery.extend は、静的プロパティを拡張する jQuery のメソッドです。これは、noConflict メソッドを jQuery に直接アタッチしているとみなすことができます。無名関数内で、内部変数 _jQuery と _$ をそれぞれ定義して window.jQuery と window.$ を保存します。これは、jQuery が実行される前に内部変数を使用してこれら 2 つのグローバル変数の状態を保存することです。これら 2 つの変数は、後で衝突防止操作で復元されます。 noConflict は、2 つの変数 $ と jQuery の間の競合を処理できます。true パラメーターが渡された場合、jQuery の競合が処理されます。
window.$ === jQuery は、グローバル変数が jQuery と等しいかどうかを判断するために使用されます。等しい場合、グローバル変数 $ は、jQuery が実行される前の変数 (内部変数 _$ に格納されます) に復元されます。 window.jQuery === jQuery 深い競合処理が有効で、グローバル変数 jQuery が内部 jQuery と等しい場合、グローバル jQuery は以前の状態に復元されます。 window.$ === jQuery と window.jQuery=jQuery を判断することの重要性は、次のコードのように、定義された変数が上書きされないように保護することです。

//引入jQuery库
var $="String";
var jq=jQuery.noconflict();
var jQuery="This is a line";
var j=jq.noconflict(true);
console.log($);//这里如果没有window.$===jQuery这句判断，那么$将会等于undefined而不是"String"。
console.log(jQuery); //同上，如果没有判断window.jQuery===jQuery，重新定义的jQuery就会被undefined覆盖。

全体の操作プロセスは次の図に示されています:

noConflict は jQuery ライブラリ内の jQuery コンストラクターを返します。$!

のように使用します。