知乎問答：一年內(nèi)的前端看不懂前端框架源碼怎么辦？以下是我的回答，閱讀量 1000+。現(xiàn)在轉(zhuǎn)載到微信公眾號中。鏈接：https://www.zhihu.com/question/350289336/answer/910970733

其他回答的已經(jīng)很好了。

剛好最近在寫學(xué)習(xí)源碼整體架構(gòu)系列，所以來回答下這個問題。先把 JS 基礎(chǔ)打好。比如至少作用域、原型鏈、異步等要掌握好。數(shù)組、字符串、正則、對象等 API 一定要熟練，不熟練也可以查閱 MDN^[1]文檔，也可以看以下我推薦的文章熟悉一遍?！旧疃乳L文】JavaScript 數(shù)組所有 API 全解密^[2]

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

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

對象 API 看我寫的這篇~JavaScript 對象所有 API 解析 | 若川的博客^[5]

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

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

怎么看源碼？

借助調(diào)試

可以調(diào)試后打包后的源代碼。也不用每個函數(shù)都知道是干嘛的，理清主線即可。

多搜索幾篇別人寫的高贊源碼文章，看別人文章，是站在巨人的肩膀上。

不懂的地方查閱，記錄下來。寫文章記錄下來，覺得寫的還不錯，發(fā)布出來。

經(jīng)過一系列的學(xué)習(xí)。剛開始可能看的很慢，不懂的地方查閱，記錄下來，就是一種成長。這樣就會有一定的正反饋。越容易持續(xù)看完。到后期看著看著，會發(fā)現(xiàn)調(diào)試一遍，很多代碼都類似，很容易看懂，越學(xué)越快，越看越上癮，那說明成長很快。

最后總結(jié)原理

總結(jié)自己看完這個框架或者庫的原理是什么，跟網(wǎng)上資料對比，學(xué)為已用。

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

也可以看我寫的學(xué)習(xí)源碼整體架構(gòu)系列來學(xué)習(xí)，學(xué)習(xí) vuex 源碼整體架構(gòu)，打造屬于自己的狀態(tài)管理庫^[7] 基本都寫了如何調(diào)試代碼，我就是按照上述流程來學(xué)習(xí)的。

我的博客可能閱讀體驗更好些。若川的博客^[8]

如果最后發(fā)現(xiàn)，別人寫的源碼文章也不過如此，你也能寫，能寫得更好，那就是成長。

原創(chuàng)精選文章

工作一年后，我有些感悟(寫于2017年)

高考七年后、工作三年后的感悟

面試官問：JS的繼承

前端使用puppeteer 爬蟲生成《React.js 小書》PDF并合并

學(xué)習(xí) jQuery 源碼整體架構(gòu)，打造屬于自己的 js 類庫

學(xué)習(xí)underscore源碼整體架構(gòu)，打造屬于自己的函數(shù)式編程類庫

學(xué)習(xí) lodash 源碼整體架構(gòu)，打造屬于自己的函數(shù)式編程類庫

學(xué)習(xí) sentry 源碼整體架構(gòu)，打造屬于自己的前端異常監(jiān)控SDK

學(xué)習(xí) vuex 源碼整體架構(gòu)，打造屬于自己的狀態(tài)管理庫

微信公眾號交流

主要發(fā)布前端 | PPT | 生活 | 效率相關(guān)的文章，長按掃碼關(guān)注。歡迎加我微信lxchuan12（注明來源，基本來者不拒），拉您進(jìn)【前端視野交流群】，長期交流學(xué)習(xí)~

參考資料

[1]

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

[2]

【深度長文】JavaScript數(shù)組所有API全解密: http://louiszhai.github.io/2017/04/28/array/

[3]

JavaScript字符串所有API全解密: http://louiszhai.github.io/2016/01/12/js.String/

[4]

《JavaScript正則迷你書》: https://juejin.im/post/59cc61176fb9a00a437b290b

[5]

JavaScript 對象所有API解析 | 若川的博客: http://lxchuan12.github.io/js-object-api

[6]

若川的知乎專欄: https://zhuanlan.zhihu.com/lxchuan12

[7]

學(xué)習(xí) vuex 源碼整體架構(gòu)，打造屬于自己的狀態(tài)管理庫: https://zhuanlan.zhihu.com/p/92906380

[8]

若川的博客: https://lxchuan12.cn/posts

由于公眾號限制外鏈，點擊閱讀原文，或許閱讀體驗更佳，覺得文章不錯，可以點個在看呀^_^

總結(jié)

以上是生活随笔為你收集整理的知乎问答：一年内的前端看不懂前端框架源码怎么办？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。