# dissect-jquery

**Repository Path**: playgroup/dissect-jquery

## Basic Information

- **Project Name**: dissect-jquery
- **Description**: 剖析 jQuery
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2015-11-10
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 剖析 jQuery

jQuery 给我的感觉就像是一个工具箱，使很多操作变得很简便。

## 说明

以下源码来自 bootcdn.cn：

- [jquery-3.0.0-alpha1.js](https://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js)
- [jquery-2.1.4.js](https://cdn.bootcss.com/jquery/2.1.4/jquery.js)
- [jquery-1.10.1.js](https://cdn.bootcss.com/jquery/1.10.1/jquery.js)

以下文件则是通过站长之家 [JavaScript/HTML格式化工具](http://tool.chinaz.com/Tools/JsFormat.aspx) 格式化之后得到：

- jquery-3.0.0-alpha1.formated.js
- jquery-3.0.0-alpha1.simply-formated.js
- jquery-2.1.4.formated.js
- jquery-2.1.4.simply-formated.js
- jquery-1.10.1.formated.js
- jquery-1.10.1.simply-formated.js

其中，

- xxx.simply-formated.js 是直接采用的 4 个空格格式化。
- xxx.formated.js 是采用普通压缩 + 4 个空格格式化。

#### jQuery 版本

最终决定采纳 2.1.4 版本作为研究对象，阅读源码请移步 Github 上的 [jQuery 官方库](https://github.com/jquery/jquery/tree/2.1.4)。

补充：源码已经从 GitHub 上搞下来一份，放在 `jquery-2.1.4` 目录。

## jQuery 源码结构

（根据项目结构分析）

- **核心（`core.js`）**
- **选择器** 以代码行数来计算，目测大概占了 20% 的代码量。
    jQuery 选择器太强大了，以至于独立成了一个新项目 [sizzle](https://github.com/jquery/sizzle)。
    - `selector.js`
    - `selector-native`
    - `selector-sizzle`
- **遍历（`traversing.js`）**
- **文档操作**
    - `manipulation.js`
    - `wrap.js`
        - `wrapAll()`
        - `wrapInner()`
        - `wrap()`
        - `unwrap()`
    - `dimensions.js` 尺寸
        - `width()`
        - `height()`
        - innerWidth()
        - innerHeight()
        - outerWidth()
        - outerHeight()
- **属性操作（`attributes.js`）**
- **样式操作**
    - `css.js`
    - `offset.js`
- **动画效果（`effects.js`）**
- **数据缓存（`data.js`）** `$(selector).data()`
- **队列（`queue.js`）**
- **事件（`event.js`）**
- **Ajax**
    - `ajax.js`
    - `serialize.js` 表单序列化
- **回调机制**
    - `deferred.js`
    - `callbacks.js`

源码目录 `jquery-2.1.4/src/` 中的以下顶层文件另算：

- `jquery.js`：项目文件。
- `intro.js`、`outro.js`：打包合并的时候用的，参见 `jquery-2.1.4/build/tasks/build.js` 中的 `startFile`、`endFile`。
- `deprecated.js` 将要被抛弃的方法，做向下兼容。

## 预备知识：require.js

#### `define` 定义模块

如：`jquery-2.1.4/src/var/arr.js`：

```js
define(function() {
	return [];
});
```

可能定义一个模块的时候会依赖别的模块，如：`jquery-2.1.4/src/core.js`：

```js
define([
	"./var/arr",
	"./var/slice",
	"./var/concat",
	"./var/push",
	"./var/indexOf",
	"./var/class2type",
	"./var/toString",
	"./var/hasOwn",
	"./var/support"
], function( arr, slice, concat, push, indexOf, class2type, toString, hasOwn, support ) {
    ...
});
```

`core.js` 对 `var/arr.js` 的调用，会使后者在前者的最终生成代码中变成了这句话：

```js
var arr = [];
```

require.js 似乎有这种机制：

假设 A 模块导入 B 模块，

- B 模块中只有一个 return 语句，生成变量声明语句；
- 否则，根据依赖关系，将 B 模块中的代码复制到 A 模块适当位置。

#### `require` 引用模块

暂时还没有看到调用额。

## 参考资料

- 博客园，艾伦，[jQuery源码分析系列](http://www.cnblogs.com/aaronjs/p/3279314.html)
- 阮一峰，[《Javascript模块化编程（三）：require.js的用法》](http://www.ruanyifeng.com/blog/2012/11/require_js.html)
- [看了这个才发现jQuery源代码不是那么晦涩](http://www.tashan10.com/kan-liao-zhe-ge-cai-fa-xian-jqueryyuan-dai-ma-bu-shi-na-yao-hui-se/)
- http://www.w3ctech.com/topic/257
- http://www.w3ctech.com/user/1343
- http://api.jquery.com/jQuery.Callbacks/#jQuery-Callbacks-flags