首頁 > web前端 > js教程 > 多個jQuery版本共存的處理方案_jquery

多個jQuery版本共存的處理方案_jquery

WBOY
發布: 2016-05-16 16:09:08
原創
1110 人瀏覽過

如何在一個頁面上讓多個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><br />       // 現在window.$和window.jQuery是1.11版本:<br />       console.log($().jquery); // => '1.11.0'<br />       var $jq = jQuery.noConflict(true);<br />       // 現在window.$和window.jQuery恢復成1.5版本:<br />       console.log($().jquery); // => '1.5.0'<br />       // 可以透過$jq存取1.11版本的jQuery了<br />    </script>
  

在myscript.js中,用$jq就可以存取1.11版本的jQuery了。

至此,問題解決。

但是,引入兩個版本的jQuery後,頁面被搞得亂七八糟。如果有人看不懂程式碼,把var $jq = jQuery.noConflict(true);刪掉了怎麼辦?或者,把導入jQuery的兩行互換了位置,最後就不會得到正確的jQuery版本。

最好的方法是不要改動頁面,直接引用我們寫的新的js檔案:

複製程式碼 程式碼如下:

  
  

這樣一來,我們就在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程式碼。

以上所述就是本文的全部內容了,希望大家能夠喜歡。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板