解决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 版本的文本输入框检查器Input Check
Jul 09 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
js实现简单数字变动效果
Nov 06 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
ES6中的类(Class)示例详解
Dec 09 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中使用灵巧的体系结构
2006/10/09 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
List Installed Hot Fixes
2007/06/12 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
原生JS实现网络彩票投注效果
2016/09/25 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
新郎结婚保证书
2015/02/26 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
导游词之无锡梅园
2019/11/28 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
详解NodeJS模块化
2021/06/15 NodeJs
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android