jquery插件冲突(jquery.noconflict)解决方法分享
许多的 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>
&nnbsp; <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>