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

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

模块结构

jQuery的selector模块依赖如下：

selector -> selector-sizzle -> sizzle

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

DOM是什么？

DOM(文档对象模型)是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的节点。

自JavaScript成为最常用的语言时JavaScript和DOM通常被视为独立的实体。DOM接口用于存取、遍历和控制HTML和XML文档。

DOM起始于Netscape(网景)和Microsoft(微软)的DHTML(动态HTML)，但是现在它已经成为基本文档结构及查询接口。
阅读全文

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 -- 默认页面