首页 > 代码库 > jquery noConflict详解

jquery noConflict详解

2024-08-11 18:53:37   221人阅读

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="http://www.mamicode.com/jquery.js"></script><script>  $(‘div‘); </script>


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

 

当引入了其他库：

<script src="http://www.mamicode.com/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="http://www.mamicode.com/jquery.js"></script>var JQ = $.noConflict();JQ(function(){　　alert($); //123});

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

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

var JQuery = 123;//假设123是其他库<script src="http://www.mamicode.com/jquery.js"></script>var JQ = $.noConflict(true); //加了一个参数，看源码就明白啦JQ(function(){　　alert(JQuery); //123});

 

jquery noConflict详解


联系
我们