解决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 相关文章推荐
javascript 用原型继承来实现对象系统
Mar 22 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 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
杏林同学录(一)
2006/10/09 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
javascript求日期差的方法
2016/03/02 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
python根据出生日期获得年龄的方法
2015/03/31 Python
python web框架学习笔记
2016/05/03 Python
浅谈Python处理PDF的方法
2017/11/10 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
降低python版本的操作方法
2020/09/11 Python
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
动物学专业毕业生求职信
2013/10/11 职场文书
质量工程师岗位职责
2013/11/16 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
中学生演讲稿
2014/04/26 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
工作会议通知
2015/04/15 职场文书
Nginx安装配置详解
2022/06/25 Servers