问答形式阅读jQuery源码（一）

标签：

笔者阅读了园友艾伦 Aaron的系列博客《jQuery源码分析系列》，主要是阅读的jQuery的原理，然后跑园友的代码，真正对jQuery源码的阅读并不多。主要是直接阅读jQuery源码，一次能读懂的部分并不多，不如先阅读源码解析的文章，然后再阅读收获更大。笔者在阅读完园友艾伦的全部jQuery源码博客之后，准备真正开始阅读jQuery的源代码。而阅读的形式属于自问自答，把在阅读博客时候的留下来的疑问提出来，再通过自己阅读源码的形式对其解答；当然也包括在阅读源代码的时候那些读不懂的地方，提出疑问，然后在慢慢消化解答。

这个jQuery源码系列并非教程，而是笔者的学习jQuery源码的笔记，因此才会采取问答这种不系统的形式。如果大家想系统学习jQuery源码，还是请仔细阅读艾伦 Aaron的博客；或是直接阅读jQuery在gitbub上的源码(目前的master版本是version to 3.1.1-pre.，笔者阅读的也是这个版本的代码)。如果在阅读后也和笔者一样，对一些内容存在疑问，可以看看笔者的系列博客，看看你有没有你疑惑的问题。

提问：如何构建jQuery的源码

在我开始阅读jQuery的源码时，发现源代码本身是有模块化的，而艾伦 Aaron阅读的版本没有，他是直接阅读的dist后的代码。那么jQuery是如何构建源代码的呢？

答：阅读jQuery在github上的README.md文件，里面已经说得非常清楚了。先安装git客户端和nodejs及npm。然后将github上的资源克隆到本地，找一个目录，然后打开命令行，输入git的clone命令：

git clone git://github.com/jquery/jquery.git

本地就会克隆出jQuery的源代码：

然后进入该目录下，在命令行上运行如下命令，jQuery就会自动安装npm模块，并构建jQuery了。

npm run build

最后在dist目录中，会构建出我们想要的jQuery文件了。

提问：git上的jQuery目录结构是怎样的

答：具体目录结构可以看上图，这里逐个介绍一下各个目录和文件的作用：

几个地方值得注意一下：

1.jQuery是用RequireJs做模块化工具的，所以jQuery的源代码是用AMD规范。AMD这个模块化规范主要活跃于基于浏览器的js模块管理，他有着异步加载、依赖前置等非常好的特性，当然用来做后端的代码模块管理也可以，但是笔者终究认为这里用AMD有点“大材小用”了。jQuery用AMD规范做模块化管理，可能是历史原因的影响，早些年模块化工具不像如今这么成熟。

2.jQuery是用Grunt构建的，jQuery自己做了构建的Grunt任务，具体代码可以参考build目录下的Grunt任务和Grunt的配置文件Gruntfile.js。基于Grunt，jQuery完成测试、构建、合并代码、压缩等工作，最终把构建好的文件拷贝到dist目录里面。

3.jQuery配置了npm包相关的配置，说明jQuery本身也被发布到了npmjs.org上，我们可以直接用npm安装jQuery。

4.jQuery有Babel的配置文件，那源代码是不是用ES6的语法呢？

提问：jQuery有Babel的配置文件，难道jQuery的源代码使用了ES6的语法？

答：答案是没有的，我们先不看Babel在Grunt里面的配置，直接试一下能不能在源代码中使用ES6。

先将源代码里面添加一条ES6的语法，然后执行构建。这时我们会发现构建的时候会报错，而且构建好的jQuery.js文件中ES6的语法也没有被转换为ES5的语法。这说明构建源代码的时候并没有启用Babel。

我们在来看Babel在Grunt里面的配置

babel: {
    options: {
        sourceMap: "inline",
        retainLines: true
    },
    nodeSmokeTests: {
        files: {
            "test/node_smoke_tests/lib/ensure_iterability.js":
            "test/node_smoke_tests/lib/ensure_iterability_es6.js"
        }
    }
},

可以看出，Babel仅是将测试用例中的冒烟测试用例做了转换，而源代码则不在被转换列表中。

提问：jQuery的源代码用的是AMD规范做模块化，为什么最终构建好的代码却没有AMD的语句呢？

答：阅读jQuery的源代码，我们可以很清楚的看到AMD规范的语句。

然后在dist里面的构建好的文件中，我们却找不到AMD规范语句的影子，jQuery是如何去掉了这些AMD语句呢？起初笔者认为是用了一些Grunt上的插件，后来阅读了build里面的代码才发现，是在build里面使用正则将AMD语句去除。jQuery虽然是用的AMD做模块化，但是具体的代码结构还是有自己的一套策略，这个应该就是为了最后构建代码而考虑的。

src的根目录下，共有20多个js文件，很多js文件都有同名的目录与之对应。目录之中最特别的目录就是var目录，因为var目录并不存在与之对应的名为var.js的文件。

var这个名字和js的关键字var相同，这和这个目录这样命名肯定是有关系的。没错，jQuery在去除AMD语句的时候，发现如果是var目录里的文件的话，就会将其转换为“var 文件名 = AMD输出的对象”的形式。如下图：

define( ‘var/arr‘,[],function() {
    "use strict";

    return [];
} );

define( ‘var/document‘,[],function() {
    "use strict";

    return window.document;
} );

define( ‘var/getProto‘,[],function() {
    "use strict";

    return Object.getPrototypeOf;
} );

......

源代码的这几个模块最终会把构建为：

var arr = [];
var document = window.document;
var getProto = Object.getPrototypeOf;
......

而对于非“var”目录下的模块，jQuery会将define关键字等AMD相关的语句直接移除。其中sizzle模块更为特殊，jQuery在构建的时候还做了更多的操作，这里就不再细究了。

分析到这大家也能看出，jQuery这样构建是会破坏AMD各个模块的作用域的。我们之所以需要模块化我们的代码，一点是不希望我们把我们的内部（私有）变量声明到全局作用域中，而JavaScript是一种函数级作用域的语言，jQuery在构建的时候去掉了AMD的函数形式，这样所有模块的代码构建后的都会在同一个作用域里，所以在修改jQuery源代码的时候一定要小心，不要在作用域里面随意创建相同名称的变量，防止造成模块间的冲突。

以上就是jQuery去除AMD的过程。

了解了jQuery的构建过程后，我们就可以轻松愉快地浏览jQuery的源代码了。事实上如果jQuery构建的时候采用webpack这样的工具就简单多了。jQuery没有采用这样的工具可能也是历史原因，或者是出于进一步优化代码的目的。

问答形式阅读jQuery源码（一）

标签：

原文地址：http://www.cnblogs.com/laden666666/p/5659880.html