解决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为iframe的body添加click事件的实现代码
Apr 07 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
js实现简单的随机点名器
Sep 17 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
PHP编程与应用
2006/10/09 PHP
php join函数应用
2011/05/04 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
Python环境管理virtualenv&virtualenvwrapper的配置详解
2020/07/01 Python
使用django自带的user做外键的方法
2020/11/30 Python
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
工作中个人的自我评价
2013/12/31 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
班级心理活动总结
2014/07/04 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
推广普通话主题班会
2015/08/17 职场文书
python实现A*寻路算法
2021/06/13 Python
Python List remove()实例用法详解
2021/08/02 Python