如何閱讀框架源代碼

無論對於那個段位的 Developer 來講，讀源碼都是一件好處頗多的事情，特別於初學者而言，這能迅速的吸納優秀框架精華代碼養分，迅速成長。不巧的是，晦澀難懂的源碼，很容易讓人心生怯意。今天分享就來談一談讀源碼的方法，但願能幫到一些有心讀源碼的朋友

1、瞭解框架解決了什麼問題

這不光對讀源碼有幫助，對整個學習都頗有幫助。思考一個問題：你學習 Vue\React 的緣由，除了它們如日中天，再不學習都很差意思找工做了，還摻雜了一些它們的某些優秀特性能給我帶來某某好處的思考麼？

新潮的框架，開發者須要並且也應該去了解，用人單位須要固然是本能的驅動力，什麼火學什麼也無可厚非，可是在悶聲學習以前，須要加上一層思考，相比以前的技術體系，這個框架到底解決了什麼問題，優點在哪，懷着目的去學習纔不至於迷茫，例如 Vue\React 最大的優勢是什麼呢？組件化吧，帶着框架是如何解決這個問題的疑問去學習，定能事半功倍

對於讀源碼來講，這一步就更關鍵了，若是都不瞭解代碼是要幹什麼的，怎麼會清楚它爲何這麼寫呢？再細分一下，在仔細閱讀某個模塊的文件的時候，也應當對模塊的功能有個總體的把握

2、瞭解框架的設計思想

這一步尤其關鍵，咱們看不懂源碼（或者看起來舉步維艱），並非由於不懂某一句語法，而是不明白做者的思路。舉一個簡單的例子：

//這個方法能夠得到point2頂角的弧度值
    function getAngle(point1, point2, point3) {
        var bb = (point2.y - point1.y)*(point2.y - point1.y) + (point2.x - point1.x)*(point2.x - point1.x);
        var aa = (point3.y - point1.y)*(point3.y - point1.y) + (point3.x - point1.x)*(point3.x - point1.x);
        var cc = (point3.y - point2.y)*(point3.y - point2.y) + (point3.x - point2.x)*(point3.x - point2.x);
        var cosa = (bb + cc - aa)/(2*Math.sqrt(bb)*Math.sqrt(cc));
        return Math.acos(cosa);
    }複製代碼

getAngle方法接收三個座標參數，能夠計算出 point2 頂角的弧度值，若是不告訴你這使用了運用三角形的餘弦定理，恐怕你看半天也看不出來這是怎麼算出來的

那麼咱們能夠經過什麼渠道去了解框架的設計思想：

• 到框架的官網看文檔，開源的框架，甭管詳不詳細，這確定是第一手權威資料
• 到網上搜別人的分析總結(源碼分析也不會少)，大多數狀況下，都會有大神已經研究過了，站在巨人的肩膀上，能省很多事

另外，設計思想是整個框架層面的，對於每個實現細節，又會使用很多設計模式，例如函數式編程（Js 中最爲經常使用）、單例模式、代理模式、工廠模式等等，這就須要平時的積累了。有必定代碼量的積累以後，建議閱讀一些設計模式類的書籍，對本身的代碼設計，以及閱讀別人的源碼，都頗有益處。

3、搭建調試環境，摸清執行主脈絡

第一節咱們提到，細分到每一個模塊，要對模塊功能有個總體的把握，如何去作到這個「把握」？除了官方文檔和網上查閱的資料，最好的辦法就是寫一個簡單的 Demo，搭建好測試環境，增長一些調試信息，天然能理清除框架的生命週期中，每一步須要調用那個模塊（對於目錄結構很清晰的優秀框架，有時候也能夠憑直覺猜想，打印日誌確認）

4、分清主次

框架源碼就是一顆枝繁葉茂的參天大樹，而你要作的事情是從根部網上爬。樹要這麼多分支，時間又是這麼昂貴，閱讀的策略很重要。咱們的閱讀路徑，要以主要流程爲主（也就是樹的主驅趕，這樣才能儘量快的到達頂點），對於一些細枝末節，再這以後再來慢慢啃（或者有必要的時候）
例如，要去閱讀 Vue 的源碼，有個目錄是解析模板，生成語法樹 AST 從而最終生成 Render Function 的, 其實這一步最關鍵的是這個 Render Function 的生成結果，對於如何去解析模板、生成語法樹，能夠先放一放，回頭須要的時候再回頭看。不然你很容易卡死在某個點上出不來，從而產生放棄的念頭

5、堅持不放棄

技術策略得當，遇到棘手過不去的問題也很正常，這個時候考驗的就是毅力了，繼續調試、搜索資料、或者找個大神來問一問都行，只要不放棄就好~~