ID #6536

Jquery源码分析---构建jQuery对象

2.1、jQuery的设计理念

使用jQuery之前,我们都会问jQuery是什么?jQuery是一个类库,和 prototype,mootools等类库一样,为Web的Js开发提供辅助功能。那为什么要选 用jQuery呢?在jQuery出现之前,Prototype,YUI都是很成熟的Js的框架,而且 是各有各的特点。为什么要抛弃它们,而使用后起之秀的jQuery,它有什么优秀 的特性吸引开发人员呢?

回答这个问题,我们得明白jQuery的设计理念。回忆或想象一下,我们在web 开发中是如何使用JS?绝大多数时间都是采用getElementById在Dom文档中找到 Dom元素,然后取值或设定值,采用innerHTML取其内容或设定其内容,或进行事 件的监听(如click),在控制样式方面,我们会进行height,width,display等的 改变,达到视觉上的效果,对于Ajax方面,也是取到数据在页面的某元素里面去 添充内容。

综之,我们就是在对Dom元素在进行操作。这个元素可能是一个或是多个。这 个元素可能是document,window或Dom元素。这样我们的任务就是二大部分,一 是找Dom元素,二是对Dom元素进行操作。

对于用得熟练一点,不管是采用如getElementById这样的直接查找方式还是 采用如Element.lastChild这类的间接查找方式不是很难的,对于Dom元素,Dom 的操作方面也是很丰富,也不是很难使用?那么要类库做什么用呢?最难的一个 问题就是浏览器的兼容的问题。所有的JS框架都要解决这一个问题,同时简化JS 的本身自带的操作。

Prototype可以说是开创了Js类库的先河,给我们耳目一新的感觉。它解决大 部分的浏览器的兼容的问题。同时简化了原始函数名长难于记忆的经常书写出的 错的问题(采用$(xx)代替getElementById),提供了Ajax的访问方式,扩展了 Array,Object,Function,Event等JS原生对象。

但是这些还是不能满足开发的需要,比如在Dom树中寻找dom元素,仅仅只能 是通过元素的ID,但是我们想要更方便的查找方法,同时还希望能有一个统一的 入口,不要太泛,学习曲线过高或难于使用。

Jquery就是从这里出发,把所有一切都统一在jQuery对象中。使用jQuery就 是使用jQuery对象。其实jQuery开创性的工作就是如其名一样:query。它强大 的查找功能令所有的框架都黯然失色。

jQuery实质就是一个查询器。在查询器的基础还提供对查找到的元素进行操 作的功能。这样说来jQuery就是查询和操作的统一。查询是入口,操作是结果。

jQuery在实现上也可以分成两大部分,一部分是jQuery的静态方法,也可以 称作实用方法或工具方法,通过jQuery.xxx()的jQuery命名空间直接引用。第二 部分是jQuery的实例方法,通过jQuery(xx)或$(xx)来生成jQuery实例,然后通 过这个实例来引用的方法。这部分的方法大多数是从采用静态方法代理来完成功 能。真正的功能性的操作都在jQuery的静态方法中实现。

这些功能细分起来,可以分成以下几个部分:

1、Selector,查找元素。这个查找不但包含基于CSS1~CSS3的CSS Selector 功能,还包含其对直接查找或间接查找而扩展的一些功能。

2、Dom元素的属性操作。Dom元素可以看作html的标签,对于属性的操作就是 对于标签的属性进行操作。这个属性操作包含增加,修改,删除,取值等。

3、Dom元素的CSS样式的操作。CSS是控制页面的显示的效果。对CSS的操作那 就得包含高度,宽度,display等这些常用的CSS的功能。

4、Ajax的操作。Ajax的功能就是异步从服务器取数据然后进行相关操作。

5、Event的操作。对Event的兼容做了统一的处理。

6、动画(Fx)的操作。可以看作是CSS样式上的扩展。

2.2、jQuery对象的构建

