前言
在前端三大框架日益變成前端必備工具時，考察一些框架的原始碼變成了面試必問，也是初級前端到高階前端實現晉升的有效途徑之一。也有很多資深大佬推薦我們有時間多去讀原始碼，能很大程度提升自己的能力和認識。（大佬請繞過忽略，只是可能寫給剛入門的前端同學的一些觀點）
那麼作為一名業務前端，或者一名初級前端，或者也是一名高階前端該怎麼看待這個事情，有沒有必要真的去研讀原始碼，以及將這件事放在什麼重要等級上呢？這也是很多前端或許擴大到程式設計師都一直在爭議的話題：面試造火箭，實際擰螺絲。
背景
其實，在我們討論一件事有什麼價值之前，有兩個問題我們要必須清楚，1 這件事是否是有益的 2 這件事是否適合現在的自己，是否能解決自己當前的剛需。
- 第一個問題，學習一些框架原始碼肯定是有益的，這個毋庸置疑的。
- 第二個問題，對於當下的自己是否有必要，有沒有必要當做提升自己或者一定要變成必讀的部分。這個我們大多數人並不確定其實。
技術可能的幾個階段
在談一些技術框架的時候，首先要認識到技術框架意味著什麼，什麼是我們真的要學習的。前期，掘金還相繼出現過一波的什麼停止學習框架、駁停止學習框架之類的文章，起源就是因為外文的一個大佬提倡大家不要以學習框架為主為最終目的，讓大家儘量多把重心放在技術和設計思想上，然後有些人曲解了觀點。我的觀點也是如此，非常贊成原文的觀點。我自己將技術分為以下三個階段：
基礎階段
- 技術基礎，底層api
- 技術原理(入門層次)
- 基於框架的基本使用
進階階段
- 框架原始碼解讀能力
- 程式碼設計思想
- 針對業務邏輯分析定製技術方案
- 知識廣度
- 技術原理（深層次）
專家階段
- 基於框架的研發（造輪子）
- 基於技術基礎的研發（造輪子）
- 基於業務的聚合設計
- 針對大資料、大併發、高要求、高安全等需求的高質量方案
如何學習
目前市場上大多數的前端屬於5年以內經驗的，隨著大部分公司對前端的工作經驗要求越來越高，慢慢的公司都喜歡加上一條期望3-5年的工作經驗。因為前端技術在快速迭代，我最誠懇的建議就是重學前端。
基礎學習
首先，我們有必要列一下前端的知識圖譜。一般情況下，圖譜上所能列出的是多數都有書籍參考或者大部分所熟悉的知識點，也就是處於第一階段的。這時候我會推薦大家學習以及瞭解的內容：
- 各個技術名詞的mdn解釋
- 技術大佬對一些名詞和常見問題的解釋
- 各類技術的權威指南，比如css權威指南、js權威指南、http權威指南、dom程式設計藝術、linux私房菜
- 技術框架的官網，比如vue、react、ng各自的官網以及社群，github站點以及issue
進階學習
- 技術進階的書籍，比如js高階程式、高效能的js設計
- 基於技術或者框架實戰總結的書籍，比如一系列類似名稱，es6實戰、vue實戰等
- 技術思想的，重構、設計模式
- 框架原始碼解讀，可以看大佬解讀的或者自己直接看原始碼
- 基於專案分析問題，改進問題，總結反思
專家學習
- 總結工程性質問題，分析共享，思考模型
- 總結思考基於底層如何做封裝設計
- 總結思考基於框架進行設計
- 定義團隊研發思想
- 造輪子
- 技術方案解耦與針對性方案
考察原始碼是為什麼
考察深度
考察對原始碼的理解實際是考察你的技術深度，如果你能將框架中的一些設計原理越能詳細的說出，理解對，說明你不但基礎好，而且在技術深度上有一定的造詣。當然不得不說，隨著這些內容變成面試必問題，這類問題的答案在網上有非常多的版本，而很多開發者可能會不求甚解的去背，甚至在不理解、基礎不好的情況下，一定要看懂原始碼的整個內容。如果我們的基礎不是特別好，當務之急還是基礎牢固一點。
那麼其實，如果你的專案具有一定難度或者代表性，能體現你的技術深度，也是未嘗不可的，但大多碼農可能沒有特別典型的專案能真實體現自己的全部能力，尤其是很多公司業務驅動的前提下，即使你有較好的技術可能也沒有空間去發展。
考察技術興趣
考察你是否讀了原始碼也是為了考察你是否是屬於極客型別的碼農，意味著你可能很喜歡學習研究一些程式碼，對技術具有更高的興致，具有更好的潛力。
那麼其實，如果你不讀框架原始碼，你能經常關注一些大佬的部落格或者技術貼，或者經常參與一些界內的論壇，那麼也可以用來證明你這點符合要求。
用來過濾
這點是最直接的目的，因為考察前端基礎可能對於3年甚至更久經驗來說，太沒有辦法過濾出什麼了，所以考察框架原始碼是為了過濾出你和其他人的差別，從中選擇出更具有優勢的候選人。
我們該怎麼看
心態平和
不管公司提出這樣的面試題是否合理，我們都該以正確平和的心態去理解這件事本身，不要有不平衡或者覺得這樣考核沒價值。公司怎樣篩選人才是公司的權利，或者說是面試官的面試標準，我們能做的只是讓自己儘可能優秀，在這方面可能的話花出一些時間瞭解一下。
重點是什麼？基礎 + 實戰 + 攻關
無論什麼時候，技術基礎都是在最重要的部分，我們應該讓自己的技術基礎足夠紮實，這樣能夠減少一些低階問題，能夠快速的解決一些問題，也能夠在框架更新迭代的時候，不因為框架迭代而心慌，因為無論框架怎麼迭代，其都是基於基礎api而設計封裝出的一些api。
實戰能力是最實際的能力，我也稱這點為工作技能，解決實際問題的能力。我們做一切的學習以及研究都是為了解決實際的問題，而不是為了學術或者為了好看或者kpi.這裡的實戰能力就是針對一些需求，最好與相應技術的對應，或者可以做一定的關聯。當符合某些條件時，我們能夠根據已有的知識點，提出完成需求所應該具有的技術方案，以及其細節處的收益和風險點。
攻關能力，是指能夠為公司提供技術儲備以及解決重大的技術難題。尤其是目前公司內或者網路上缺少比較類似的成熟的、針對性的方案時。
看框架原始碼是看什麼
我們學習框架，不建議形式一樣的去看每行程式碼，然後最終結果是我們看完了整個框架每個地方都知道怎麼實現的了，因為這樣做就像我們要抄一遍課文，然後每個地方加上註解一樣，固然熟悉了，但沒有什麼直接價值。
我建議我們要至少處於以下4種角度去學習原始碼：
1 為了更好的理解和使用框架。就像之前很多人都會看api使用jq一樣，實際上很多人不能正確合理高效的使用。我們讀原始碼是為了讓我們更好的理解框架為什麼能實現這樣的功能，以及我們怎樣才能更好的用好，比如像基於vue框架寫的ui框架，我們可以認為那些寫ui框架的人比較好的理解了框架的一些設計思想。
2 學習設計思想。在沒有很好地專案程式碼作為參考學習的案例時，其實我們最好的案例就是各個框架的原始碼，我們在讀原始碼時，要清楚每個關鍵點的設計總體是依賴於什麼實現的，而不是記住具體的程式碼。比如雙向繫結核心就是依賴於物件的定義屬性增加監聽，比如自定義事件的核心是釋出訂閱機制，比如keep-alive的實現的基本原理是依賴資料快取節點等。也許框架裡寫了很多api，實現了很多功能，但是其一些核心的設計上可能用到的設計思想都是一樣的，我們不需要重複的學習理解每個api是具體怎麼寫程式碼的。
3 程式碼技巧和程式碼風格。一個框架被開源被大多數人使用，我們還要從中學習框架的程式碼風格，程式碼組織方式，程式碼的技巧，這些都是隻學會基礎和設計模式後還需要提高的部分。
4 更多的去延伸場景，針對性的學習。每當我們讀一段原始碼時，要將之以一個新的角度去解讀，而不是以框架的某個檔案，某種演算法單獨的侷限於這個場景去分析。我們需要為我們自己想總結的內容找出一個更加獨立的場景和技術話題，然後綜合自己看到的幾個框架檔案，思考得出自己的答案。
小結
就到這裡了，希望大家有不同看法積極發言，下次在看完原始碼之後能夠總結出一些不同的文章。