jquery3.0源码解读（一）Init

目的

督促自己耐心完整看完jquery源码，学习jquery书写思想，并留下笔记供他人参考。

环境

jquery源码地址：https://github.com/jquery/jquery/tree/3.0.0

前置知识

• grunt：http://www.gruntjs.net/
• AMD：http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
• js原型（prototype）
• this作用域

jquery项目架构

首先，我们点开上面的jquery的github源码地址，得知它是用grunt构建工具进行构建的（grunt详情，请参考“前置知识”）。

为了方便代码查看，我们将它下载到本地，并用webstorm打开。

接着，点开/src/jquery.js入口文件，缩减后如下：

define( [
    "./core",
], function( jQuery ) {

"use strict";

return ( window.jQuery = window.$ = jQuery );

} );

得知它使用“严格模式”进行书写代码，并使用了AMD标准的模块化开发方式。

查看package.json文件，得知他使用require.js实现AMD。

jquery对象的构建方式

window.jQuery = window.$ = jQuery

上面代码中，我们看到它定义了window的jQuery和$两个全局变量，并赋值为jQuery，这样我们就可以在浏览器中直接使用$和jQuery。

那这个jQuery对象是怎么构建的呢？显然，我们应该在core中找答案。

点开/src/core.js，我们找到了jQuery的构造方法：

jQuery = function( selector, context ) {
        return new jQuery.fn.init( selector, context );
},

这里，我们注意到它直接new了一个对象。同时根据jQuery.fn = jQuery.prototype，jQuery.fn相当于jQuery.prototype。现在我们需要找到原型链上的init方法。

很显然，点开/src/core/init.js,这里就是该init方法：

init = jQuery.fn.init = function( selector, context, root ) {
    return jQuery.makeArray( selector, this );
};

init.prototype = jQuery.fn;

先不管jQuery.makeArray做了什么，总之他返回了一个对象。关键是的下面那句init.prototype = jQuery.fn。它吧init的原型指向了jQuery.fn，而jQuery.fn=jQuery.prototype。也就是说：init.prototype=jQuery.prototype。

根据js原型链的知识，我们通过init方法构造出来的对象，就能访问jQuery.prototype对象的方法。

换句话说，当我们使用类似$(xxx)的时候，jquery为我们new了一个对象，并且这个对象的原型链指向jQuery.prototype，我们可以直接使用jQuery.prototype上的方法。