解决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开发者都需要知道的5个小技巧
Jan 08 Javascript
jQuery 处理表单元素的代码
Feb 15 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
微信JS接口大全
Aug 25 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 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
Sublime里直接运行PHP配置方法
2014/11/28 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
php阳历转农历优化版
2016/08/08 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
python逐行读取文件内容的三种方法
2014/01/20 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
如何更优雅地写python代码
2019/07/02 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
Python中url标签使用知识点总结
2020/01/16 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
数据库什么时候应该被重组
2012/11/02 面试题
夜班门卫岗位职责
2013/12/09 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
本溪关门山导游词
2015/02/09 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android