對於大多數前端工程師來說，一直面臨的問題，是從未進行過前端技術的系統學習。
我見到有一些具有多年從業經驗的工程師，仍然會在看到一些用法時驚呼：“還可以這樣！”
在我看來，這些用法都是一些基礎的不能再基礎的知識點，但是他們卻渾然不知。如果深入進去了解，你會發現，表面上看他們可能是一時忘記了，或者之前沒注意，但實際上是他們對於前端的知識體系和底層原理沒有真正系統地理解。
那麼，前端究竟怎麼學？今天，跟大家聊一聊我的前端學習路線和方法。
** 學習路徑與學習方法**
首先是 0 基礎入門的同學，你可以讀幾本經典的前端教材，比如《JavaScript 高級程序設計》、《精通 CSS》等書籍，去閱讀一些參考性質的網站也是不錯的選項，比如 MDN 。
如果你至少已經有了一年以上的工作經驗，希望在技術上有一定突破，我想和你談兩個前端學習方法。
** 方法一：建立知識架構**
建立自己的知識架構，並且在這個架構上，不斷地進行優化。
什麼叫做知識架構？我們可以把它理解爲知識的“目錄”或者索引，它能夠幫助我們把零散的知識組織起來，也能夠幫助我們發現一些知識上的盲區。當然，知識的架構是有優劣之分的，最重要的就是邏輯性和完備性。
我們來思考一個問題，如果我們要給 JavaScript 知識做一個頂層目錄，該怎麼做呢？
如果我們把一些特別流行的術語和問題，拼湊起來，可能會變成這樣：
類型轉換；
this 指針；
閉包；
作用域鏈；
原型鏈；
……
這其實不是我們想要的結果，因爲這些知識點之間，沒有任何邏輯關係。它們既不是並列關係，又不是遞進關係，合在一起，也就沒有任何意義。這樣的知識架構，無法幫助我們去發現問題和理解問題。
如果讓我來做，我會這樣劃分：
文法；
語義；
運行時。
爲什麼這樣分呢，因爲對於任何計算機語言來說，必定是“用規定的文法，去表達特定語義，最終操作運行時的”一個過程。這樣，JavaScript 的任何知識都不會出現在這個範圍之外，這是知識架構的完備性。
我們再往下細分一個層級，就變成了這個樣子：
文法
詞法
語法
語義
運行時
類型
執行過程
我來解釋一下這個劃分。
文法可以分成詞法和語法，這來自編譯原理的劃分，同樣是完備的。語義則跟語法具有一一對應關係，這裏暫時不區分。
對於運行時部分，這個劃分保持了完備性，我們都知道：程序 = 算法 + 數據結構，那麼，對運行時來說，類型就是數據結構，執行過程就是算法。
當我們再往下細分的時候，就會看到熟悉的概念了，詞法中有各種直接量、關鍵字、運算符，語法和語義則是表達式、語句、函數、對象、模塊，類型則包含了對象、數字、字符串等。
這樣逐層向下細分，知識框架就初見端倪了。在頂層和大結構上，我們通過邏輯來保持完備性。
如果繼續往下，就需要一些技巧了，我們可以尋找一些線索。
比如在 JavaScript 標準中，有完整的文法定義，它是具有完備性的，所以我們可以根據它來完成，我們還可以根據語法去建立語義的知識架構。實際上，因爲 JavaScript 有一份統一的標準，所以相對來說不太困難。
如果是瀏覽器中的 API，那就困難了，它們分佈在 w3c 的各種標準當中，非常難找。但是我們要想找到一些具有完備性的線索，也不是沒有辦法。我喜歡的一個辦法，就是用實際的代碼去找：for in 遍歷 window 的屬性，再去找它的內容。
我想，學習的過程，實際上就是知識架構不斷進化的過程，通過知識架構的自然延伸，我們可以更輕鬆地記憶一些原本難以記住的點，還可以發現被忽視的知識盲點。
** 方法二：追本溯源**
有一些知識，背後有一個很大的體系，例如，我們對比一下 CSS 裏面的兩個屬性：
opacity；
display。
雖然都是“屬性”，但是它們背後的知識量完全不同，opacity 是個非常單純的數值，表達的意思也很清楚，而 display 的每一個取值背後都是一個不同的佈局體系。我們要講清楚 display，就必須關注正常流（Normal Flow）、關注彈性佈局系統以及 grid 這些內容。
還有一些知識，涉及的概念本身經歷了各種變遷，變得非常複雜和有爭議性，比如 MVC，從 1979 年至今，概念變化非常大，MVC 的定義幾乎已經成了一段公案，我曾經截取了 MVC 原始論文、MVP 原始論文、微軟 MSDN、Apple 開發者文檔，這些內容裏面，MVC 畫的圖、箭頭和解釋都完全不同。
這種時候，就是我們做一些考古工作的時候了。追本溯源，其實就是關注技術提出的背景，關注原始的論文或者文章，關注作者說的話。
操作起來也非常簡單：翻翻資料（一般 wiki 上就有）找找歷史上的文章和人物，再順藤摸瓜翻出來歷史資料就可以了，如果翻出來的是歷史人物（幸虧互聯網的歷史不算悠久），你也可以試着發封郵件問問。
這個過程，可以幫助我們理解一些看上去不合理的東西，有時候還可以收穫一些趣聞，比如 JavaScript 之父 Brendan Eich 曾經在 Wikipedia 的討論頁上解釋 JavaScript 最初想設計一個帶有 prototype 的 scheme，結果受到管理層命令把它弄成像 Java 的樣子（如果你再挖的深一點，甚至能找到他對某位“尖頭老闆”的吐槽）。
根據這麼一句話，我們再去看看 scheme，看看 Java，再看看一些別的基於原型的語言，我們就可以理解爲什麼 JavaScript 是現在這個樣子了：函數是一等公民，卻提供了 new this instanceof 等特性，甚至抄來了 Java 的 getYear 這樣的 Bug。
以上就是我的前端學習路徑，我介紹了兩個學習方法：你要試着建立自己的知識架構，除此之外，還要學會追本溯源，找到知識的源頭。
道理我們都懂，可是去哪學這些內容呢？在這裏，給大家推薦一個學習平臺—在我們的學習圈內，每天都會有行業大咖分享學習技巧，實戰操作，爲大家講解現在前端發展趨勢，學習路線，歡迎小白進來取經。還有免費的直播課，包含前端學習的技巧、源碼、語法、架構等。
更多文章推薦閱讀 【 學習企鵝圈：731771211 】 ：
2020年Web前端開發工程師市場怎麼樣？學會什麼技術才能拿到高薪