你好，我是winter。今天我們一起來聊聊前端的學習路線與方法。
到現在爲止，前端工程師已經成爲研發體系中的重要崗位之一。可是，與此相對的是，我發現極少或者幾乎沒有大學的計算機專業願意開設前端課程，更沒有系統性的教學方案出現。大部分前端工程師的知識，其實都是來自於實踐和工作中零散的學習。
基礎知識的欠缺會讓你束手束腳，更限制你解決問題的思路。缺少系統教育加上技術快速革新，在這樣的大環境下，前端工程師保持自學能力就顯得尤其重要了。
那麼，前端究竟應該怎麼學呢？我想，我想給大家簡單分享一下自己的經驗。
學習路徑與學習方法
首先是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。
今天我帶你探索了前端的學習路徑，並提出了兩個學習方法：你要試着建立自己的知識架構，除此之外，還要學會追本溯源，找到知識的源頭。
戳此查看完整文章：
01 | 明確你的前端學習路線與方法
拓展閱讀：
一份前端知識架構圖，戳此領取
我是誰？
作者程劭非，網名“winter”，前端社區知名專家，前手機淘寶前端負責人，極客時間《重學前端》專欄作者。先後就職於微軟、盛大、阿里巴巴等公司。winter 早年做過嵌入式系統瀏覽器、電子書和 WebOS 的相關工作，近年致力於移動前端領域研究，提出過 Flexible 佈局等先進概念，也產出過 Weex 這樣的移動前端開發框架。