jQuery2.x源码解析(构建篇)


jQuery2.x源码解析(构建篇) 

jQuery2.x源码解析(设计篇) 

jQuery2.x源码解析(回调篇) 

jQuery2.x源码解析(缓存篇) 

 

笔者阅读了园友艾伦 Aaron的系列博客《jQuery源码分析系列》,跑艾伦的部分代码后,感觉仍然不够解渴,对jQuery依旧一知半解,产生了很多问题。阅读源码博客已经无法解决这些问题,所以笔者决定亲自查看jQuery源码,解除心中的疑问。阅读的形式属于自问自答,笔者会提出疑问,然后亲自解答(吐槽:感觉有点像一休哥和将军大人>_<)。

问题的来源主要有3种:

1.在阅读园友艾伦博客后产生的疑问

2.以前就有疑问,艾伦博客却没有解答或者解释不够明白

3.阅读源码的过程中产生的疑问

所以这个jQuery源码解析系列并非教程,而是笔者的学习jQuery源码的笔记,因此才会采取问答这种不系统的形式。如果大家想系统学习jQuery源码,还请仔细阅读艾伦 Aaron的博客;或是直接阅读jQuery在gitbub上的源码(目前的master版本是2.2-stable,笔者阅读的也是这个版本的代码)。如果在阅读后也和笔者一样,对一些内容存在疑问,可以看看笔者的系列博客,看看你有没有你疑惑的问题;如果没有就发问给我,我们一起思考答案。


提问:如何构建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目录结构是怎样的

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

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

几个地方值得注意一下:

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的过程。 


提问:源码中经常有(#xxxx)这样的注释,他们是什么?

很多地方的注释,都有(#xxxx)的字样,如下:

// Use the original fragment for the last item
//
instead of the first because it can end up
//
being emptied incorrectly in certain situations (#8070).

答:这些是使用者提出的bug,jQuery的作者们根据bug修复的补丁。jQuery的源码在github上,bug大多都被提到了github上的issues里面,里面的每个bug都有个编号,就是#后面的几个数字,地址“https://github.com/jquery/jquery/issues/”加上这个编号就是bug所在的url了。进入这个url可以查看具体的bug说明和jQuery的作者们对于这个bug的修复情况。除了github的issues,jQuery在其官网也有一个buglist(“https://bugs.jquery.com/ticket/”),不过现在好像访问不了了,这个网站的后面同样有一串数字,#xxxx也有可能指的是这个网址里面bug的id。

 

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


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com