许多JavaScript库使用 $ 作为函数或变量名,jQuery也一样。
在jQuery中,$ 仅仅是jQuery的别名,因此即使不使用 $ 也能保证所有功能性。假如我们需要使用jQuery之外的另一JavaScript库,我们可以通过调用 $.noConflict() 向该库返回控制权。
jQuery源码如下:
//保存可能存在的jQuery和$的变量
_jQuery = window.jQuery,
_$ = window.$,
...
noConflict: function( deep ) {
if ( window.$ === jQuery ) {
window.$ = _$;
}
// deep参数是一个布尔值如果为true则释放jQuery
if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
}
//返回jQuery,可以起一个别名来使用jQuery
return jQuery;
},
原理如下:
通过一开始保存全局变量的window.jQuery以及windw.$,当需要处理冲突的时候,调用静态方法noConflict(),让出变量的控制权。
$.noConflict();$就不再是jQuery的别名
$.noConflict(true);加上参数,jQuery也被释放出来了
用法一:创建一个新的别名用以在接下来的库中使用 jQuery 对象
var j = jQuery.noConflict();
// 基于 jQuery 的代码
j("div p").hide();
// 基于其他库的 $() 代码
用法二:与 .ready() 方法结合使用,不需要为 jQuery 对象起别名
$.noConflict();
jQuery(document).ready(function($) {
// 使用 jQuery $ 的代码
});
// 使用其他库的 $ 的代码
用法三:恢复使用别名 $
jQuery.noConflict();
//在这个函数中,原来的 $ 对象是无效的。但是在这个函数的作用域中仍然将 $ 作为 jQuery 的别名来使用
(function($) {
$(function() {
// 使用 $ 作为 jQuery 别名的代码
});
})(jQuery);
// 其他用 $ 作为别名的库的代码