$.noConflict()方法實現防衝突原理介紹

antzone發表於2017-03-31

大家都知道使用$.noConflict()方法可以防止和其他的js類庫出現衝突的情況。

關於此方法的基本用法可以參閱jQuery.noConflict()方法一章節。

下面就就介紹一下它是如何實現防止衝突的原理,希望能夠給需要的朋友帶來一定的幫助。

如果其他js類庫也是用$或者jQuery那麼就會導致衝突,比如現在的prototype.js也是使用$的。

看jQuery原始碼(1.83版本)的開頭的宣告:

[JavaScript] 純文字檢視 複製程式碼
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
 
// Map over the $ in case of overwrite
_$ = window.$,

這個地方是一個很好的技巧,如果其他的類庫也是用jQuery或者$,那麼就將其暫存在區域性變數_jQuery和_$中,這樣就防止被覆蓋。

[JavaScript] 純文字檢視 複製程式碼
noConflict: function( deep ) {
  if ( window.$ === jQuery ) {
    window.$ = _$;
  }
  if ( deep && window.jQuery === jQuery ) {
    window.jQuery = _jQuery;
  }
  return jQuery;
}

上面的程式碼就是noConflict()方法的實現原始碼,下面做一下介紹。

當此方法沒有引數時候,就將_$賦值給window.$,這樣的話就將$的控制權讓渡給上一個js庫。

如果具有deep引數為true的時候,那麼連_jQuery賦值給window.jQuery,這樣的話就將jQuery的控制權讓渡給上一個庫。

也就是說當前jQuery庫已經不再能使用$或者$和jQuery都不能用。

相關文章