jquery插件冲突(jquery.noconflict)解决方法分享


Posted in Javascript onMarch 20, 2014

许多的 JS 框架类库都选择使用$符号作为函数或变量名,jQuery是其中最为典型的一个。在 jQuery 中,$ 符号只是 window.jQuery 对象的一个引用,因此即使 $ 被删除,window.jQuery 依然是保证整个类库完整性的坚强后盾。jQuery 的 API 设计充分考虑了多框架之间的引用冲突,我们可以使用 jQuery.noConflict 方法来轻松实现控制权的移交。

jQuery.noConflict 方法包含一个可选的布尔参数[1],用以决定移交 $ 引用的同时是否移交 jQuery 对象本身:

jQuery.noConflict([removeAll])

缺省情况下,执行 noConflict 会将变量 $ 的控制权移交给第一个产生 $ 的库;当 removeAll 设置为 true 时,执行 noConflict 则会将 $ 和 jQuery 对象本身的控制权全部移交给第一个产生他们的库。

例如在 KISSY 和 jQuery 混用,并且惯用 $ = KISSY 来简化 API 操作的时候,就能够通过这个方法解决命名冲突的问题。

那么这个机制是如何实现的呢?阅读 jQuery 源码开头[2],首先做的一件事情是这样的:

// Map over jQuery in case of overwrite
_jQuery = window.jQuery,// Map over the $ in case of overwrite
_$ = window.$,

容易理解的是,jQuery 通过两个私有变量映射了 window 环境下的 jQuery 和 $ 两个对象,以防止变量被强行覆盖。一旦 noConflict 方法被调用,则通过 _jQuery, _$, jQuery, $ 四者之间的差异,来决定控制权的移交方式,具体的代码如下:

noConflict: function( deep ) {
                if ( window.$ === jQuery ) {
                        window.$ = _$;
                }

                if ( deep && window.jQuery === jQuery ) {
                        window.jQuery = _jQuery;
                }

                return jQuery;
        }
再来看上面所说的参数设定问题,如果 deep 没有设置,_$ 覆盖 window.$,此时 jQuery 别名 $ 失效,但 jQuery 本身完好无损。如果有其他类库或代码重新定义了 $ 变量,它的控制权就完全交接出去了。反之如果 deep 设置为 true 的话,_jQuery 覆盖 window.jQuery,此时 $ 和 jQuery 都将失效。

这种操作的好处是,不管是框架混用还是 jQuery 多版本共存这种高度冲突的执行环境,由于 noConflict 方法提供的移交机制,以及本身返回未被覆盖的 jQuery 对象,完全能够通过变量映射的方式解决冲突。

但无法避免的事实是可能导致的插件失效等问题,当然通过简单修改上下文参数即可恢复 $ 别名:

var query = jQuery.noConflict(true);
(function ($) {
// 插件或其他形式的代码,也可以将参数设为 jQuery
})(query);

下面的示例一样是解决这个问题的

jQuery自诞生以来,版本越来越多,而且jQuery官网的新版本还在不断的更新和发布中,但是我们在以前的项目中就已经使用了旧版本的jQuery,比如已经出现的:1.3.X、1.4.X、1.5.X、1.6.2等等。

由于项目的需要,必然也需要不断的使用较新版的jQuery,但对于原来就已经存在并已经采用了的旧jQuery版本,我们如何让多个不同的jQuery版本在同一个页面并存而不冲突呢?

其实,利用jQuery.noConflict()特性,我们不仅可以让jQuery与其他的JS库并存,比如Prototype。也可以与jQuery本身的其他不同版本并存而不冲突。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>在同一个页面中加载多个不同的jQuery版本</title>
        <!-- 从谷歌服务器加载jQuery最新版本 -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
        <script type="text/javascript">
            var jQuery_New = $.noConflict(true);
        </script>
        <!-- 加载jQuery1.6.2版本 -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            var jQuery_1_6_2 = $.noConflict(true);
        </script>
        <!-- 加载jQuery1.5.2版本 -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script type="text/javascript">
            var jQuery_1_5_2 = $.noConflict(true);
        </script>
        <!-- 加载jQuery1.4.2版本 -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            var jQuery_1_4_2 = $.noConflict(true);
        </script>
        <!-- 加载jQuery1.3.2版本 -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            var jQuery_1_3_2 = $.noConflict(true);
        </script>
        <script type="text/javascript">
            alert(jQuery_New.fn.jquery);
            alert(jQuery_1_6_2.fn.jquery);
            alert(jQuery_1_5_2.fn.jquery);
            alert(jQuery_1_4_2.fn.jquery);
            alert(jQuery_1_3_2.fn.jquery);            jQuery_New(function($){$('<p>我是最新的'+$.fn.jquery+'版本添加进来的。</p>').appendTo('body');});
            jQuery_1_6_2(function($){$('<p>我是'+$.fn.jquery+'版本添加进来的。</p>').appendTo('body');});
            jQuery_1_5_2(function($){$('<p>我是'+$.fn.jquery+'版本添加进来的。</p>').appendTo('body');});
            jQuery_1_4_2(function($){$('<p>我是'+$.fn.jquery+'版本添加进来的。</p>').appendTo('body');});
            jQuery_1_3_2(function($){$('<p>我是'+$.fn.jquery+'版本添加进来的。</p>').appendTo('body');});
        </script>
    </head>
    <body>
        在同一个页面中加载多个不同的jQuery版本
        <br>
    </body>
</html>
Javascript 相关文章推荐
JQuery实现自定义对话框的代码
Jun 15 Javascript
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
JS 修改URL参数(实现代码)
Jul 08 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
使用js画图之画切线
Jan 12 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 #Javascript
如何将php数组或者对象传递给javascript
Mar 20 #Javascript
js 触发select onchange事件代码
Mar 20 #Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 #Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 #Javascript
$.each与$().each的区别示例介绍
Mar 20 #Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 #Javascript
You might like
php中http_build_query 的一个问题
2012/03/25 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
岗位职责范本
2013/11/23 职场文书
2014年销售员工作总结
2014/12/01 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
人与自然的观后感
2015/06/18 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang