知乎問答：一年内的前端看不懂前端架構源碼怎麼辦？

知乎問答：一年内的前端看不懂前端架構源碼怎麼辦？以下是我的回答，閱讀量 1000+。現在轉載到微信公衆号中。

其他回答的已經很好了。

剛好最近在寫學習源碼整體架構系列，是以來回答下這個問題。先把 JS 基礎打好。比如至少作用域、原型鍊、異步等要掌握好。數組、字元串、正則、對象等 API 一定要熟練，不熟練也可以查閱 MDN[1]文檔，也可以看以下我推薦的文章熟悉一遍。【深度長文】JavaScript 數組所有 API 全解密[2]

JavaScript 字元串所有 API 全解密[3]

正則可以看這個《JavaScript 正則迷你書》[4]

對象 API 看我寫的這篇~JavaScript 對象所有 API 解析 | 若川的部落格[5]

掌握 API 後，再掌握 new、call、apply、bind，JS 的繼承、JS 的 this 指向這些。關于這些，我寫了一個面試官問系列，可以看看。若川的知乎專欄[6]

有了以上這些基礎後，接下來就是先看相對簡單的 JS 庫或架構的源碼。比如 jQuery、underscore、lodash、axios 這些相對簡單的源碼。

怎麼看源碼？

1. 借助調試

可以調試後打包後的源代碼。也不用每個函數都知道是幹嘛的，理清主線即可。

1. 多搜尋幾篇别人寫的高贊源碼文章，看别人文章，是站在巨人的肩膀上。
2. 不懂的地方查閱，記錄下來。寫文章記錄下來，覺得寫的還不錯，釋出出來。

經過一系列的學習。剛開始可能看的很慢，不懂的地方查閱，記錄下來，就是一種成長。這樣就會有一定的正回報。越容易持續看完。到後期看着看着，會發現調試一遍，很多代碼都類似，很容易看懂，越學越快，越看越上瘾，那說明成長很快。

1. 最後總結原理

總結自己看完這個架構或者庫的原理是什麼，跟網上資料對比，學為已用。

有一定成長後，再去看 vue、vuex、vue-router、react、react-router、react-redux 等更大型的架構或者庫的源碼。

也可以看我寫的學習源碼整體架構系列來學習，學習 vuex 源碼整體架構，打造屬于自己的狀态管理庫[7] 基本都寫了如何調試代碼，我就是按照上述流程來學習的。

我的部落格可能閱讀體驗更好些。若川的部落格[8]

如果最後發現，别人寫的源碼文章也不過如此，你也能寫，能寫得更好，那就是成長。

微信公衆号交流

主要釋出​

​前端 | PPT | 生活 | 效率​

​​相關的文章，長按掃碼關注。

參考資料

[1]

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript

[2]