AngularJS 1.0 源码学习笔记(一)- src目录结构

前言:

偶然发现在全职做程序员的这一年里,虽然接触的第三方代码很多,也hack过很多已有的库,但是却还没有好好完整的读过一份现在流行框架的源码,甚至对于使用得很熟练的angularJs,对于它的实现方式都没有做到完全透彻的理解,感觉真是相当惭愧。

为此,我在最近开始了两项纯粹的学习计划:
1. 阅读Angular1.0的源代码并且完整理解它的设计模式和理念
2. 学习Angular2.0的使用方法

由于这份笔记是边学边写,可能我会在初次发布时对于全局的代码有理解偏差或者错误的地方。如果存在这样的情况,我会尽量在之后回来进行勘误和修改。

为了能够学习AngularJS,首先当然应该就是获得它的代码,最直接的就是直接使用它的完整comment版本(目前稳定版本为1.5.7 -by 2016-07-20):https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js

对于中文语言的学习者,其实还有各种大牛们对于comment的中文翻译版本(大家可以自行google)

但是我选择学习angularjs github repository中的src部分,

这样有几个好处:
1. 它根据进行不同的功能和代码分块(甚至还包括了拓展模块比如ngRoute等),更便于阅读
2. 它实际上进行文本连接以后就能变成完整的单个js文件
3. 如果以后参加开源计划或者打算自己hack angularjs, 对于单个功能模块的修改都是对这些js文件进行

打开angularjs的src文件目录,我们可以看到很多独立的js文件和模块文件夹。为了更好的理解这些文件是都是做什么的,以及它是如何build成为一个完整的angularjs文件的,我们可以参考在angularjs github根目录下的gruntfile.js以及angularFiles.js文件。(这是用于使用grunt对angular进行build的相关配置文件)

Gruntfile.js片段:(build 配置中)

可以看到, 在使用Grunt打包Angularjs时, 使用的源代码文件包是使用grunt utils的wrap函数进行封装:

存在于/lib/grunt/utils.js中的片段:

所以在build angular.js时,合并文件的流程就是 src/angular.prefix + files[‘angularSrc’]中的文件 + src/angular.suffix的顺序

而在最外层目录的angularFiles.js中包含着angularSrc文件的定义,这些文件包裹了angular基本结构以及基础的ng module. 各个文件的作用我将在下面的代码片段中一一注释给出(将会随着我对angularjs源码阅读的进度给出)

对于angular的其他module, 比如ngRoute,则也是有着相同的一套构建结构,而源文件则存在于/src/ngRoute/文件中,由于这次我先只解析angularjs本体的源代码,这些可能之后再来展开讨论。

另外,遵从一些社区的建议,angularjs官方文档中一些concept的解释也会对源码的阅读有很大的帮助:https://docs.angularjs.org/guide/concepts

 

发表评论