jquery中的noConflict机制

jQuery中的noConflict机制

一直以来,自己对jQuery的源码研究是中断而又重新再继续,发现自己缺乏好的习惯和坚持,以后对这方面能力还是要多加培养。

现在来谈下对jQuery对于多个版本的jquery和同时引用$引起的冲突的处理。其实,对于jQueryAPI比较熟悉的jser应该比较熟悉$.noConflict()。现在让我们看下这个方法的源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var _jQuery = window.jQuery, //版本冲突
_$ = window.$; //首先把命名空间$(并不是jQuery)保存到一个临时变量中
jQuery.extend({
noConflict: function(depp) {
if (window.$ === jQuery) {
window.$ = _$; //此时把$命名控制权交给同命名的其他js库
}
if (deep && window.$ === jQuery) {
window.jQuery = _jQuery; //此时把jQuery命名控制权交给同命名的其他js库
}
return jQuery;
}
});

再来看上面所说的参数设定问题,如果 deep 没有设置,_$ 覆盖 window.$,此时 jQuery 别名 $ 失效,但 jQuery 本身完好无损。如果有其他类库或代码重新定义了 $ 变量,它的控制权就完全交接出去了。反之如果 deep 设置为 true 的话,_jQuery 覆盖 window.jQuery,此时 $ 和 jQuery 都将失效。

这种操作的好处是,不管是框架混用还是 jQuery 多版本共存这种高度冲突的执行环境,由于 noConflict 方法提供的移交机制,以及本身返回未被覆盖的 jQuery 对象,完全能够通过变量映射的方式解决冲突。

启发
当我们自己设计js小库的时候,我们也可以根据这个理论来设计我们自己的noConflict机制。