我所理解的jQuery(3)--jQuery的构建

在开始正文之前,我想说明一个问题,也在在 拙作 我所理解的jQuery(2) 中网友的 讨论的话题--很多人认为 jQuery是一个"JavaScript框架". 对于这个观点,我表示不能苟同,仔细翻阅我的文章1和文章2,我一直都没有提到过"框架"这个概念;并且我又到官方站点jQuery.com上,仔细收索了一遍,从头到尾,也是没有发现他们在使用Framework这个字眼,同时还在其首页非常重要的位置发现了如下一句话"jQuery is a new kind of JavaScript Library."--没错,笔者自始至终地认为 jQuery是一种非常不错的JavaScript类库,正像官方宣言的那样.

国学认为"无极生太极，太极生两仪，两仪生四象，四象生八卦，八卦生六十四卦",这个世界首先是一片混沌,然后有了"太极",然后由"太极"再逐渐演变成世间万物.那么我们讨论jQuery也从其"太极"--构建的方式说起.

在jQuery代码的最开始

jQuery = window.jQuery = window.$ = function(selector, context) {
        return new jQuery.fn.init(selector, context);
    }

这样定义了一个名称为jQuery的function,同时将这个function赋给window的成员window.jQuery和window.$. 请注意 这个function将会作为一个普通的方法(关于function的作用:普通方法/类型构造器 的辨析请参考笔者的第一片文章)(当然这个function也会作为类型使用,不过目前其是作为普通方法使用,关于jQuery这个function的辨析,请看本文最后的附文),暴露出来,让Web程序员在开发时调用,这个也是我们使用 jQuery的入口点,如下:

$(document).doSomething();

$("#mySpan").doSomething();

等.

在这个方法体内,我们看到其 通过new关键字构造了一个 jQuery.fn.init类型的实例.那么我们就逐步解读jQuery原型对象内的这个类型(因为jQuery.fn=jQuery.prototype,所以我们说这是一个原型对象内的类型).

jQuery的原型对象定义的比较长(在1.3版本中,从25行一直到525行,共计500行),原型内的init()方法,也不算太短.

1.这个方法有两个参数 一个是选择器对象,一个选择器所在的环境(即在DOM的哪个部分去 查找这个选择器对象).不过我们开发人员使用的时候很少传递第二个参数(如果不传递第二参数,其会默认为document,即在整个文档内查找).

2.方法体内首先判断 是否给这个方法传入了相应 选择器对象

selector = selector || document;

通过这样确保selector对象是存在的--如果没有通过参数传入selector,那么就把document作为selector,这也就是我们看到很多介绍jQuery入门的文章提到几种使用jQuery选择器中的一种方式,即$()就代表$(document). (不知道大家是否真的理解了JavaScript中的操作符"||","&&"以及"!",你看一下本文的附注2,也许能有点好处.)

 

[******非常抱歉本来还有很多内容,但鉴于时间的关系,这个内容没有写完**************]

[****因为临时有事,同时本系列文章,可能也通过这种方式还在才刚刚开始的时候就忽然的终结,对关注这系列的朋友,sorry**********]

 

附1:关于jQuery 这个"关键字"的辨析

在jQuery的代码逻辑中,jQuery这几个字母,其在不同地方使用,是指代不同的角色的.

a.一个普通方法.在我们日常开发中,使用jQuery(或者$) 选择页面元素的时候($("#mySpan")), jQuery他就是一个普通的方法,这个在正文中也提及.

b.一个类型实例.本来这个function是一个普通方法,但是这个方法内部 return了一个new后的对象,因此,jQuery也表示一个对象实例.(其实更准确的说jQuery表示的是jQuery.fn.init这个类型的实例,因为我们看到在这个function内通过new关键字 操作的就是jQuery.fn.init这个类型,但是后面的代码中,又有这么一句jQuery.fn.init.prototype = jQuery.fn,即把jQuery的原型对象赋给了jQuery.fn.init的原型对象,因此我们就可以近似的认为 这个function返回的就是jQuery的类型实例了)

c.一个类型.正像 第一片文章中说的那样,任何function都会有两个角色.因此这个地方 jQuery也是类型.我们很多地方 使用了 如下这样的方式 $.doSomething(),那么其实是把jQuery做为类型在使用了,我们这样使用($.doSomething()),其实是使用了这个类型的静态方法.

jQuery究竟是代表一个 普通方法,还是一个类型,抑或是 一个类型实例,这个还要看具体使用的环境,也只有当我们能完全清楚了jQuery在其上下文中充当的角色后,我们才能更容易理解jQuery的代码逻辑.

附注2:也许是你不知道的JavaScript的操作符的用法

a.操作符"||". 如果对几个对象同时进行"||"操作的时候,JavaScript首先将这些对象 转换成 true和false,然后在进行"||", 这个很重要. 那么什么对象转换成true,什么对象转换成false呢? 首先关键字true和false会进行本义的转换这个没有问题. 接着如果一个对象 是存在的(不是undefined,不是null),那么这个对象就会转成true,否则就为false. 在同时进行&&操作的几个对象进行计算的时候,顺序从左到右,碰到第一为true的对象后,就把这个对象 返回(把剩下还没有判断的对象忽略).返回的时候,不是返回true或者false,而是返回这个对象自身,如下:

(function(passedObj) {
            var existedObj = {};
            var validObject = null ||false ||passedObj || "validString" || existedObj;
            alert(validObject);
        })();

(其中passedObj是一个 "需要"传入的参数,实际调用的时候,并没有传入,因此其必定为undefined)

那么其将会弹出 第一为true的对象,即 validString.

b.操作符 "&&" 道理亦然.只是碰到第一为 false的对象返回,同时忽略剩下还没有判断的对象.

c.操作符"!" 这就简单了,将要判断的对象 转成 true或false后,然后取反.其返回的是true或false.