jQuery源码-总体架构

总体架构

jQuery 的模块总体分为三大部分:

• 入口模块(构造 jQuery 对象模块)
• 功能模块
• 底层支持模块

入口模块

入口模块主要功能是构造 jQuery 对象, 如果在调用构造函数 jQuery() 创建 jQuery 对象时传入了选择器表达式, 则会调用功能模块中的选择器 Sizzle 遍历文档, 查找与之匹配的 DOM 元素, 并创建一个包含了这些 DOM 元素引用的 jQuery 对象

功能模块

在功能模块中, 事件系统提供了统一的事件绑定、响应、手动触发和移除机制, 它并没有将事件直接绑定到 DOM 元素上, 而是基于数据缓存模块来管理事件

Ajax 模块

Ajax 模块允许从服务器上加载数据, 而不用刷新页面, 它基于异步队列模块来管理核触发回调函数

动画模块

动画模块用于向网页中添加动画效果, 它基于队列模块来管理和执行动画函数

属性操作模块

属性操作模块时用于对 HTML 属性和 DOM 属性进行读取、设置和移除操作

DOM 遍历模块

DOM 遍历模块用于在 DOM 树中遍历父元素、子元素和兄弟元素

DOM 操作模块

DOM 操作模块用于插入、移除、复制和替换 DOM 元素

样式操作模块

样式操作模块用于获取计算样式或设置内联样式

坐标模块

坐标模块用于读取或设置 DOM 元素的文档坐标

尺寸模块

尺寸模块用于获取 DOM 元素的高度和宽度

底层支持模块

底层支持模块又分为诸多子模块:

• 工具方法: Utilities
• 回调函数列表: Callbacks Object
• 异步队列: Deferred Object
• 浏览器功能测试: Support
• 数据缓存: Data
• 队列: Queue
• 选择器: Sizzle

工具方法模块

工具方法模块提供了一些编程辅助方法, 用于简化对 jQuery 对象、DOM 元素、数组、对象、字符串等的操作, 其他模块都会用到工具方法模块

回调函数列表模块

回调函数列表模块用于增强对回调函数的管理，支持添加、移除、触发、锁定、禁用回调函数等功能；

异步队列模块

异步队列模块用于解耦异步任务和回调函数, 他再回调列表的基础上为回调函数增加了状态, 并提供多个回调函数列表, 支持传播任意同步或异步回调函数的成功或失败状态

浏览器功能测试模块

浏览器功能测试模块提供了针对不同浏览器功能和 bug 的测试结果, 其他模块基于这些测试结果来解决浏览器之间的兼容性问题

数据缓存模块

数据缓存模块用于为 DOM 元素和 JavaScript 对象附加任意类型的数据

队列模块

队列模块用于管理一组函数, 支持函数的入队核出队操作, 并确保函数按顺序执行, 它基于数据缓存模块实现

选择器模块

选择器 sizzle 是一个纯 JavaScript 实现的 CSS 选择器引擎, 用于查找与选择表达式匹配的元素集合

源码结构

(function(window, undefined) {
  var jQuery = (
    var jQuery = (function(selector, context) {
      return new jQuery.fn.init(selector, context, rootjQuery)
    })()
    return jQuery
  )()

  // 工具方法

  // 回调函数列表

  // 异步队列

  // 浏览器功能测试

  // 数据缓存

  // 属性操作

  // 事件系统

  // 选择器

  // DOM 遍历

  // DOM 操作

  // 样式操作 CSS

  // 异步请求

  // 动画

  // 坐标
  window.jQuery = window.$ = jQuery
})(window)