解决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 相关文章推荐
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
JavaScript手风琴页面制作
May 17 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
javascript使用canvas实现饼状图效果
Sep 08 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设计模式 php实现合成模式(composite)
2015/12/08 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
用javascript实现点击链接弹出"图片另存为"而不是直接打开
2007/08/15 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
python speech模块的使用方法
2020/09/09 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
品管员岗位职责
2013/11/10 职场文书
培训主管的岗位职责
2013/11/23 职场文书
社区工作者先进事迹
2014/01/18 职场文书
实习生岗位职责
2014/04/12 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
面试必备的求职信
2014/05/25 职场文书
市场督导岗位职责
2015/04/10 职场文书
乒乓球比赛通知
2015/04/27 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL