多个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的offset、client、scroll使用方法详解
Dec 25 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
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获取汉字的拼音(全部与首字母)
2013/06/27 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
Python线程创建和终止实例代码
2018/01/20 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
Python如何访问字符串中的值
2020/02/09 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
美国网上订购鲜花:FTD
2016/09/23 全球购物
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
119消防日活动总结
2014/08/29 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
Ruby处理CSV数据方法详解
2022/04/18 Ruby