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

2017年05月30日Web前端0

用过了那么久的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下搜索对应的数字，在这儿会有更详细的内容。

JavaScriptjQuery源码解析

目录