selector是jQuery主打的一个模块，可以说jQuery的强大就是其selector。目前其的selector已经分成另外的一个(sizzle)[]项目了。

在jQuery中采用调用sizzle来实现selector，接下来详细分析。

模块结构

jQuery的selector模块依赖如下：

selector -> selector-sizzle -> sizzle

主要实现是sizzle。selector-sizzle只是定义了一些jQuery常用的sizzle的变量。selector直接就是一个申明依赖。
阅读全文

jQuery中的parseHTML模块主要是用来创建DOM元素的，类似于createElement。

1
2
3
4
5
6

// data: html字符串
// context (可选): 如果定义, 将会在这个上下文中将创建的HTML片段, 默认是document
// keepScripts (可选): 一个布尔值，表明是否在传递的HTML字符串中包含脚本。
jQuery.parseHTML = function( data, context, keepScripts ) {
	// ...... 实现省略
}

jQuery从1.5版本开始引入了Deferred对象。在jQuery中Deferred对象用来解决回调函数问题。

Deferred对象是非常cool的。比如：当你想将一个事件程序关联到一个鼠标点击，你就会为它分配的元素的onclick事件，如：button.onclick= MyHandler。这个控件也需要这个处理的逻辑的时候，比如：button.onclick= MyHandler2时。常规中这样是满足不了要求的，因为你只能在一个时间分配一个功能。原来可以使用 DOM的addEventListener（）的功能，它允许您添加尽可能多的事件，这个问题最终得到解决。现在，类似的问题又出现了使用Ajax调用。这一次，因为Ajax的限制，只支持一个回调函数。 所以，再使用DOM的addEventListener（）却不可能满足。所以引入了Deferred对象。
阅读全文

使用jQuery库时，通常会使用ready函数。jQuery的ready函数不同与window.onload,如果你测试一下就会发现。

window.onload是在所有资源都加载完成时候触发,当资源比较大，比如图片文件较多的时候，window.onload的触发就会延迟很多，
影响用户体验。

jQuery.ready是在页面准备好之后就会触发，会先于window.onload事件。

jQuery是如何实现这个过程的呢？看完ready模块就明白了。
阅读全文

在core模块中，我们分析了实例化一个jQuery对象是由工厂方法jQuery交给了jQuery.fn.init。这个init实现是在init模块中完成的。

init模块最主要的任务还是实例化时传入的属性判断，具体实现还是交给另外的模块实现的。

比如：调用$(function(){})的时候，init判断是一个DOM ready函数，它就采用ready模块来实现。

再比如：调用$('<div></div>')的时候，因为判断字符串为一个html类型的，使用init模块会尝试去创建这个节点。这部分会依赖于parseHTML模块。

jQuery模块化的开端是jquery.js文件，在这个文件中详细的列出了jquery的模块。

一共有29个模块，其中有的是基础模块，像core别的模块都会依赖于它。
除了基础模块，别的模块都可以在自定义打包中决定是否需要。

打包之后的代码会被intro.js与outro.js包围。形成如下代码的格式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

(function(window,factory){
	//检测是否支持模块
	if (typeof module === "object" && typeof module.exports === "object") {
		//检查是否模块环境中是否开启了window对象
		//如果支持模块化的话采用模块化实例化工厂
		//否则就用默认方式
		module.exports = function( w ) {
			w = w || window;
			if ( !w.document ) {
				throw new Error("jQuery需要一个包含document的window对象");
			}
			return factory( w );
		};
	} else {
		factory( window );
	}
}(this,function(window){
	// 框架主体部分
}));

jQuery使用QUnit来测试javascript正确性，使用Benchmark来测试其选择元素的速度快慢。如果你不熟悉QUnit库参考我的一篇教程javascript单元测试Qunit

我并没沿用jQuery的Qunit测试，我为了更方便的研究，在测试中集成了requirejs。

测试目录文件如下：

1
2
3
4

test/ -- 测试目录
 ├── data/ -- 测试辅助相关数据目录
 ├── unit/ -- 单元测试目录
 └── index.html -- 默认页面

jQuery在编写中采用了AMD模块的方式，使用的是requirejs框架。

模块开发带来的益处很多，特别对于我们来说源码的阅读更加方便明了。

Jquery主页结构

1
2
3
4
5
6
7
8
9

jquery/ -- 项目主目录
 ├── bower_components/ -- bower依赖目录
 ├── build/ -- 自定义任务目录
 ├── dist/ -- 发布目录
 ├── node_modules/ -- grunt 插件 录
 ├── src/ -- 源码目录
 ├── test/ -- 单元测试目录
 ├── speed/ -- 速度测试目录
 └── Gruntfile.coffee -- grunt配置文件

jQuery是采用grunt来管理其项目。

它在grunt中定义了单元测试、代码检查、压缩、自定义模块打包等等。

如果你不熟悉grunt可以参考官网教程grunt或者本人的另一博客grunt 简易教程。