如何實現多個版本的jQuery庫共存的情況

在實際應用中可能需要多個jQuery版本庫共存的情況。

可能很多朋友不理解為什麼要這樣，直接用最新的庫版本不就可以了。

雖然上面的提議很完美，但是實際應用中可能會後期維護或者修改一些網站的功能，如果直接使用新版本，那麼可能老版本實現的功能就無法使用，所以理想和現實還是很有差距的，下面就介紹一下如何實現共存。方法是通過jQuery的noConflict()來讓多版本共存。

當我們匯入jQuery時，jQuery僅向window這個全域性空間注入兩個變數:

[JavaScript] 純文字檢視 複製程式碼
window.$ = window.jQuery = { jQuery object };

同時，jQuery內部保留舊的window.$和window.jQuery物件的引用。當我們呼叫:

[JavaScript] 純文字檢視 複製程式碼
var $jq = $.noConflict();

window.$被恢復，但window.jQuery仍是jQuery。

當我們呼叫:

[JavaScript] 純文字檢視 複製程式碼
var $jq = $.noConflict(true);

window.$和window.jQuery都被恢復了，一切看起來就像jQuery從未被匯入過一樣，只不過可以通過變數$jq來使用jQuery。

所以，讓新舊版本共存的jQuery可以這樣實現:

[HTML] 純文字檢視 複製程式碼
<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檔案：

[HTML] 純文字檢視 複製程式碼
<script src="jquery-1.5.js"></script>
<script src="myscript.js"></script>

這樣一來，就在myscript.js內部引用最新版jQuery，而頁面無論有沒有jQuery，有哪個版本的jQuery，都不關心。

開始編寫新的更好的解決方案。首先，把myscript.js的主體確定下來:

[JavaScript] 純文字檢視 複製程式碼
// myscript.js
(function () {
  // BEGIN
  // TODO: javascript code here...
  // END
})();

用匿名函式是個好習慣，不汙染全域性變數，同時杜絕外部程式碼訪問。

下一步是直接把jQuery 1.11的程式碼嵌進去:

[JavaScript] 純文字檢視 複製程式碼
// 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行，然後加一句:

[JavaScript] 純文字檢視 複製程式碼
var $ = jQuery.noConflict(true);

注意到$是一個區域性變數，在後面的程式碼中，可以隨時引用這個$，跟頁面上其他版本的jQuery全域性變數$不是一個物件。

最後一步工作就是檢查jQuery的協議是否允許我們把jQuery原始碼直接嵌入我們自己的JavaScript程式碼。