解决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 相关文章推荐
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
js实现音乐播放控制条
Sep 09 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 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/12/05 PHP
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
JScript的条件编译
2007/05/29 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
js模拟微博发布消息
2017/02/23 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
python解析文件示例
2014/01/23 Python
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
python中join()方法介绍
2018/10/11 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
Python 字符串池化的前提
2020/07/03 Python
面向对象编程的优势是什么
2015/12/17 面试题
中式面点餐厅创业计划书
2014/01/29 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
运动会广播稿100字
2015/08/19 职场文书
golang import自定义包方式
2021/04/29 Golang
python 中yaml文件用法大全
2021/07/04 Python