jQuery 1.5 源码解读 面向中高阶JSER

1. 代码折叠是必须的。

因此必须在支持语法折叠的编辑器里打开源码。 根据折叠层次，我们可以很快知道: 所有 jQuery 的代码都在一个函数中: 　　

(function( window, undefined ) {
// jQuery 代码

})(window);

这样可以避免内部对象污染全局。传入的参数1是 window， 参数2是 undefined ， 加快js搜索此二对象的速度。

2.  接着打开第一级折叠。

可以发现 jQuery 代码是按这样顺序来组织:

下面的模块可以用上面的模块，上面的模块不需要下面的模块

3.   定义 jQuery 函数 ( 代码  20 - 1081 行)

总的代码是这样的框架:

var jQuery = (function() {
 // 创建 jQuery 对象
var jQuery = function( selector, context ) {
 // 略

 };

 // 创建 jQuery.fn 对象
 jQuery.fn = jQuery.prototype = {
 // 略
 };

 // 声明 jQuery.extend 
 jQuery.extend = jQuery.fn.extend = function() {
 // 略
 };

 // 使用 jQuery.extend 扩展自己
 jQuery.extend({
 // 略

 });

 // 浏览器方面的一些琐碎
 // 略

 // 定义全局对象
 return (window.jQuery = window.$ = jQuery);

})();

从这里知道: 平时所用的 $ 其实就是 jQuery 函数的别名。

3.1 jQuery对象 (代码 23 - 26 行)

  jQuery对象似乎一直都是这东西:

var jQuery = function( selector, context ) {
 // 实际上 jQuery 对象是 jQuery.fn.init 返回的。
 return new jQuery.fn.init( selector, context, rootjQuery );
} 

这个函数表示: 要想知道函数 jQuery 是什么东西，必须看   jQuery.fn.init  对象。

同时这也解释了为什么写代码不需要 new jQuery。

再看第29行 - 97行， 都是一些变量声明，这些变量在下面的函数用到。提取变量的好处: 对正则节约编译的时间， 同时能在压缩的时候获得更小的结果。

3.2 jQuery.fn 对象 (代码 99 - 320 行)

这个fn 其实是 jQuery.prototype ，这也是为啥jQuery.fn 就是扩展 jQuery对象的唯一原因。

肯能有人会疑问， jQuery 返回 new jQuery.fn.init， 也就是说，平时的函数应该是 jQuery.fn.init.prototype 所有的成员，不是 jQuery.prototype 成员。当然原因也很简单: jQuery.fn.init.prototype === jQuery.prototype (代码 322  行)