如何在一個頁面上讓多個jQuery共存呢?比如jquery-1.5和jquery-1.11。
你可能會問,為什麼需要在一個頁面上讓多個jQuery共存?直接引用最新版本的jQuery不行嗎?
答案是,不行。因為現實生活是非常殘酷的。舉個例子:
現有網站已經引用了jQuery 1.5以及相關外掛。如果直接將jQuery升級到最新版,這些外掛就不工作了,除非你能把這些外掛全部升級,或者等各個外掛的作者釋出支援最新版jQuery的版本。
現在,如果我們要基於jQuery開發新的外掛或者寫JavaScript程式碼,用新版本會比較省時省力。
但舊版本又絕對不能扔掉,怎麼辦?
方法是通過jQuery的noConflict()來讓多版本共存。
當我們匯入jQuery時,jQuery僅向window這個全域性空間注入兩個變數:
window.$ = window.jQuery = { jQuery object };
同時,jQuery內部保留舊的window.$和window.jQuery物件的引用。當我們呼叫:
var $jq = $.noConflict();
window.$被恢復,但window.jQuery仍是jQuery。
當我們呼叫:
var $jq = $.noConflict(true);
window.$和window.jQuery都被恢復了,一切看起來就像jQuery從未被匯入過一樣,只不過可以通過變數$jq來使用jQuery。
所以,讓新舊版本共存的jQuery可以這樣實現:
<script src="jquery-1.5.js"></script>
<script src="jquery-1.11.js"></script>
<script>
// 現在window.$和window.jQuery是1.11版本:
console.log($().jquery); // => `1.11.0`
var $jq = jQuery.noConflict(true);
// 現在window.$和window.jQuery被恢復成1.5版本:
console.log($().jquery); // => `1.5.0`
// 可以通過$jq訪問1.11版本的jQuery了
</script>
<script src="myscript.js"></script>
在myscript.js中,用$jq就可以訪問1.11版本的jQuery了。
至此,問題解決。
但是,引入兩個版本的jQuery後,頁面被搞得亂七八糟。如果有人看不懂程式碼,把var $jq = jQuery.noConflict(true);刪掉了怎麼辦?或者,把匯入jQuery的兩行互換了位置,最後就得不到正確的jQuery版本。
最好的辦法是不改動頁面,直接引用我們編寫的新的js檔案:
<script src="jquery-1.5.js"></script>
<script src="myscript.js"></script>
這樣一來,我們就在myscript.js內部引用最新版jQuery,而頁面無論有沒有jQuery,有哪個版本的jQuery,我們都不關心。
開始編寫新的更好的解決方案。首先,把myscript.js的主體確定下來:
// myscript.js
(function () {
// BEGIN
// TODO: javascript code here...
// END
})();
用匿名函式是個好習慣,不汙染全域性變數,同時杜絕外部程式碼訪問。
下一步是直接把jQuery 1.11的程式碼嵌進去:
// myscript.js
(function () {
// BEGIN
/*! jQuery v1.11.1 */
!function(a,b){"object"==typeof module&&"object"==typeof module.exports?...
if(k&&j[k]&&(e||j[k].data)||void 0!==d||"string"!=typeof b)return k||(k=...
},cur:function(){var a=Zb.propHooks[this.prop];return a&&a.get?a.get(thi...
var $ = jQuery.noConflict(true);
// TODO: javascript code here...
// END
})();
嵌入的當然是壓縮後的程式碼,一共3行,然後加一句:
var $ = jQuery.noConflict(true);
注意到$是一個區域性變數,在後面的程式碼中,可以隨時引用這個$,跟頁面上其他版本的jQuery全域性變數$不是一個物件。
最後一步工作就是檢查jQuery的協議是否允許我們把jQuery原始碼直接嵌入我們自己的JavaScript程式碼。