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以及json基础使用说明
May 22 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
vue.js的提示组件
Mar 02 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 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
基于mysql的bbs设计(三)
2006/10/09 PHP
PHP面向对象编程快速入门
2006/12/14 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python实现基于权重的随机数2种方法
2015/04/28 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
Django返回HTML文件的实现方法
2020/09/17 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
C#面试问题
2016/07/29 面试题
心得体会怎么写
2013/12/30 职场文书
教师师德演讲稿
2014/05/06 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
教师个人成长总结
2015/02/11 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
使用CSS设置滚动条样式
2022/01/18 HTML / CSS