视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
多个jQuery版本共存的处理方案_jquery
2020-11-27 21:35:42 责编:小采
文档


如何在一个页面上让多个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可以这样实现:

代码如下:



// 现在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了


在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代码。

以上所述就是本文的全部内容了,希望大家能够喜欢。

下载本文
显示全文
专题