解决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 Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
JavaScript的parseInt 取整使用
May 09 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
jquery获取tagName再进行判断
May 29 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
vue 实现把路由单独分离出来
Aug 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(8) php 数组
2010/03/05 PHP
openPNE常用方法分享
2011/11/29 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
nginx 设置多个站跨域
2021/03/09 Servers
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
Python selenium的基本使用方法分析
2019/12/21 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
高中体育教学反思
2014/01/29 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
奥利奥广告词
2014/03/20 职场文书
物业管理专业自荐信
2014/07/01 职场文书
讲党性心得体会
2014/09/03 职场文书