首页 > 代码库 > 问答形式阅读jQuery源码(一)

问答形式阅读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目录结构是怎样的

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

.githubgit相关目录
build构建相关的脚本文件,笔者大概阅读了一下,主要是创建两个Grunt任务,负责构建(bulid)和输出(dist)
dist输出构建后的文件,主要是jquery.js和jquery.min.js,以及jquery.min.map。这些就是我们最终使用的js文件了
external放依赖的第三方代码,jQuery中最重的第三方库sizzle就在这里
node_modulesnodejs的模块文件,构建时候安装的node非全局模块都放在这里,属性nodejs的小伙伴应该很清楚了
srcjQuery自身的源代码的目录,这就是我们主要阅读的部分
test单元测试用例
.babelrcBabel的配置文件
.editorconfigeditorconfig的配置文件,editorconfig是帮助开发者在不同的编辑器和IDE之间定义和维护一致的代码风格的配置,很多ide都支持editorconfig的插件,使用这个就可以使各种ide下都能自动将代码显示成editorconfig约定的格式
.eslintignoreeslint相关文件,配置不用于eslint语法检测的文件目录
.eslintrc.jsoneslint的配置文件。eslint和jshint比较像,可以认为是jshint的升级版,都是用来做语法检测的。
.gitattributesgit相关文件,用于设置文件的对比方式
.gitignoregit的配置文件,配置用于配置不需要加入版本管理的文件
.mailmap貌似是一个邮件地址列表
.npmignorenpm相关文件,配置哪些文件不需要被发布到npmjs.org
.npmrcnpm的配置文件
.travis.ymlTarvis-CI的配置文件,持续集成用的,github整合了持续集成服务travis,每一次push之后,travis就会定时执行“npm test”来测试项目
AUTHORS.txt贡献者名录
CONTRIBUTING.md贡献代码指引
Gruntfile.jsGrunt的配置文件
LICENSE.txt授权协议
README.mdgithub项目的说明文档
package.jsonnpm的包文件

几个地方值得注意一下:

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源码(一)