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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
深入理解node.js http模块
Jan 24 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 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
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
python将文本转换成图片输出的方法
2015/04/28 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
python实现自动化上线脚本的示例
2019/07/01 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
python pygame实现球球大作战
2019/11/25 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
高校十八大报告感想
2014/01/27 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
教研活动总结
2014/04/28 职场文书
市级文明单位申报材料
2014/05/07 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android