本文共 1644 字,大约阅读时间需要 5 分钟。
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的源码结构还是相当清晰和有条理的,并不像源码那般晦涩。
转载地址:http://kfjix.baihongyu.com/