本专栏会依次循序渐进的讲解 jQuery 的源码。

 

　　进入源码后最外层的框架就是这样了，可以看到整体是一个自执行函数，然后在函数体内做了一些判断运行环境的操作，以便于适用于 Common.js 规范。

 

　　可以看到如果是浏览器运行环境那么自执行的第二个参数的 noGlobal 参数是 undefined，翻到源码最下面可以看到：

 

　　这里如果是浏览器运行环境下就会向 window 全局上定义一个 jQuery（$）的变量。拿到了内部的变量 jQuery 的引用。

 

　　或许你现在已经迫不及待的想看看 内部变量 jQuery 究竟是什么了，但是我们需要学习到的是，我们在自己写代码、造轮子的时候应该学习这种模式，全部的业务逻辑写到了一个函数中，这样在库内部声明的变量就不会污染全局。最后为用户暴露出一个统一的接口——jQuery。

 

　　这样我们就可以在外部直接使用 jQuery 或者 $ 了。

 

　　接下来就让我们再次进入源码，看看 jQuery 这个内部的变量究竟是什么。

 

　　在看之前，我门可以先来大胆的猜测一下。试想，我们在使用 jQuery 的时候的用法：

 

　　这样简简单单的代码就可以获取到了页面中的所有  标签并设置粉色的背景色。

 

　　从这里我们可以看到我们拿到 $ 变量是把它当作一个函数在调用，所以它可能是下面的写法：

 

　　我们还可以使用到 jQuery 上面的一些属性或者方法，例如，对于以上两种方法，都可以实现，但是我认为第一种写法更好一些。

 

　　另外我们可以在控制台打印一下 ：

 

　　可以看到这其实是一个对象，也就是说调用 $（），方法会返回一个对象。在  创建对象需要使用 new 操作符加构造函数来创建，我们可以先理解 jQuery 就是一个构造函数，但是为什么这里并没有使用 new 关键字呢？

 

　　我们带着自己的揣测和疑问进入源码：

 

　　直到看到这里我们就一目了然，这不就是一个工厂模式 吗？

 

　　这里普及一个创建型的设计模式——工厂模式。

 

　　工厂模式就是允许我们使用函数返回值的形式构造一个对象，使用它就几点好处：

 

　　使用者不需要知道构造函数是谁不需要使用 new 操作符

 

　　实现一个简易的工厂模式：

 

　　可以看到我们在使用的时候并不知道内部的构造函数是谁，也并没有使用 new 操作符。

 

　　回到 jQuery 的源码，这个时候我们就已经知道了为什么我们在使用的时候会那么调用了。那么问题来了，源码内部的真实的构造函数究竟是谁呢？

 

　　我们看到工厂函数的内部返回结果为 所以我们顺藤摸瓜， 又是什么呢？

 

　　查找源码，我们可以看到：

 

　　也就是说  其实是拿到了 的引用，那么原型对象上的 init  函数又是什么呢？

 

　　到这里目前的疑问就已经解决完了。

 

　　总结一下就是 jQuery 实际是一个工厂函数，内部实例化了 jQuery 原型对象上的 init 构造方法。

 

　　这里你可能会有一个疑问，我们为什么不这样写：

 

　　我们这样，函数的返回值不就直接是一个 jQuery 的实例对象了吗？

 

　　事实上这样是会报错的，试想我们使用 new 操作符创建对象会发生什么：

 

　　创建一个对象绑定 this 指向新创建的对象执行构造函数内部的代码使该对象的  属性指向构造函数的

 

　　出问题的是第三个环节，我们会执行该构造函数，那么如果直接 那么函数执行栈不就溢出了吗，所以就报错了。

 

　　如果你已经为 jQuery 的作者的这样的设计感动吃惊，那么我会告诉你，今天的主角才刚刚要来临了！！！

 

　　细心的我们已经发现了，在 jQuery.prototype 对象上有很多的方法：，等等。我们只是给 jQuery 的原型对象上添加了这些方法 可是为什么上面的 init 的实例对象也可以使用这些方法呢？我们百思不得其解，直到看到了这么一行代码：