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 相关文章推荐
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
vue生命周期实例小结
Aug 15 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
将中国标准时间转换成标准格式的代码
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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
javascript new 需不需要继续使用
2009/07/02 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
javascript 节点排序 2
2011/01/31 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
JS仿Base.js实现的继承示例
2017/04/07 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
Django中反向生成models.py的实例讲解
2018/05/30 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
Python接口测试get请求过程详解
2020/02/28 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
企划经理的岗位职责
2013/11/17 职场文书
手工社团活动方案
2014/02/17 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
城管年度个人总结
2015/02/28 职场文书
看雷锋电影观后感
2015/06/10 职场文书
员工给公司的建议书
2019/06/24 职场文书
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js