解决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 相关文章推荐
jQuery 技巧小结
Apr 02 Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
jQuery事件对象总结
Oct 17 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
js函数和this用法实例分析
Mar 13 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
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
smtp邮件发送一例
2006/10/09 PHP
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
你必须知道的Javascript知识点之"this指针"的应用
2013/04/23 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
小程序接口的promise化的实现方法
2019/12/11 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
python使用7z解压apk包的方法
2015/04/18 Python
解读Python编程中的命名空间与作用域
2015/10/16 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
大一军训感言
2014/01/09 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
语文课外活动总结
2014/08/27 职场文书
民主评议党员工作总结
2014/10/20 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python