上两篇说过,query的核心是一个jQuery工厂。其代码如下
function( window, noGlobal ) {
var jQuery = function( selector, context ) {//首先定义一个内部jQuery。注意,此jQuery只是一个工厂内部的变量,并非我们在外面引用的那个jQuery或$
return new jQuery.fn.init( selector, context );
};
/*然后,对这个内部jQuery对象进行各种增强、扩展*/
jQuery.fn = jQuery.prototype = {
//...
};
jQuery.extend = jQuery.fn.extend = function() {
//...
};
var init = jQuery.fn.init = function( selector, context, root ) {
//...
};
init.prototype = jQuery.fn;
jQuery.extend({
//...
});
jQuery.fn.extend({
//...
});
if ( !noGlobal ) {//最后,将内部jQuery赋给了外部,即我们所熟知的那个“$”
window.jQuery = window.$ = jQuery;
}
return jQuery;
}
其实目前来讲,最难理解的就是这个:
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
};
感觉怎么将孙子赋给了爷爷?究竟是先有鸡还是先有蛋的问题?
其实呢,应该是这么看:
//只是先定义了一个函数而已,还没有执行,无所谓先有鸡还是先有蛋
var jQuery = function( selector, context ) {
……
};
好吧,第二点疑惑,为啥要new jQuery.fn.init( selector, context );这么个实例赋给jQuery?
是因为,new给jQuery,这样调用jQuery的时候,就不用再new了,简洁一点。
function( window, noGlobal ) {
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
};
……
if ( !noGlobal ) {
window.jQuery = window.$ = jQuery;
}
return jQuery;
}
由上代码可知,jQuery 已经是一个 new 出来的对象。如此,我们在使用jQuery的时候,就没有new这一步了,直接就是$.或者$(““)这样来使用。
往下看,有:
jQuery.fn = jQuery.prototype = {
//...
};
为啥这样写呢?有什么玄妙?或者纯粹就是为了装逼?还真是,将原型prototype赋给fn,就是一种简写,不用写成”prototype”这么长。
第四个疑惑:
jQuery.fn = jQuery.prototype = {
//...
};
jQuery.extend = jQuery.fn.extend = function() {
//...
};
jQuery.extend({
//...
});
jQuery.fn.extend({
//...
});
jQuery.extend和jQuery.fn.extend有啥不一样?
当然不一样了。jQuery.extend扩展(顾名思义)的是实例,而jQuery.fn.extend扩展的是原型。扩展实例,作用仅限于实例;扩展原型,却可以惠及所有实例。扩展原型,可以节省内存。慢着,jQuery不是只有一个实例吗?
不是的,
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
};
jQuery随同参数不同,是有许多个实例的。比如,$(“div”) 和 $(“#div1”)是两个不同的实例。
疑惑五:
var init = jQuery.fn.init = function( selector, context, root ) {
//...
};
init.prototype = jQuery.fn;
为什么要把jQuery的原型(jQuery.fn)覆盖它孙子(jQuery.fn.init)的原型?
答曰,因为不这么写的话,jQuery将用不上jQuery.fn,一系列的原型扩展:jQuery.fn.extend()都白费了。为啥呢,因为
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
};
意味着当这个函数真正被执行以后,jQuery将被它孙子的实例所替换,所以必须在定义阶段,就要将扩展应用到孙子的原型中。那么,为啥不直接扩展孙子的原型呢,非要扩展爷爷的原型,然后覆盖孙子的原型,再然后构造孙子实例赋给爷爷?真他妈绕啊。搞来搞去,可能就是为了简洁,和显得有点可读性吧?你看,孙子的名字叫做init。