多个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系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 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
smarty section简介与用法分析
2008/10/03 PHP
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
react build 后打包发布总结
2018/08/24 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
Python实现网站文件的全备份和差异备份
2014/11/30 Python
python daemon守护进程实现
2016/08/27 Python
Django返回json数据用法示例
2016/09/18 Python
Python冲顶大会 快来答题!
2018/01/17 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
医学毕业生自荐信
2013/10/11 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
现场施工员岗位职责
2014/03/10 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
Python中request的基本使用解决乱码问题
2022/04/12 Python