jquery noConflict详解

Posted 2020-08-06 codeing or artist ?

noConflict是防止其他库也用了$作为全局变量而引起的冲突，我们看看jquery是怎么做的

首先jquery在代码的开始部分定义了2个私有变量：

_jQuery = window.jQuery

_$ = window.$

然后jquery提供了noConflict方法：

 1 noConflict: function( deep ) {
 2         if ( window.$ === jQuery ) {
 3             window.$ = _$;
 4         }
 5 
 6         if ( deep && window.jQuery === jQuery ) {
 7             window.jQuery = _jQuery;
 8         }
 9 
10         return jQuery;
11     },

我们平时是这样用的：

<script src="jquery.js"></script>

<script>

  $(‘div‘); 

</script>

这种情况_jQuery和_$都是undefined。

 

当引入了其他库：

<script src="jquery.js"></script>

var JQ = $.noConflict();

var $ = 123;//假设123是其他库

JQ(function(){

　　alert($); //123

});

这种情况_jQuery和_$都是undefined。我们看源码可以知道$.noConflict()返回了JQuery对象，所以此时JQ就是JQuery对象，jquery放弃了$。

 

再看一种情况：

var $ = 123;//假设123是其他库

<script src="jquery.js"></script>

var JQ = $.noConflict();

JQ(function(){

　　alert($); //123

});

$在引入jquery库之前被引入了，此时_$就是$ = 123，然后在noConflict函数中再把_$赋值给window.$

如果引入的其他框架变量为JQuery就要这样用：

var JQuery = 123;//假设123是其他库

<script src="jquery.js"></script>

var JQ = $.noConflict(true); //加了一个参数，看源码就明白啦

JQ(function(){

　　alert(JQuery); //123

});