最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。

其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。

另外，阅读源码让我接触到了大量底层的知识。对原生JS 、框架设计、代码优化有了全新的认识，接下来将会写一系列关于 jQuery 解析的文章。

我在 github 上关于 jQuery 源码的全文注解，感兴趣的可以围观一下。jQuery v1.10.2 源码注解 。

网上已经有很多解读 jQuery 源码的文章了，作为系列开篇的第一篇，思前想去起了个【深入浅出jQuery】的标题，资历尚浅，无法对 jQuery 分析的头头是道，但是 jQuery 源码当中确实有着大量巧妙的设计，不同层次水平的阅读者都能有收获，所以打算厚着脸皮将自己从中学到的一些知识点共享出来。打算从整体及分支，分章节剖析。本篇主要讲 jQuery 的整体架构及一些前期准备，先来看看 jQuery 的整体结构：

   整体架构

不同于 jQuery 代码各个模块细节实现的晦涩难懂，jQuery 整体框架的结构十分清晰，按代码行文大致分为如上图所示的模块。

初看 jQuery 源码可能很容易一头雾水，因为 9000 行的代码感觉没有尽头，所以了解作者的行文思路十分重要。

整体而言，我觉得 jQuery 采用的是总--分的结构，虽然JavaScript有着作用域的提升机制，但是 9000 多行的代码为了相互的关联性，并不代表所有的变量都要定义在最顶部。在 jQuery 中，只有全局都会用到的变量、正则表达式定义在了代码最开头，而每个模块一开始，又会定义一些只在本模块会使用到的变量、正则、方法等。所以在一开始的阅读的过程中会有很多看不懂其作用的变量，正则，方法。

所以，我觉得阅读源码很重要的一点是，摒弃面向过程的思维方式，不要刻意去追求从上至下每一句都要在一开始弄明白。很有可能一开始你在一个奇怪的方法或者变量处卡壳了，很想知道这个方法或变量的作用，然而可能它要到几千行处才被调用到。如果去追求这种逐字逐句弄清楚的方式，很有可能在碰壁几次之后阅读的积极性大受打击。 

道理说了很多，接来下进入真正的正文，对 jQurey 的一些前期准备，小的细节进行分析：

   闭包结构

// 用一个函数域包起来，就是所谓的沙箱 // 在这里边 var 定义的变量，属于这个函数域内的局部变量，避免污染全局 // 把当前沙箱需要的外部变量通过函数参数引入进来 // 只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数 (function(window, undefined) { // jQuery 代码 })(window);

jQuery 具体的实现，都被包含在了一个立即执行函数构造的闭包里面，为了不污染全局作用域，只在后面暴露 $ 和 jQuery 这 2 个变量给外界，尽量的避开变量冲突。常用的还有另一种写法：

(function(window) { // JS代码 })(window, undefined);

比较推崇的的第一种写法，也就是 jQuery 的写法。二者有何不同呢，当我们的代码运行在更早期的环境当中（pre-ES5，eg. Internet Explorer 8），undefined 仅是一个变量且它的值是可以被覆盖的。意味着你可以做这样的操作：

undefined = 42 console.log(undefined) // 42

当使用第一种方式，可以确保你需要的 undefined 确实就是 undefined。

另外不得不提出的是，jQuery 在这里有一个针对压缩优化细节，使用第一种方式，在代码压缩的时候，window 和 undefined 都可以压缩为 1 个字母并且确保它们就是 window 和 undefined。

// 压缩策略 // w -> windwow , u -> undefined (function(w, u) { })(window);

   无 new 构造

 嘿，回想一下使用 jQuery 的时候，实例化一个 jQuery 对象的方法：

// 无 new 构造 $('#test').text('Test'); // 当然也可以使用 new var test = new $('#test'); test.text('Test');

大部分人使用 jQuery 的时候都是使用第一种无 new 的构造方式，直接 $('') 进行构造，这也是 jQuery 十分便捷的一个地方。当我们使用第一种无 new 构造方式的时候，其本质就是相当于 new jQuery()，那么在 jQuery 内部是如何实现的呢？看看：

(function(window, undefined) { var // ... jQuery = function(selector, context) { // The jQuery object is actually just the init constructor 'enhanced' // 看这里，实例化方法 jQuery() 实际上是调用了其拓展的原型方法 jQuery.fn.init return new jQuery.fn.init(selector, context, rootjQuery); }, // jQuery.prototype 即是 jQuery 的原型，挂载在上面的方法，即可让所有生成的 jQuery 对象使用 jQuery.fn = jQuery.prototype = { // 实例化化方法，这个方法可以称作 jQuery 对象构造器 init: function(selector, context, rootjQuery) { // ... } } // 这一句很关键，也很绕 // jQuery 没有使用 new 运算符将 jQuery 实例化，而是直接调用其函数 // 要实现这样,那么 jQuery 就要看成一个类，且返回一个正确的实例 // 且实例还要能正确访问 jQuery 类原型上的属性与方法 // jQuery 的方式是通过原型传递解决问题，把 jQuery 的原型传递给jQuery.prototype.init.prototype // 所以通过这个方法生成的实例 this 所指向的仍然是 jQuery.fn，所以能正确访问 jQuery 类原型上的属性与方法 jQuery.fn.init.prototype = jQuery.fn; })(window);

大部分人初看 jQuery.fn.init.prototype = jQuery.fn 这一句都会被卡主，很是不解。但是这句真的算是 jQuery 的绝妙之处。理解这几句很重要，分点解析一下：