多个jQuery版本共存的处理方案


Posted in Javascript onMarch 17, 2015

如何在一个页面上让多个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代码。

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

Javascript 相关文章推荐
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
javascript实现yield的方法
Nov 06 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
js中的闭包实例展示
Nov 01 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 #Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 #Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 #Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 #Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 #Javascript
jQuery实现预加载图片的方法
Mar 17 #Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 #Javascript
You might like
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
jQuery中:lt选择器用法实例
2014/12/29 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
python django 实现验证码的功能实例代码
2017/05/18 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
语文教育专业应届生求职信
2013/11/23 职场文书
村捐赠仪式答谢词
2014/01/21 职场文书
现金出纳岗位职责
2014/03/15 职场文书
文艺演出策划方案
2014/06/07 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年老干部工作总结
2015/04/23 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书