生成或构建一个jQuery对象其实就是构建并运行一个查询器(selector)。 既然是查询,肯定会查找的结果(Dom元素),之后才会有对这些结果进行操作 。那么这些查找的结果存放在哪里呢?最好的地方当然是这个jQuery对象内面。 查找的结果可能是一个元素,也有可以是多个元素如(NodeSet的集合的形式)。 也就是说jQuery对象内面有一个集合。这个集合存放查找到Dom元素。

但是上一小节所提到jQuery对象是所有操作的统一入口,那么它的构建就不 能只局限于从Dom文档中查找到Dom元素,还有可能是从别的集合中转移过来的 Dom元素,还有可能是从html的字符串生成的Dom元素。

在Jquery文档中提供了四种方式:jQuery(expression,[context]),jQuery (html),jQuery(elements),jQuery(callback)四种构寻jquery对象的方式。其 中jQuery可以用$代替。这四种是经常用到。其实Jquery的参数可以是任何的元 素,都能构成jquery对象。

举几个例子:

1、$($(“P”))可以看出其参数可以是jQuery对象或ArrayLike的 集合。

2、$()是$(document)的简写。

3、$(3)会把3放到jQuery对象中集合中。

对于如$(3)这样的其中元素(如ArrayLike集合的元素)不是Dom元素,最好 不要构建jQuery对象,jQuery对象的方法都是针对于dom对象的。不是很清楚其 使用的话,很有可能会导致错误。

上面讲了这么多,还是很难明白其原理的,现在从源码的角度细细分析:

通过jQuery(xxx)的调用实现没有生成对象,它的this是指向window对象的。 那么jQuery的那些实例方法是怎样继承过来的呢?看一下:

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

这是jquery的总的入口,jQuery对象实际上不是通过new jQuery()而继承 其prototype的中的方法。jQuery对象实际是jQuery.fn.init函数生成的对象。 在里我们可以看出对于jQuery.prototype添加一些函数集的对象的意义不大。因 为我们new jQuery()是可以的,但是生成的jQuery对象在return时会被抛弃。所 以最好不要用new jQuery()来构建jQuery对象。

jQuery对象其实就是new jQuery.fn.init。那么jQuery.fn.init.prototype 上就是挂着jQuery对象的操作方法。如

jQuery.fn.init.prototype = jQuery.fn;

有时间可能会担心在589行就实现了把jQuery.fn中的函数放到 jQuery.fn.init.prototype上去,那么之后的通过jquery.fn.extend的方法怎么 办呢?这里实际是对jQuery.fn的引用。在扩展jQuery的时候,只要把相关的函 数extend到jQuery.fn就可以了。

现在我们看一下jQuery.fn.init是怎么完成工作的:

init : function(selector, context) {
    selector = selector || document;// 确定selector存在
    // 第一种情况 Handle $(DOMElement)单个Dom 元素,忽略上下文
    if (selector.nodeType) {                       ②
      this[0] = selector;
      this.length = 1;
      return this;
    }   
    if (typeof selector == "string") {//selector为string       ③
      var match = quickExpr.exec(selector);    
      if (match && (match[1] || !context)) {
       if (match[1])// 第二种情况处理$(html) -> $(array)      ④
         selector = jQuery.clean([match[1]], context);
       else {// 第三种情况:HANDLE: $("#id")//处理 $("#id")
         var elem = document.getElementById(match[3]);
         if (elem) {
// IE会返回name=id的元素 ,如果是这样,就document.find(s)
if (elem.id != match[3])            ⑤
             return jQuery().find(selector);
            // 构建一个新的jQuery(elem)
           return jQuery(elem);               ⑥
         }
         selector = [];
       }
      } else                            
      // 第四种情况:处理$(expr, [context])==$(content).find (expr)
       return jQuery(context).find(selector);        ⑦
    } else if (jQuery.isFunction(selector))           ⑧   // 第五种情况:处理$(function)七Shortcut for document ready    
return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector);
// 第六种情况:处理$(elements)
return this.setArray(jQuery.makeArray(selector));          ⑨
  },

jQuery.fn.init负责对传进来的参数进行分析然后生成jQuery对象。它的第 一个参数一般来说是必须的(为空的话,就是默认的document)。从源码的角度 第一个参数有着如下四种类型:

