「計算機之子」winter：個人前端學習路線與方法

你好，我是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 這樣的移動前端開發框架。