jQuery技术内幕：深入解析jQuery架构设计与实现原理. 1.2　总体架构

1.2 总体架构

jQuery的模块可以分为3部分：入口模块、底层支持模块和功能模块，如图1-1所示，图中还展示了模块之间的主要依赖关系。

来看看图1-1中各个模块的功能和依赖关系。

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

选择器Sizzle是一款纯JavaScript实现的CSS选择器引擎，用于查找与选择器表达式匹配的元素集合。

工具方法模块提供了一些编程辅助方法，用于简化对jQuery对象、DOM元素、数组、对象、字符串等的操作，例如，jQuery.each()、.each()、jQuery.map()、.map()等，其他所有的模块都会用到工具方法模块。

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

在底层支持模块中，回调函数列表模块用于增强对回调函数的管理，支持添加、移除、触发、锁定、禁用回调函数等功能；异步队列模块用于解耦异步任务和回调函数，它在回调函数列表的基础上为回调函数增加了状态，并提供了多个回调函数列表，支持传播任意同步或异步回调函数的成功或失败状态；数据缓存模块用于为DOM元素和JavaScript对象附加任意类型的数据；队列模块用于管理一组函数，支持函数的入队和出队操作，并确保函数按顺序执行，它基于数据缓存模块实现。

在功能模块中，事件系统提供了统一的事件绑定、响应、手动触发和移除机制，它并没有将事件直接绑定到DOM元素上，而是基于数据缓存模块来管理事件；Ajax模块允许从服务器上加载数据，而不用刷新页面，它基于异步队列模块来管理和触发回调函数；动画模块用于向网页中添加动画效果，它基于队列模块来管理和执行动画函数；属性操作模块用于对HTML属性和DOM属性进行读取、设置和移除操作；DOM遍历模块用于在DOM树中遍历父元素、子元素和兄弟元素；DOM操作模块用于插入、移除、复制和替换DOM元素；样式操作模块用于获取计算样式或设置内联样式；坐标模块用于读取或设置DOM元素的文档坐标；尺寸模块用于获取DOM元素的高度和宽度。

下面来看看jQuery源码（jquery-1.7.1.js）的总体结构，如代码清单1-1所示，其中展示了各个模块在源码中的位置。

代码清单1-1 jQuery源码（jquery-1.7.1.js）的总体结构

(function( window, undefined ) {

   // 构造jQuery对象

   var jQuery = (function() {

       var jQuery = function( selector, context ) {

               return new jQuery.fn.init( selector, context, rootjQuery );

           }

       return jQuery;

   })();

   // 工具方法 Utilities

   // 回调函数列表 Callbacks Object

   // 异步队列 Deferred Object

   // 浏览器功能测试 Support

   // 数据缓存 Data

   // 队列 Queue

   // 属性操作 Attributes

   // 事件系统 Events

   // 选择器 Sizzle

   // DOM 遍历 Traversing

   // DOM 操作 Manipulation

   // 样式操作 CSS（计算样式、内联样式）

   // 异步请求 Ajax

   // 动画 Effects

   // 坐标 Offset、尺寸 Dimensions

   window.jQuery = window.$ = jQuery;

})(window);

从代码清单1-1可以看出，jQuery的源码结构还是相当清晰和有条理的，并不像源码那般晦涩。