jQuery源码之总体架构分析

1. 总体架构

1.1 自调用匿名函数 self-invoking anonymous function

打开jquery，首先你会看到这样的代码结构：

代码如下:

(function( window, undefined ) {

// jquery code

})(window);

1. 这是一个自调用匿名函数。什么东东呢?在第一个括号内，创建一个匿名函数;第二个括号，立即执行

2. 为什么要创建这样一个“自调用匿名函数”呢?

通过定义一个匿名函数，创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏全局的命名空间。这点非常有用也是一个js框架必须支持的功能，jquery被应用在成千上万的javascript程序中，必须确保jquery创建的变量不能和导入他的程序所使用的变量发生冲突。

3. 匿名函数从语法上叫函数直接量，javascript语法需要包围匿名函数的括号，事实上自调用匿名函数有两种写法(注意标红了的右括号)：

. 代码如下:

(function() {

console.info( this );

console.info( arguments );

}( window ) );

(function() {

console.info( this );

console.info( arguments );

})( window );

4. 为什么要传入window呢?

通过传入window变量，使得window由全局变量变为局部变量，当在jquery代码块中访问window时，不需要将作用域链回退到顶层作用域，这样可以更快的访问window;这还不是关键所在，更重要的是，将window作为参数传入，可以在压缩代码时进行优化，看看jquery-1.6.1.min.js：

(function(a,b){})(window); // window 被优化为 a

5. 为什么要在在参数列表中增加undefined呢?

在 自调用匿名函数 的作用域内，确保undefined是真的未定义。因为undefined能够被重写，赋予新的值。

undefined = "now it's defined";

alert( undefined );

测试结果：

浏览器

测试结果

结论

ie

now it's defined

可以改变

firefox

undefined

不能改变

chrome

now it's defined

可以改变

opera

now it's defined

可以改变

6. 注意到源码最后的分号了吗?

分号是可选的，但省略分号并不是一个好的习惯;为了更好的兼容性和健壮性，请在每行代码后加上分号并养成习惯。

1.2 总体架构

接下来看看在 自调用匿名函数 中都实现了什么功能，按照代码顺序排列：

. 代码如下:

(function( window, undefined ) {

// 构造jquery对象

var jquery = function( selector, context ) {

return new jquery.fn.init( selector, context, rootjquery );

}

// 工具函数 utilities

// 异步队列 deferred

// 浏览器测试 support

// 数据缓存 data

// 队列 queue

// 属性操作 attribute

// 事件处理 event

// 选择器 sizzle

// dom遍历

// dom操作

// css操作

// 异步请求 ajax

// 动画 fx

// 坐标和大小

window.jquery = window.$ = jquery;

})(window);

从上边的注释看，jquery的源码结构相当清晰、条理，不像代码那般晦涩和让人纠结。

后边的章节基本将以这个顺序展开。

1.3 下节预告

如果你看过jquery源码，很快就会发现这里到处充斥着正则表达式，而很多javascript开发人员又疏于正则基础知识，为了扫清这个障碍，下一章将先温习javascript正则表达式的基础知识，再详细剖析jquery中的正则表达式。

在正式开始分析源码之前，还有没有要准备的基础知识呢?

当然有。比如javascript api中的类和对象，如果你不熟练的话，至少手头要有一本参考手册。

除了正则，其他的知识点会在分析过程中穿插讲解，不计划辟出新的章节。