快捷導(dǎo)航

多個(gè)jQuery版本共存的處理方案

更新時(shí)間：2015年03月17日 11:05:23 投稿：hebedich

本文給大家分享的是一個(gè)經(jīng)常需要碰到的問(wèn)題的解決方案，如何才能讓一個(gè)頁(yè)面中同時(shí)存在多個(gè)jQuery呢，這就是今天我們需要探討的話題了。

如何在一個(gè)頁(yè)面上讓多個(gè)jQuery共存呢？比如jquery-1.5和jquery-1.11。

你可能會(huì)問(wèn)，為什么需要在一個(gè)頁(yè)面上讓多個(gè)jQuery共存？直接引用最新版本的jQuery不行嗎？

答案是，不行。因?yàn)楝F(xiàn)實(shí)生活是非常殘酷的。舉個(gè)栗子：

現(xiàn)有網(wǎng)站已經(jīng)引用了jQuery 1.5以及相關(guān)插件。如果直接將jQuery升級(jí)到最新版，這些插件就不工作了，除非你能把這些插件全部升級(jí)，或者等各個(gè)插件的作者發(fā)布支持最新版jQuery的版本。

現(xiàn)在，如果我們要基于jQuery開(kāi)發(fā)新的插件或者寫JavaScript代碼，用新版本會(huì)比較省時(shí)省力。

但舊版本又絕對(duì)不能扔掉，怎么辦？

方法是通過(guò)jQuery的noConflict()來(lái)讓多版本共存。

當(dāng)我們導(dǎo)入jQuery時(shí)，jQuery僅向window這個(gè)全局空間注入兩個(gè)變量：

復(fù)制代碼代碼如下:

window.$ = window.jQuery = { jQuery object };

同時(shí)，jQuery內(nèi)部保留舊的window.$和window.jQuery對(duì)象的引用。當(dāng)我們調(diào)用：

復(fù)制代碼代碼如下:

var $jq = $.noConflict();

window.$被恢復(fù)，但window.jQuery仍是jQuery。

當(dāng)我們調(diào)用：

復(fù)制代碼代碼如下:

var $jq = $.noConflict(true);

window.$和window.jQuery都被恢復(fù)了，一切看起來(lái)就像jQuery從未被導(dǎo)入過(guò)一樣，只不過(guò)可以通過(guò)變量$jq來(lái)使用jQuery。

所以，讓新舊版本共存的jQuery可以這樣實(shí)現(xiàn)：

復(fù)制代碼代碼如下:

   <script src="jquery-1.5.js"></script>

   <script src="jquery-1.11.js"></script>

   <script>

      // 現(xiàn)在window.$和window.jQuery是1.11版本:

      console.log($().jquery); // => '1.11.0'

      var $jq = jQuery.noConflict(true);

      // 現(xiàn)在window.$和window.jQuery被恢復(fù)成1.5版本:

      console.log($().jquery); // => '1.5.0'

      // 可以通過(guò)$jq訪問(wèn)1.11版本的jQuery了

   </script>

   <script src="myscript.js"></script>

在myscript.js中，用$jq就可以訪問(wèn)1.11版本的jQuery了。

至此，問(wèn)題解決。

但是，引入兩個(gè)版本的jQuery后，頁(yè)面被搞得亂七八糟。如果有人看不懂代碼，把var $jq = jQuery.noConflict(true);刪掉了怎么辦？或者，把導(dǎo)入jQuery的兩行互換了位置，最后就得不到正確的jQuery版本。

最好的辦法是不改動(dòng)頁(yè)面，直接引用我們編寫的新的js文件：

復(fù)制代碼代碼如下:

   <script src="jquery-1.5.js"></script>

   <script src="myscript.js"></script>

這樣一來(lái)，我們就在myscript.js內(nèi)部引用最新版jQuery，而頁(yè)面無(wú)論有沒(méi)有jQuery，有哪個(gè)版本的jQuery，我們都不關(guān)心。

開(kāi)始編寫新的更好的解決方案。首先，把myscript.js的主體確定下來(lái)：

復(fù)制代碼代碼如下:

   // myscript.js

   (function () {

      // BEGIN

      // TODO: javascript code here...

      // END

   })();

用匿名函數(shù)是個(gè)好習(xí)慣，不污染全局變量，同時(shí)杜絕外部代碼訪問(wèn)。

下一步是直接把jQuery 1.11的代碼嵌進(jìn)去：

復(fù)制代碼代碼如下:

   // 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

   })();

嵌入的當(dāng)然是壓縮后的代碼，一共3行，然后加一句：

復(fù)制代碼代碼如下:

var $ = jQuery.noConflict(true);

注意到$是一個(gè)局部變量，在后面的代碼中，可以隨時(shí)引用這個(gè)$，跟頁(yè)面上其他版本的jQuery全局變量$不是一個(gè)對(duì)象。

最后一步工作就是檢查jQuery的協(xié)議是否允許我們把jQuery源碼直接嵌入我們自己的JavaScript代碼。

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: