jQuery.noConflict()實現防衝突原理機制簡單介紹

螞蟻小編發表於2017-03-25
jQuery

大家知道使用jQuery.noConflict()方法可以實現$和jQuery控制權的讓渡功能，防止和其他同樣使用$或者jQuery庫衝突。

雖然很多朋友對它的使用比較熟練，但是對它的實現原理可能還不夠清楚，下面就簡單做一下介紹。

對於jQuery這樣的外掛想要知道原理沒有其他的辦法，只有看原始碼，就以jquery1.83作為例子做一下介紹。

實現原理:

看一段原始碼的截圖:

a:3:{s:3:\"pic\";s:43:\"portal/201703/25/124606ebdddd2dd12dzbss.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

這是jQuery比較靠前的程式碼，window.jQuery和window.$如果沒有其他庫定義的話，那麼它們的值就是undefined，如果有其他庫定義的話那麼就是其他庫相應物件的引用。將它們儲存在臨時變數_jQuery和_$中。

再來看一段原始碼截圖:

a:3:{s:3:\"pic\";s:43:\"portal/201703/25/124639hp8kfabt55pb1hqq.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是結尾處的程式碼，將window.jQuery和window.$重置為jQuery，這就是為什麼會導致衝突的原因。再來看一段程式碼截圖:

a:3:{s:3:\"pic\";s:43:\"portal/201703/25/124826gcjae83fct488cet.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面就是noConflict()方法的定義，是不是已經很明確了。

首先判斷window.$ === jQuery是否成立，如果成立說明，當前沒有進行讓渡，那麼執行window.$ = _$，這樣就實現了讓渡。

下面也是同樣的道理，就是講jQuery的控制權也讓渡出去了。最後返回jquery物件。

相關文章