來聊聊源碼學習

來自專欄猿論

現如今我們的開發工作並不會從零開始，往往會基於很多開源庫，就前端而言，構建工具我們會使用 webpack，MVVM 框架我們會使用 Vue、React 或者 Angular，這些開源工具幫助我們大大提升了生產效率。

通常我們學習一個開源項目的步驟都是先去閱讀它的官方文檔，下載安裝後運行它的一些 demo 實例，然後在工作中去應用和踩坑。當我們對一個開源項目熟練使用並掌握後，再想去深入了解它就需要去閱讀它的源碼了。

很多同學都嘗試學習過源碼，目前業內也會有各種開源庫的源碼解析文章，那麼今天我們也來聊聊源碼學習這個事兒。

為什麼做

為什麼大家對源碼解析這個事情樂此不彼呢，或者說我們為什麼要去學習源碼呢，通常有以下幾個原因：

興趣驅動

這樣的同學往往是對技術非常熱愛，對未知技術的探索有著非常大的興趣，喜歡刨根問底。因此對於優秀的開源項目，他們都會非常願意花時間去探究它的實現原理，並且一旦弄明白後會有非常大的成就感。

技術驅動

這樣的同學往往是願意通過更多的學習來提升自己的技術能力。造輪子的技術含量比使用輪子的技術含量高，那麼研究輪子的實現原理，知道這個輪子是如何造出來的，也能在很大程度上提升自己的技術能力。而且一般研究的源碼都是和工作相關，學習源碼也可以很好輔助自己平時的工作開發。

坑驅動

這樣的同學會在使用開源項目過程中踩到一些坑，並且查閱資料無果後決定來看一下源碼的實現，去找一下問題的原因。但是坑驅動學習源碼的方式比較被動，往往只能學習到源碼的冰山一角，效果不如前 2 者。

面試驅動

這樣的同學可能佔比最高，因為如今很多面試官都喜歡問一些技術的實現原理，那麼就會逼迫大家在面試前去學習平時工作中使用到技術棧的原理實現，但是這樣的學習是最被動的，很多人可能選擇去看一些源碼解析的文章去死記硬背，而並沒有真正掌握源碼實現的精髓。

什麼時候做

學習源碼固然是件好事，但是如果在了不恰當的時機去學習可能會適得其反。有一部分同學對一個開源項目甚至都沒搞清楚是幹什麼的時候就開始去看源碼了，如果是一些稍微複雜的開源項目，這樣的效率非常低下的，很大概率是時間浪費了什麼也沒有學到。

那麼什麼時候我們該學習源碼呢，我認為你至少已經對這個開源項目的使用已經很熟練了，並且對它的設計思想，用來解決什麼問題等等都比較清楚的時候，為了進一步對它深入學習，就可以來看它的源碼實現了。

怎麼做

那麼如何去學習源碼就非常重要了，誠然學習源碼是一定會花時間的，好的學習方法會大大提升學習效率，事半功倍。其實社區也有人推薦了一些學習源碼的方式，比如說從源碼早期的 commit 開始看，仿造一個小型輪子等等。這裡我結合自己看源碼的經驗總結了幾個點。

全盤了解

首先你要對這個開源項目要有全盤的了解，知道它產生的背景，來解決什麼樣的問題。開始看源碼前，先對它的源碼目錄結構、代碼執行入口、構建打包方式、最終產出的文件等等有一個整體的了解。需要用一個全局的視野去審視源碼，切忌漫無目的的看源碼。

問題驅動

在全盤了解的基礎上，就可以通過問題驅動去看源碼了。以 Vue.js 為例，我們知道了它的核心思想是數據驅動 + 組件化，那麼我們就可以問自己，Vue 模板的數據是如何渲染到 DOM 上的，數據更新後模板是如何重新渲染的，組件化是如何實現的，模板到 render 函數如何編譯的等等。那麼每一個問題都可以值得我們針對性地去學習源碼。問題驅動的方式和坑驅動不同的地方在於這個學習過程是主動的，自驅的，學到的東西會更加系統和全面；而坑驅動往往都會滿足於解決某個問題就停下了，學習會比較局限。

主線優先

當我們通過問題驅動去看代碼的時候，要牢記主線優先，所謂主線就是解決你這個問題核心流程中的代碼。因為通常一個開源項目它的功能會很豐富，所以代碼分支邏輯會有很多。而當我們帶著問題去看源碼的時候，切忌像代碼執行一樣把每個分支邏輯都去看一遍，我們要關心的就是主線部分。分支邏輯通常都是為了解決某些特定場景的問題，那麼如果想學習它的話就針對這個場景分析的時候再回來看即可。還是以 Vue.js 為例，比如我們在分析模板是如何驅動 DOM 渲染的，我們只要關心核心流程 init -> mount -> render -> update -> patch 這個過程的實現即可。那麼過程中遇到的初始化響應式對象這些分支邏輯，我們就可以先不看，因為當前分析的這個場景並不會有數據更新的部分，而這部分內容我們可以放到深入研究響應式原理的時候再看。

參與共建

我理想中的開源社區是有更多的人參與到開源項目的共建中，當我們給開源項目做貢獻的時候，會要求我們對源碼的理解要更加深入。共建的方式有多種，比如可以給開源項目提個 pr；比如主動要求幫助解決開源項目現有的 issue；比如參與開源項目的文檔編寫工作等等。我在研究 Vue.js 源碼的過程中，也發現了一處源碼的實現和文檔不符的情況，於是提了 pr 對這個文檔做了修復。通過共建的方式不僅僅可以幫助我們學習源碼，也能增加成就感，一舉兩得。

