現在jQuery用的還多嗎？同個頁面，多個jQuery版本如何共存？

光明與黑暗共存

簡要說明：為何需要在一個頁面上，讓多個版本的 jQuery 共存呢？比如 jquery-1.5 與 jquery1.12；即使解決了共存問題了，但是代碼頁面亂七八糟的，又該怎麼辦？

直接引用最新版本的不行嗎？答案肯定是不行的，簡單舉個例子：

如果你當前站點引用的是 1.5 版本的 jQuery 以及相關的一些插件；如果直接將 jQuery 升級到最新版本，很大部分不兼容插件會出錯，甚至直接停止工作；如此，只能將這些插件也全部升級，或者等各個插件的作者發佈支持最新版 jQuery 的版本。

jQuery

方法就是通過 jQuery 的 noConflict() 方法來讓多版本共存

當我們引入 jQuery 時，jQuery 向 window 這個全局空間注入兩個變量

<code>window.$ = window.jQuery = {jQuery object}/<code>

同時，jQuery 內部保留舊的 window.$ 和 window.jQuery 對象的引用，當我們調用：var $jq = $.noConflict(); 時，window.$ 被恢復，但 window.jQuery 仍然是 jQuery；而當我們調用：var $jq = $.noConflict(true); 時，window.$ 和 window.jQuery 都被恢復了，一切看起來就像 jQuery 從未被引入過一樣，只不過可以通過變量 $jq 來使用jQuery，所以讓多版本共存，可以這樣實現。

JavaScript

<code>

/<code>

現在在 my-script.js 中，用 $jq 可以訪問 1.12.0 版本的 jQuery 了；

但是，伴隨的問題又來了，同一個頁面引入兩個版本的 jQuery 後，頁面變得亂七八糟，如果有人將 var $jq = jQuery.noConflict(true) 刪除了，怎麼辦？又或者，將兩個版本的jQuery，調換了位置，導致最後得不到正確的 jQuery 版本；最好的辦法就是：不改動頁面，直接引用我們自己編寫的新的Js文件：

<code>
/<code>

這樣一來，我們就可以直接在新的Js文件內部引入最新版本的 jQuery 了，而頁面上無論有沒有 jQuery，有什麼版本的 jQuery，我們都不關心；

my-script.js 如下所示 ( 用匿名函數是個好習慣，不汙染全局變量，同時杜絕外部代碼的訪問 )

<code>// begin jQuery v1.12.2
(function() {
!function(a,b) {
    "object" == typeof module && "object" == typeof module.exports
        ? module.exports = a.document ? b(a, !0) : function(a) {
            if(!a.document) throw new Error("jQuery requires a window with a document");
            // ...
        }
    var $ = jQuery.noConflict(true);
})();/<code> 

直接將最新版本嵌入即可 ( 當然得是壓縮後的代碼 )，最後加一句：var $ = jQuery.noConflict(true);

注：$ 是一個局部變量，在後面的代碼中，可以隨時引用這個 $，跟頁面上其它版本的 jQuery 的全局變量 $ 不是一個對象

閱讀更多 MIITVIP前端成長之路 的文章

關鍵字: jQuery 同個 JavaScript