jQuery源码分析 （init）

Jquery 源码分析

                        prk 2008-08-12

1 、概述                      

   jQuery 是一个非常优秀的 Js 库，与 prototype,YUI,Mootools 等众多的 Js 类库相比，它剑走偏锋，从 web 开发最实用的角度出发，抛除了一些中看但不实用的东西，为开发者提供一个短小精悍的类库。由于其个短小精悍，使用简单方便，性能相对高效。众多的开发者都选择 Jquery 来进行辅助的 web 开发。

在使用 jquery 时开发，我们也会时常碰到许多的问题 , 但是 jquery 的代码很晦涩，难起看懂，当开发时出现了问题，看不懂源码，不知道如何去排错。

John Resig ， Jquery 的开发者，写了两本书， Pro Javascript Techniques 可以看作是对 Jquery 的源码分析。这个对于分析源码，从基本上去比较目前的类库都有很大的帮助。另外一本是 jQuery.in.Action 。这本主要是讲怎么去使用 Jquery 。二本书都深入浅出。还有一个由本手册由 一揪 整理编辑 JqueryAPI 的中文文档。这三个对于精通 Jquery 是有很大帮助的。

 

2 、 init() 分析

在分析 init() 之前，我们得明白 jQuery 的设计理念。

Jquery 是站在开发者的角度去考虑问题，在使用 Js 的时候，大部分时间都是对 Dom 元素进行操作，比如修改元素的属性，修改内容，修改 CSS 等。但是取 Dom 元素的，如 getElementsByTag ，有可能会取到一些 Dom 元素的集合，而又正好要这个集合的所有的元素都要进行同样的操作。如果只有一个元素，完全可以看作只有一个元素的集合。

这样只要对这个集合进行操作，就会对集合的每个元素都进行操作。 jQuery 就是基于这个集合而提供了众多的实用方法，包含了日常开发所需要的功能。对于这个集合，我们称为 jquery 对象。

我们可以通过 $(params) 或 jquery(params) 来生成 Jquery 对象。在 Jquery 文档中提供了四种方式： jQuery(expression,[context]) ， jQuery(html) ， jQuery(elements) ， jQuery(callback) 四种构寻 jquery 对象的方式。其实 Jquery 的参数可以是任何的元素，如空参数，都能构成 jquery 对象。

那么 jquery 是如何实现的呢？

①②③④⑤⑥⑦⑧⑨⑩

var jQuery = window.jQuery = window.$ = function (selector, context) {

    // The jQuery object is actually just the init constructor 'enhanced'

    return new jQuery.fn.init(selector, context);                         ①

};

可以看得出其实就是 new init(selector, context):

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));                   ⑨

    },

 

上面的代码 ①可以看出$(xx) 或Jquery(xx) 得到不是真正的jQuery 函数生成的对象，而是jQuery.fn.init 函数生成的对象。也是就是jQuery 的对象继承的是jQuery.fn.init 的原型。jQuery.fn = jQuery.prototype={..} 。我们基本上不用new jQuery(xx) ，而是直接jQuery(xx), 就是采用了new jQuery(xx) ，先生成jQuery 函数的对象，把原型中的继承下来，返回的也是jQuery.fn.init 函数生成的对象。而jQuery 函数的对象也抛弃了。可见给jQuery.prototype 上增加方法的意义不大。同时也可以看出采用new jQuery(xx) 的效率更低。jQuery.fn.init 是通过jQuery.fn.init.prototype = jQuery.fn; 来获得的。在扩展jQuery 的时候，只要把相关的函数extend 到jQuery.fn 就可以了。

jQuery.fn.init 负责对传的参数进行分析然后生成 jQuery 对象。它把第一个参数分成四种情况：

 

 

类型	说明
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)