如何看angularjs源代碼？

01-04

開源，angularjs

不建議看。一切東西，如果量太大，都是不適合直接學習的，容易迷失在細節的汪洋大海中，對心理造成不可磨滅的陰影。譬如治史，上來就通讀二十四史，二十五別史之類，肯定是不對的，應當先讀各種綱要，然後在具體深入細節。

如果要抱著學習的態度看，應當優先看同類的小框架，比如：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，半天就看完了。

所以你可以把 http://github.com/angular/angular.js/tree/master/src/ng 下面的核心組件先一個個看完，然後挑一些 http://github.com/angular/angular.js/tree/master/src/ng/directive 看看就行，畢竟都是差不多的。

零散地把模塊們看下去，接下來就是看要如何進行組裝了。這裡我同樣推薦 Build Your Own AngularJS，這本書基本按照 AngularJS 的實現進行了解構，可以參考這本書中的順序，自上而下地了解 AngularJS 的架構。

我覺得也不是完全不建議看

ng的文檔頁面中每個模塊方法函數指令都可以直接鏈接到github上的源代碼頁面，你可以對一些你感興趣的指令或者是什麼的直接點進去看源代碼，這樣比沒頭沒尾的直接看整個框架的源代碼要強的多，而且重要的是，一般來說你肯定能看懂

我一般是文檔上不清楚，又百思不得其解的時候，就去看源碼。這樣就能得到解答。

最好帶著學習或者其他很強的目的性去看其中一個特性，而且在看之前，學習相關功能的解釋或者 overview 之類的文章。

比如之前我想寫一個有依賴注入功能的框架，只能看 AngularJS1.x 了是吧？

於是把從入口開始看，從 bootstrap 看到 loadModule 再到 service 等的函數，的確有不少收穫。然後借（復）鑒（制）了一下代碼到自己寫的代碼中，再改造一下適合自己使用（加上模塊namespace……）。感覺讀代碼的過程還算不錯。

建議不要看源碼。

建議在使用過程中，去揣測、推測、感受這樣設計的初心。能了解這一點，山寨個angular也不是難事。

一般來說，框架難的部分，不是編寫，而是大局上的結構設計。你要先感受「如果我是lib用戶，怎麼用會比較好」，才有可能造出一個好用的東西。

切忌不要陷進去代碼的細枝末節而忽略了全局。

如果一定要看的話，可以藉助這本書的幫助。

Build Your Own AngularJS

書中詳細介紹了如何自己實現一個相對簡單的 angular.js，真正的 ng 中用到的技巧大部分都涉及到了，一些 ng 自己實現的工具庫則藉助了 underscore 這樣的庫來代替，不過對理解 ng 源碼影響不大。

建議購買正版，好處是現在作者還在不定期對書的內容進行更新，每次更新都會給正版用戶郵箱發送新版下載鏈接，還是很良心的。

曾經也嘗試讀過ng的源代碼，有幾個感覺：

1，ng是最難讀懂的框架，不是之一。不是說寫的太差了，是作者太多應用了函數式編程的高階特性，和我輩從過程式入手的思維模式相差太大。曾經是想通過學習ng源代碼來進階學習函數式編程，可至今沒進行。

2，要完整閱讀源代碼，尤如摸透一個原始森林，你很快就會迷航，其困難度太大了。但如果掌握了方法，不要泛泛學習每一行代碼，而是每次圍繞著一個具體的問題或線索來學習，則會有效很多。我對ng組件的生命周期管理，數據綁定最好奇，我會設計一個簡單的demo，然後調試源化碼，來理解框架到底幹了什麼?每次只關注一個問題，與此無關的源代碼盡量忽略。此外，不是逐行的閱讀代碼，而是跟著demo的運行時，跟著調試器來閱讀代碼。一份活的執行視圖遠比靜態的源代碼容易閱讀。

3，不要為閱讀而閱讀，而是思考，這個特性是怎麼實現的，我會不會?如果我已經知道如何實現這個特性，就不太需要去學習源代碼了。而對我不知道的，才有必要去研究。你要去思考，如果我來設計和實現ng，要怎麼做?想不出來的話，只有學習源代碼了。

4，很多開發人員是不看源代碼的。我不是，我所用過的框架，都翻過或多或少的源代碼。到了最後，我會發現，真正了解一個框架，其實不是你掌握了多少框架的特性，而是你理解了這個框架作者的想法以及它的內在基礎。我們的團隊中對ng都比我更熟悉，但有疑難雜症時卻往往需要我來出手。其實還是源代碼閱讀幫助了我。

5，我強烈支持程序員一定要多閱讀源代碼，尤其是你正在應用的好的技術。你正在應用的技術或框架或許將很快被替代，但你從好的源代碼中學到的知識卻可能融入你的大腦，歷久彌新。

先看digest實現，過一圈感覺沒問題了，再外延出來。

如果第一次看源碼，建議看看jquery。不建議一下子看這麼大的。

建議分清楚 類庫部分 和 運行時部分。

類庫部分包括一些內置的 Directive 和 Service，這些本身就是通過合法的方式調用合法的 API（當然也有一些調了 Undocumented API 的）實現的，可以作為參考。

運行時部分如徐飛老師所述，除非有明確的目的和需求否則意義不大。

推薦一篇好譯文,講的是如何構建自己的窮人版ng

http://purplebamboo.github.io/2015/05/27/use-200-line-code-to-implementation-a-simple-angular/

有需求再看吧 2w多行代碼沒有目的看著看著估計就睡著了。

個人理解需求就是比如你在研究angular的一些實現原理，就比如說臟檢測是怎麼觸發的，為什麼自己定義的指令裡邊在事件處理函數裡面改變數據模型頁面上綁定該數據模型的視圖不會改變，為什麼ng-click裡面的事件處理函數就可以改變視圖。這時候就是去看ng-click指令在源碼中的實現的時候了