上一篇文章主要说了一下源码阅读的心路历程, 当然可能是废话, 但是对我而言是很有意义的. 这篇文章, 将会花一点点时间对jQuery的源码结构做个简单了解.

一、更新


[2019-4-21]

Changed

  • 文章排版调整

二、前置


本次源码解析采用我最钟情的版本:

  • jQuery-3.2.1

这个版本算是陪伴我很久了, 从18年2月至今, 一直用的它

三、分析


首先, 要吐槽一下, jq源码并不是用ts来构建的, 对于源码阅读者来说很不友好, 毕竟在VS Code中不能作跳转和提示. 但是, ‘鸡贼’的我找到了jquery.d.ts来作为对照, 可以比对参数类型, 还算有点补救措施.

步入正题, 使用VS Code的折叠快捷键快速堆叠所有函数, 可以清楚的看到, jq的内部组成大致是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
((env, fn) => {

...
// environment判断
// 由于我们只在浏览器环境中测试, 所以这一块先忽略
...

})(window || this, (window, isGlobal) => {

// 1. 缓存常用方法

var push = [].push
var class2Type = {};
...


// 2. jQuery工厂函数

var jQuery = function(selector, context) {
...
}


// 3. jQuery构造函数
var init = jQuery.fn.init = function(selector, context, root) {
...
}


// 4. jQuery原型

jQuery.fn = jQuery.prototype = {
...
}


// 5. jQuery拓展机制

jQuery.extend = jQuery.fn.extend = function() {
...
}
jQuery.extend(
...
)


// 6. Sizzle引擎

var Sizzle = (function(window) {
...
})(window);


// 7. jQuery事件队列

jQuery.Callbacks = function(options) {
...
}


// 8. 缓存模型

function Data() {
...
}
Data.prototype = {
...
};


// 9. jQuery事件模型-Event

jQuery.event = {
...
}
jQuery.Event = function(src, props) {
...
}
jQuery.Event.prototype = {
...
}


// 10. jQuery动画缓动机制

function Tween(elem, options, prop, end, easing) {
...
}
Tween.prototype = {
...
}


// 11. jQuery网络请求
jQuery.extend({
ajax: function(url, options) {
...
}
})

});

这里我将其分为12个区块, 它们是jq的核心躯干. 后续的文章也会对这若干个区块逐个击破.

四、附加


4.1 折叠所有函数

Ctrl + K + 0

4.2 展开所有函数

Ctrl + K + J

五、示例代码


仓库地址: Here