多个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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 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
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
浅谈javascript中的作用域
2012/04/07 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
jquery中.add()的使用分析
2013/04/26 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
python 生成不重复的随机数的代码
2011/05/15 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
Django中提示消息messages的设置方式
2019/11/15 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
社区端午节活动方案
2014/01/28 职场文书
工地安全检查制度
2014/02/04 职场文书
机电专业求职信
2014/06/14 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python
详解Redis复制原理
2021/06/04 Redis
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
详解 TypeScript 枚举类型
2021/11/02 Javascript