解决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 相关文章推荐
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
js的延迟执行问题分析
Jun 23 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
JS代码实现页面切换效果
Jan 10 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将向Java靠拢
2006/10/09 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
python对DICOM图像的读取方法详解
2017/07/17 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
基于python3的socket聊天编程
2020/02/17 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
python Timer 类使用介绍
2020/12/28 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
Sony C++笔试题
2013/03/10 面试题
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
写演讲稿要注意的六件事
2014/01/14 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
给老婆的道歉信
2015/01/20 职场文书
2015年预算员工作总结
2015/05/14 职场文书