多个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 开发中规范性的一点感想
Jun 23 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
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实现 上一篇、下一篇的代码
2012/09/29 PHP
php 保留字列表
2012/10/04 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
javascript 变量作用域 代码分析
2009/06/26 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
python自动化测试之setUp与tearDown实例
2014/09/28 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python脚本替换指定行实现步骤
2017/07/11 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
python 实现批量图片识别并翻译
2020/11/02 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
自我评价如何写好?
2014/01/05 职场文书
主办会计岗位职责
2014/03/13 职场文书
农村文化活动总结
2014/08/28 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
高中团支书竞选稿
2015/11/21 职场文书
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS