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 相关文章推荐
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 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
PHP 字符串操作入门教程
2006/12/06 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
PHP防CC攻击实现代码
2011/12/29 PHP
php通过字符串调用函数示例
2014/03/02 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
TensorFlow的权值更新方法
2018/06/14 Python
Python3解释器知识点总结
2019/02/19 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
公司庆典活动邀请函
2014/01/09 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python