解决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中的有名函数和无名函数
Oct 17 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
JsonServer安装及启动过程图解
Feb 28 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 数组使用详解 推荐
2011/06/02 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
JS 文件大小判断的实现代码
2010/04/07 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
Python操作CouchDB数据库简单示例
2015/03/10 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
numpy中矩阵合并的实例
2018/06/15 Python
基于python中theano库的线性回归
2018/08/31 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
Vrbo英国:预订度假屋
2020/08/19 全球购物
大学生物业管理求职信
2013/10/24 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
英文商务邀请信
2014/01/22 职场文书
展会邀请函范文
2014/01/26 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书