閱讀技巧

當然，閱讀源碼也是有很多技巧的，比如關鍵地方加斷點單步調試、複雜函數看單元測試的輸入輸出、複雜邏輯通過畫圖輔助等等。

輔助資料

看懂源碼實際上是一個有挑戰的過程，特別是一個複雜的開源項目。不同水平的人可能對源碼的理解程度不一樣，這時候如果有一些別人分析好的優秀資料輔助我們學習源碼，那麼效率會大大提升，理解起來也會更加容易。但是社區源碼分析的資料很多，如何鑒別好的資料是非常有必要的。

Vue.js 源碼學習

Vue.js 作為前端 MVVM 框架，已經被越來越多的公司使用，各類的源碼分析文章也層出不窮。但是縱觀這些源碼分析文章，大部分都是作者的一些學習筆記，通過給源碼加一些注釋的方式，這種資料和直接去看源碼差別並不大，因為源碼也會在一些需要的地方加上注釋（除非你英文很差看不懂）。另一個比較大的問題就是比較零散，不夠系統和全面，如果想完整地去學習 Vue.js，這種東拼西湊的學習資料其實效果也並不好。但是社區也有做的不錯的，比如染陌同學的 learnVue，算是我見到的比較全面的 Vue.js 源碼分析系列文章了。

由於我平時的工作項目就是利用 Vue.js 開發的，所以對 Vue.js 的研究也算比較多。我之前在慕課網上做過 2 門 Vue.js 的實戰課程，第一門《 Vue.js 高仿餓了么》課程幫助大家入門了 Vue.js，第二門 《Vue.js 音樂 App》課程幫助大家在 Vue.js 的實戰方面做了進階。去年第二門課程出了後，我就在思考一件事，如何幫助我的學生在 Vue.js 這個方向繼續提升。於是我想到了做一門 《Vue.js 源碼全方位深入解析》的課程，幫助同學們修鍊內功。

市面上還沒有源碼解析類的視頻教學課程，我是第一個吃螃蟹的，源碼課程的錄製難度要遠大於實戰課程的錄製，從開始準備到課程上線，經歷了半年以上的時間。為了把 Vue.js 的源碼講明白，我結合了自己讀源碼的經驗，把課程設計成由淺入深，分為核心、編譯、擴展、生態四個方面去講，並拆成了八個章節，如下圖：

第一章：準備工作

介紹了 Flow、Vue.js 的源碼目錄設計、Vue.js 的源碼構建方式，以及從入口開始分析了 Vue.js 的初始化過程。

第二章：數據驅動

詳細講解了模板數據到 DOM 渲染的過程，從 new Vue 開始，分析了 mount、render、update、patch 等流程。

第三章：組件化

分析了組件化的實現原理，並且分析了組件周邊的原理實現，包括合併配置、生命周期、組件註冊、非同步組件。

第四章：深入響應式原理

詳細講解了數據的變化如何驅動視圖的變化，分析了響應式對象的創建，依賴收集、派發更新的實現過程，一些特殊情況的處理，並對比了計算屬性和偵聽屬性的實現，最後分析了組件更新的過程。

第五章：編譯

從編譯的入口函數開始，分析了編譯的三個核心流程的實現：parse -> optimize -> codegen。

第六章：擴展

詳細講解了 event、v-model、slot、keep-alive、transition、transition-group 等常用功能的原理實現，該章節作為一個可擴展章節，未來會分析更多 Vue 提供的特性。

第七章：Vue-Router

分析了 Vue-Router 的實現原理，從路由註冊開始，分析了路由對象、matcher，並深入分析了整個路徑切換的實現過程和細節。

第八章：Vuex

分析了 Vuex 的實現原理，深入分析了它的初始化過程，常用 API 以及插件部分的實現。

除了課程視頻之外，我還寫了一本電子書，作為視頻的輔助教材。電子書是開源的，同學們可以免費閱讀，視頻是收費的，25+小時純乾貨課程，如果有需要的同學可以購買來學習，但請務必支持正版，請尊重作者的勞動成果。另外電子書和視頻都會持續更新和維護的，所以不必擔心 Vue.js 版本升級問題，以及後續也會在擴展章節增加新的內容，這些福利都是購買正版的學生才可以享有的喔~

結語

通常我們對一門技術的掌握程度，我把它分為了 5 個層次：會用；熟練掌握；了解其實現原理；知道為什麼這麼做；能提出更好的實現方式。相信大部分同學還在前 2 個層次，那麼對源碼的學習，可以讓我們進階到第 3 個層次。如果你達到了第 4 個層次以上，那麼你已經是一個技術專家了。

希望同學們在學習源碼的同時，不僅僅知其然，也能知其所以然。

作者：ustbhuangyi

鏈接：http://www.imooc.com/article/33858

來源：慕課網

推薦閱讀：

【重磅】認證作者招募 | 打造個人品牌 so easy ！

有獎徵文004期|從小白到大牛，進階路上有話說？

想成為頂級開發者？你需要多練習！請收好這些資源

從零做一個前端開源項目

如何使用思維導圖整理測試點？