上一篇文章主要说了一下源码阅读的心路历程, 当然可能是废话, 但是对我而言是很有意义的. 这篇文章, 将会花一点点时间对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