來聊聊源碼學習

現現在咱們的開發工做並不會從零開始，每每會基於不少開源庫，就前端而言，構建工具咱們會使用 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 的源碼講明白，我結合了本身讀源碼的經驗，把課程設計成由淺入深，分爲核心、編譯、擴展、生態四個方面去講，並拆成了八個章節，以下圖：

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

結語

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

但願同窗們在學習源碼的同時，不只僅知其然，也能知其因此然。