jquery库与其他库（比如prototype）冲突的解决方法

前端开发很容易会遇到jQuery库与其他库冲突的场景，比如和prototype库冲突。

实际上这种冲突是因为不同的第三方JS库争夺对$标识符的控制权引起的。

解决方法，就是使用jQuery提供的jQuery.noConflict()方法，释放$标识符的控制，使其他的脚本可以使用$标识符而不会引起冲突。

更多的，jQuery.noConfilict()方法可以返回对jQuery的引用，可以将这个返回的引用存放到变量中，就可以使用这个变量来调用jQuery库提供的方法或对象。

同一个页面的jQuery多个版本冲突

<!-- 引入1.6.4版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script> var jq164 = jQuery.noConflict(true); </script>
<!-- 引入1.4.2版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script> var jq142 = jQuery.noConflict(true); </script>

<script>
(function($) {
    // 此时的$是jQuery-1.6.4
    $('#');
})(jq164);
</script>
 
<script>
jq142(function($) {
    // 此时的$是jQuery-1.4.2
    $('#');
});
</script>

jQuery库在其他库之后导入引发冲突

1.通过jQuery的全限定名替代$简写来使用jQuery

<script src="prototype.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>

<p id="pp">test---prototype</p>
<p>test---jQuery</p>

<script type="text/javascript">
jQuery.noConflict(); // 将变量$的控制权让渡给prototype.js，全名可以不调用。
jQuery(function() { // 使用jQuery
    jQuery("p").click(function() {
        alert(jQuery(this).text() );
    });
});
// 此处不可以再写成$，此时的$代表prototype.js中定义的$符号

$("pp").style.display = 'none';        //使用prototype
</script>

2.自定义一个快捷方法（别名）

<script type="text/javascript">
var $j = jQuery.noConflict();  // 自定义一个比较短的快捷方式
$j(function() { // 使用jQuery
    $j("p").click(function() {
        alert( $j(this).text() );
    });
});

$("pp").style.display = 'none'; // 使用prototype
</script>

3.将$符号作为参数传到函数内部

<script type="text/javascript">
jQuery.noConflict(); // 将$符号的控制权让渡给prototype.js
jQuery(document).ready(function($) {
    $("p").click(function() { // 继续使用$符号
        alert( $(this).text());
    });
});
// 或者如下
jQuery(function($) { // 使用jQuery
    $("p").click(function() { // 继续使用$符号
        alert( $(this).text() );
    });
});
</script>

<script type="text/javascript">
jQuery.noConflict(); // 将$符号的控制权让渡给prototype.js
(function($) { // 定义匿名函数并设置形参为$
    $(function() { // 匿名函数内部的$均为jQuery
        $("p").click(function() { // 继续使用 $ 方法
            alert($(this).text());
        });
    });
})(jQuery); // 执行匿名函数且传递实参jQuery

$("pp").style.display = 'none'; // 使用prototype
</script>

jQuery库在其他库之前导入引发冲突

jQuery库在其他库之前导入，$的归属权默认归最后面的JavaScript库所有。那么可以直接使用【jQuery】来做一些jQuery的工作。

同时，可以使用$()方法作为其他库的快捷方式，也无须调用jQuery.noConflict()函数。

<!-- 引入 jQuery  -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!-- 引入 prototype  -->
<script src="lib/prototype.js" type="text/javascript"></script>

<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>

<script type="text/javascript">
jQuery(function() { // 直接使用jQuery,没有必要调用"jQuery.noConflict()"函数
    jQuery("p").click(function(){      
        alert(jQuery(this).text() );
    });
});

$("pp").style.display = 'none'; // 使用prototype
</script>
</body>

jQuery.noConflict()的原理

通过查看源码就能知道这个方法的原理。

var
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,

// Map over the $ in case of overwrite
_$ = window.$,

jQuery.extend({
    noConflict: function(deep) {
            if (window.$ === jQuery) {
                window.$ = _$;
            }
            if (deep && window.jQuery === jQuery) {
                window.jQuery = _jQuery;
            }
            return jQuery;
        }
});

首先，在jQuery加载的时候，通过事先声明的_jQuery变量获取到当前window.jQuery，通过_$获取到当前window.$。

然后，通过jQuery.extend()把noConflict挂载到jQuery下面。所以我们在调用的时候都是jQuery.noConflict()这样调。

然后，在调用noConflict()时做了2个判断。第一个if判断把$的控制权交了出去；第二个if判断则在noConflict()传参的时候把jQuery的控制权交了出去。

最后，noConflict()返回jQuery对象，用哪个参数接收，哪个参数将拥有jQuery的控制权。

"我不知道自己到底在执着什么，我只是知道，我一直都在为难自己。"

jquery库与其他库（比如prototype）冲突的解决方法

猜你喜欢