如何在一個頁面上讓多個jQuery版本共存

如何在一個頁面上讓多個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代碼。

原文：如何在一個頁面上讓多個jQuery版本共存