jQuery源码分析1--整体结构

用过了那么久的jQuery,是时候看看他的真面目了。

一系列分析基于jQuery1.8.3,源码可以到对应官网下载或者在我的->资源下载中获取。

一、整体结构

jQuery的源码还是很有条理的,各个模块还是比较好区分的。将这9000+行的代码细分下,可以得到这些段落。

(function( window, undefined ) {
    (15-93) 定义了一些变量和jQuery = function() {} 
    (95-289) 给jQ对象添加了一些原型属性和方法 
    (291-353) 定义了extend方法,用于jQ的继承方法,扩展等 
    (355-840) 给jQ扩展了一些工具方法 
    (910-1101) callbacks,回调函数实现,统一管理函数 
    (1102-1242) defferred,延迟对象的实现,统一管理异步 
    (1243-1508) support,功能检测的实现 
    (1509-1847) data()方法的实现 
    (1848-1993) 队列管理 
    (1994-2625) attr()、val()、prop()等对元素属性操作的实现
    (2626-3662) on()、off()等事件管理方法的实现
    (3669-5353) sizzle实现,css复杂选择器
    (5354-6474) DOM操作方法的实现
    (6476-6537) 浏览器类型、版本判断
    (6538-7177) css()方法、样式操作的实现 
    (7178-8553) ajax及其数据操作
    (8554-9226) animate等方法实现 
    (9227-9452) position等位置与大小的方法实现
    (9454) 暴露jQuery与$ window.jQuery = window.$ = jQuery; 
    (9468-9470) jQ模块化支持 
})( window );

整个库的逻辑十分整洁。

二、自执行

我们首先来看,最外层的自执行,整个jQ库被包在一个立即执行函数内部,而且这个函数还有两个参数,一个是window,另一个是undefined,传入window的是因为:1.根据作用域的原则,内部使用到window对象时,直接调用自执行内部的window(和外部的同一个),优化查找速度。2.是因为在min版本下,我们可以将window字符压缩,减少文件大小。自执行的话,可以减少暴露不必要的全局变量,优化代码。

实际上1.8.3min版本下是这样的:

(function(e,t){
    //....
})(window);

至于传入了undefined,是因为,在IE8-或者某些浏览器下,undefined是可以赋值的。这儿这么做是防止undefined被改变了。

三、全局方法

9454行处,有这一行代码,给window对象绑定了jQuery和$属性,而这个属性的值是jQuery。

window.jQuery = window.$ = jQuery;

这样的话,尽管该自执行函数未返回任何方法,但是,我们仍可以用jQuery或$来使用jQ库。

四、阅读姿势

其实,jQ源码中有很多的注释,可以为我们单独读代码时解决部分问题。当看到#加数字时,我们可以登录jQuery的官网,到Bugs下搜索对应的数字,在这儿会有更详细的内容。

发表评论

电子邮件地址不会被公开。

*