jquery noConflict详解

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

});
原文地址:https://www.cnblogs.com/gongshunkai/p/5833645.html