解决jquery版本冲突的有效方法


Posted in Javascript onSeptember 02, 2014

用过jQuery的朋友都知道jQuery不同版本会引发冲突,本文就此问题提出有效的解决方案如下:

案例:解决jQuery1.3.2和1.4.2的冲突。(本例已测试通过!)

第一步:在1.4.2的源代码的最后加上一句 :

var $j4 = jQuery.noConflict(true);

之所以在源码这里加,而不是像大多数文章提的在要用到的时候加,这是因为很多基于1.4.2的插件都要加,在这里加可以避免过多插件加这句代码导致重复。这一句是将1.4.2的jQuery和$的引用权限全部放弃。也就是基于1.4.2的插件不能再用jQuery和$了。同时给予$j4的新的命名空间,注意它是window的属性。看1.4.2的源代码会发现它其实也就执行了这两句:

window.$=_$;
window.jQuery=_jQuery;

道理同window.$=_temp$(返还命名空间)只是命名不同而已。

第二步:在基于1.4.2的框架的所有插件的头部加上以下代码:

var _temp$ = window.$,_tempjQuery = window.jQuery;

将jQuery1.3.2的$和jQuery放到临时的变量空间上:

window.$ = $j4;

这句和下面的那句都是为了给中间的代码能够正确使用jQuery和$用的。后面的$j4是赋予他们正确的引用。

window.jQuery = $j4;

之所以要先放临时变量存储,有三点必须这样做的理由:

①.我们不希望改动大量的jQuery插件源代码,最好是不动,即使改的话,尽量改的少。而在头部尾部加改动代码,中间的原始代码不动也是不错的一种方式。

②.因为1.4.2的已经放弃了jQuery和$的控制权,但是已有的插件代码又用了他们来做引用,因为插件不可能预知冲突,即使有冲突他人开发的插件也一定要用$或者jQuery引用,除非它不是jQuery下的插件。

③.为了防止插件里面直接用window.$和window.jQuery进行引用从而导致引用到1.3.2的jQuery和$,虽然这种情况比较少,但是以防万一。

中间的原始代码不动,尾部加以下代码:

window.$ = _temp$;//将$的引用权限返还给jQuery1.3.
window.jQuery = _tempjQuery;//将jQuery的引用权限返还给jQuery1.3.

第三步:以后要用基于jQuery1.4.2的选取函数就只能用$j4(element)了。

总结:到目前为止可行方案:jQuery1.4.2完全放弃$和jQuery的控制权限。1.3.2放弃$的控制权限但不放弃jQuery的权限,其实jQuery也可放弃,只不过要给个别名$j3。prototype最好放在jQuery1.3.2后面,它获得$的控制权限。只是以后要用jQuery1.4.2就必须用$j4来引用了。但这样即使有再多的jQuery框架版本冲突问题,也全部解决掉了。假如来了个1.2的jQuery怎么办,参照(2)的执行步骤,只不过第一步改为:

var $j2 = jQuery.noConflict(true);

第三步用$j2(element)罢了。道理都是相同的。

相信本文所述对大家的jQuery程序设计有一定的借鉴价值。

Javascript 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
XENON基于JSON变种
Jul 27 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 #Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 #Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 #Javascript
理解javascript中的回调函数(callback)
Sep 02 #Javascript
详解js闭包
Sep 02 #Javascript
jquery delay()介绍及使用指南
Sep 02 #Javascript
使用jquery实现放大镜效果
Sep 02 #Javascript
You might like
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
python实现电子书翻页小程序
2019/07/23 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
用Python 执行cmd命令
2020/12/18 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
室内设计自我鉴定
2013/10/15 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
爱护公物标语
2014/06/24 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
工作态度检讨书范文
2015/05/06 职场文书
解除租赁合同协议书
2016/03/21 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
如何在Python项目中引入日志
2021/05/31 Python