當前位置:編程學習大全網 - 源碼下載 - 如何在壹個頁面上讓多個jQuery版本***存

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

  • 上一篇:Wpf列表視圖問題。如何將鼠標移動到listview中的壹行,該行中的button屬性變為可見。
  • 下一篇:淘寶為什麽能突然冒出店主?
  • copyright 2024編程學習大全網