首页 > 代码库 > jquery的noConflict问题

jquery的noConflict问题

这其实是个老问题了。 

首先, 我们要知道noConflict是干什么的。 

我们直接从源码开始:

var	// Map over jQuery in case of overwrite	_jQuery = window.jQuery,	// Map over the $ in case of overwrite	_$ = window.$;jQuery.noConflict = function( deep ) {	if ( window.$ === jQuery ) {		window.$ = _$;	}	if ( deep && window.jQuery === jQuery ) {		window.jQuery = _jQuery;	}	return jQuery;};

  

 

也就是说, jquery只干了一件事:

那就是备份$和jquery这两个变量。 

而当你调用noConflict的时候, 把它还原。 

并且把当前的jquery对象返回回去。 

 

默认情况下, 只还原$, 如果传入deep参数, 那么也还原jQuery。 

那么, 这个诡异的行为到底有什么作用呢?

 

这个问题就要从$的来历开始说起了。 

$来源于php

这是个合法的名字, 并且打起来方便

对于米国人来说, 还是钱的意思。

所以是个非常合适的短名字。

那么,问题来了(找蓝翔)

当jQuery开始盛行的时候, 还有一个类库:prototype.js

他也用$做选择器。

而很多网站已有的代码,也用$做选择器。

那时候的通常写法是这样:

var $ = document.getElementById

在这种大环境下, jQuery用$, 是个很不得人心的事情。 

那么jQuery又不想放弃这个优美的变量, 该怎么办好呢?

开发者想到了个办法,就是前面提到的noConflict, 

那么使用者只要这样就可以了:

1 load prototype.js

2 load jQuery.js

3 调用jQuery.noConflict方法。

OK, 现在$被还原了。 那么我如何用jQuery呢?

1 用jQuery, 不用$

2 使用noConflict的返回值。 大概这么写:

(function ($){    // code here})(jQuery.noConfilict());

  

这样在这个小空间里, 想怎么写怎么写。 

那么, 如果引入了两个jQuery,

比如说, 你用了jQuery1.2.6, 为了用新功能, 又加了jQuery1.4.6, 

这时候不只是$冲突, jQuery也冲突啊

于是就有了deep这个参数。

if ( deep && window.jQuery === jQuery ) {		window.jQuery = _jQuery;}

  

从这句就可以看的出, 如果deep为true, 那么连jQuery这个变量也会被还原掉。 

搞清楚了运行机制, deep参数以及返回值的意义

那么就不会对它的运行结果感到困惑了。 

jquery的noConflict问题