首页 > 代码库 > 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问题