如何看angularjs源代码?

开源,angularjs
关注者
281
被浏览
13351

12 个回答

不建议看。一切东西,如果量太大,都是不适合直接学习的,容易迷失在细节的汪洋大海中,对心理造成不可磨灭的阴影。譬如治史,上来就通读二十四史,二十五别史之类,肯定是不对的,应当先读各种纲要,然后在具体深入细节。

如果要抱着学习的态度看,应当优先看同类的小框架,比如:GitHub - lega911/angular-light: Angular Light is a library for building interactive MVVM web interfaces/applications.

这个是对Angular 1.x的一个山寨,基本功能都有了,但是小很多,更容易入手。

我猜测你想看Angular的源码,是为了更深入学习用,为了达到这个目的,建议你按照这个顺序:

- 了解Angular是解决什么问题的
- 试用它,熟悉大致有些什么功能
- 猜测一些主要细节的实现方式
- 自己山寨一下,看能不能做出来
- 始终做不出来,或者觉得做不好的地方,再去看源码对应的部分,其实它也未必比你写得好,一个上规模的项目,处处高质量是不可能的。

那么,Angular中有哪些东西可以了解一下呢?

- 数据变更的监测方式有哪些,Angular采用了什么,有什么好处,有什么坏处,如何处理数据变更中产生的异常?如何避免不收敛的数据变更?Knockout和Vue分别怎么做的,他们为什么要这样做?
- 作用域树、作用域之间的继承、作用域上的事件、赋值分别是怎样实现的
- 表达式如何动态解析,如何避免不安全的表达式?
- 数据如何跟DOM建立关联?索引如何建立,如何确定唯一索引,如何显式指定索引?
- 常用的事件是如何封装的?
- 模块和依赖注入是怎么实现的?是否确有必要?

其实上面都不重要,想更好地学习,请买这本书:Build Your Own AngularJS

30-39$,200块钱左右,不要觉得贵,学懂任何一章都能让你身价上涨不少,尊重知识,尊重自己,大家一起做上进的好码农~
一般大型的项目,比较难以找准切入点。但是 AngularJS 是 Pure JavaScript,不像 Angular 2 和 VS Code 是 TypeScript 抽象层级这么高,属于打开一个文件就可以开始阅读的。加上模块化做得好,是一个非常值得学习的代码库。

我当时也是半主动半被动地看了一部分 Angular 的源码,大致方法如下:

被动地
遇到了 Angular 的 bug。如果你很熟悉 AngularJS 框架的使用,那么对你理解源码本身会非常有好处。当你按照文档的说明使用仍然出了问题,直接往 AngularJS 中加断点。Debugging 是了解代码的不二法则。

当然遇到 ng 的 bug,这种事情不常发生,我也只遇到了两次
$http always transform response content '[abc}' to JSON even we already set resp content type as 'application/octet-stream' · Issue #10349 · angular/angular.js · GitHub

ngOptions slow in IE with large arrays · Issue #12076 · angular/angular.js · GitHub

主动滴
在我使用 Angular 的过程中,不断地使用 $http, ng-repeat, $sce, filter,我打算去看看他们是怎么实现的。

比如 $q,angular.js/q.js at master · angular/angular.js · GitHub 一共只有三百行代码,实现了 Promise,半天就看完了。

所以你可以把 github.com/angular/angu 下面的核心组件先一个个看完,然后挑一些 github.com/angular/angu 看看就行,毕竟都是差不多的。

零散地把模块们看下去,接下来就是看要如何进行组装了。这里我同样推荐 Build Your Own AngularJS,这本书基本按照 AngularJS 的实现进行了解构,可以参考这本书中的顺序,自上而下地了解 AngularJS 的架构。