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参数以及返回值的意义

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