解决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的ajax请求全面了解
Mar 20 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
JS实现轮播图效果
Jan 11 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切割页面div内容的实现代码分享
2012/07/31 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
python中rb含义理解
2020/06/18 Python
HTML5未来发展趋势
2016/02/01 HTML / CSS
介绍一下常见的木马种类
2014/11/15 面试题
打架检讨书100字
2014/01/08 职场文书
高一学生期末评语
2014/04/25 职场文书
庆国庆活动总结
2014/08/28 职场文书
会计师事务所实习证明
2014/11/16 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
趣味运动会赞词
2015/07/22 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
html粘性页脚的具体使用
2022/01/18 HTML / CSS
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技