类型 说明
Dom Element 第一个参数为Dom元素,第二个参数不用。直接把Dom元素存在 新生成的jQuery对象的集合中。返回这个jQuery对象。构建jQuery对象完成。
String 第一个参数为string有三种情况:1、html的标签字符串, $(html) -> $(array),第二个参数可选。  执行selector = jQuery.clean([match[1]], context);。该语句是把  hteml的字符串转换成 dom对象的数组。接着执行Array类型的返回。2、字符串为#id时$(id)  首先通 过var elem = document.getElementById(match[3]);取得elem,如没有取到 selector = [];转到执行Array类型的返回空集合jquery对象。  如找到elem, 通过return jQuery(elem);再次生成jquery对象,这次是Dom Element类型的 jquery对象的返回。3、兼容css1-3语法的selector字符串,第二个参数是可选 的。   执行return jQuery(context).find(selector);。该语句先执行 jQuery(context)。可以看出context第二参数可以是任意的值,可以是集合形式 。之后就通过find(selector)找到jQuery(context)中所有dom元素都满足 selector表达式的dom元素的集合,构建新的jquery对象,并返回。   #id其 实和这种方式是统一的,单独出来是为了提高性能。
Fn 第一参数是函数。第二个参数不用。是$(document).ready (fn)的简写,其return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector)是其执行的代码。这个语 句首先执行jQuery(document),它再一次newjQuery.fn.init函数,生成jQuery对 象(元素为document)。再调用这个对象的ready(fn)方法。Ready(fn)返回当前 对象。而上面的语句又是返回这个Ready(fn)的返回对象。可见这个$(fn)返回是 $(document)的对象。抛弃了第一次生成的$(fn)对象。 
Array 第一参数是除上面提到Dom元素,函数,string所有其它的类 型。可以为空如$()。第二个参数不用。语句:return this.setArray (jQuery.makeArray(selector));它首先是把第一个参数转换数组。Selector可 以是Array-like的集合,如jQuery对象,如getElementsByTag返回的Dom元素集 合等,可能支持$(this)。Selector还可能是单个任意的对象。转换成标准的数 组之后,执行 this.setArray把这个数组中的元素全部存到当前jquery对象的集 合中。之后返回当前的jquery对象。其实Dom Element完全可能综合在这里面, 单独拿起来为了提高性能。

从上面的代码和上表中,我们也可以看出构建jquery对象就是往jquery对象 的集合中添加元素(一般都应该是dom元素)。添加的元素有两种形式:

一是单个元素,可能通过直接的dom元素的传参形式,还可以通过#id从dom文 档中找元素。

二是集合,如jquery对象,还有数组,还有通过CSS Selector找到的Dom集合 等Array-Like。

上表仅仅是分析传入的参数的类型,它是怎么做呢?在⑤处它实现CSS1~CSS3 的兼容的Selector的查寻器的功能。通过jQuery().find(selector);来进行分析 String并查找到符合传入的Selector语法的Dom文档树中的元素集合。

在④处,它实现了把html的字符串转换成Dom元素节点的集合。这个是通过 jQuery.clean([match[1]], context);来实现的。

在⑧处,它实现DomReady的jQuery对象的统一入口,我们可以通过$(fn)要注 册domReady的监听函数。所有的调用jQuery实现的功能代码都应该在domReady之 后才运行。$(fn)是所有的应用开发中的功能代码的入口。它支持任意多的$(fn) 注册。其是通过return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector);来完成的。

找到元素之后就是构建集合了,在⑨处就是通过this.setArray (jQuery.makeArray(selector));来构建jquery对象内部的集合。


2011-07-01 18:55
阅读:
I'm VC , Just U know Y
本站部分文章来源于互联网,版权归原作者所有。

延伸阅读:

一次JQuery性能优化实战

jquery中使用表单元素选择器

JQuery的扩展接口简单示例

jquery使用attr访问自定义属性,减少javascript脚本中

Jquery弹出层插件Thickbox使用心得