解决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 相关文章推荐
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
js如何获取网页所有图片
May 12 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
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连接mysql数据库代码
2009/03/10 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
JavaScript中的this妙用实例分析
2020/05/09 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
详解python配置虚拟环境
2019/04/08 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
彪马英国官网:PUMA英国
2019/02/11 全球购物
安全生产管理合理化建议书
2014/03/12 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
婚庆司仪开场白
2015/05/29 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书