解决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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
纯JS实现轮播图
Feb 22 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
js实现碰撞检测
Jan 29 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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
Python入门篇之编程习惯与特点
2014/10/17 Python
详解Python的Django框架中的中间件
2015/07/24 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
修理厂厂长岗位职责
2014/01/30 职场文书
群众路线剖析材料
2014/02/02 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
班组建设经验交流材料
2014/05/12 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
员工工作表现自我评价
2015/03/06 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
2016党员入党决心书
2015/09/22 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS