前端初學路線指南

這篇文章本是我寫給一個初學前端開發的網友的答案：看這裡

之所以寫這麼長，是因為題主洋洋洒洒列了一大堆想學的東西，過於多了，貪多嚼不爛。

而且，學東西，總要分個輕重緩急的。任何一門知識，都有個層次，有些知識的前置知識多，後置知識少，就適合後學；有些知識前置知識少，後置知識多，就得先學，而且要認真學；還有些知識，和科目中的大部分東西都不相關，一時半會兒也用不上，這種就可以暫時擱不學（比如canvas）。

所以，作為一個尚記得初學經歷的人，我給題主列了一個建議學習路徑，這也是我對大部分初學前端的朋友的建議。注意，這是給初學者的建議，如果你有很豐富的編程經驗，只是想兼修一下前端，那你完全沒必要看下面的文字。

這篇答案我並沒有像一般的技術文章一樣分門別類，做的很結構化，而是用了流水賬一樣的文字去表述。讀起來可能比較凌亂，但是我之所以這樣寫是有原因的——因為我想還原一個真實的學習過程，從細節和體驗的層面描述每一步注意什麼，收穫什麼，而不是用術語組織起一篇專業卻泛泛的文字。

以及，答案的評論中有網友說我國語輕視css了。其實不是輕視，而是覺得css技術更多的是一些方法論，這種東西不做實際項目是很難真正有收穫的，與其在初學時期把時間浪費在看css書上（還記不住），不如先依靠直覺+W3School把自己想搭的頁面搭出來，以後慢慢補充不遲。

---- 以下為正文 ----

建議學習路徑：

1. 三天時間學習 html 相關語法，別一頁一頁得看書，大致看下每個標籤幹嘛的，然後 F12 打開調試器，看看知乎的頁面怎麼堆起來的，收穫對 html 的直覺。
2. 一周時間學習 css，也別一頁一頁得看書，快速了解 DOM 和 selecter 是怎麼回事兒，然後嘗試兩三種常用布局，比如兩欄、三欄、懸浮 header（可以順便看下 flex 布局），收穫對 css 的直覺。
3. 剩下的時間一頭扎進 js 就行了，什麼工具鏈也別用，es6 什麼的也先別管。集中精力閱讀《jsvascript 高級編程》和 DOM 無關的前幾章，了解 js 語法，順便搞清楚「js 編程」是在幹嘛。

等你差不多知道 js 編程是怎麼回事兒了，就可以做練習題找找感覺了。

• 從最簡單的開始，比如列印三角形；
• 再來點稍微複雜的，比如找出 1 到 100000 裡面所有的素數；
• 最後來點經典演算法，比如快速排序、hash 表（網上有代碼，可以逐行讀懂然後默寫）；

這個過程，放長一點，一到兩個月吧，一來是找找編程的感覺，二來是了解一下計算機是怎樣處理問題的。

至此，你已經初步會用 js 編程了。

這一關過了，就可以了解瀏覽器 api 和 jquery 了。別管瀏覽器兼容，那是 legacy，早晚沒用。這一塊可以邊看文檔邊練，隨時做一些小練習，比如點擊按鈕，給某個 div 變色。沒必要每個 api 都練，重點掌握 jquery 的 $ 符（對應原生的 querySelectorAll）、attr（對應原生的 get/setAttribute）、add/remove/hasClass、bind/unbind（對應原生的 add/removeEventListener）、原生setTimeout 等若干重要方法。一定要搞清楚事件冒泡、事件代理的概念。注意 console.log 這個函數可以很方便的列印任何對象，有助於你調試。

這個過程可長可短，不要給自己設定嚴格的時間。建議分兩步走：

• 第一步，熟練掌握監聽 DOM 事件，在回調里修改 DOM 節點屬性導致網頁變樣這套模式。同時也通過應用深化一下對 js 的了解，比如 this 指針到底指向誰（原型鏈相關的就先算了）。在這個過程中編寫幾個「像網頁」的網頁。就是長得想那麼回事兒，滑鼠點點還能變的頁面。

至此，你已經初步會寫網頁了。

• 第二步，當你能熟練使用 js 監聽事件、修改 DOM 屬性的時候（比如你能做出一個簡單仿 blog 文章列表頁，打開頁面顯示文章列表，點擊文章標題彈出浮層現實全文，點擊刪除按鈕可以刪除文章），可以開始鍛煉一下邏輯思維。選一個你比較熟悉的小課題，就是那種功能你很清楚，但是一時半會兒想不明白怎麼做的小程序，比如網頁版俄羅斯方塊、貪吃蛇，自己想辦法把它做出來（盡量簡化，先別琢磨什麼關卡、難度之類的事兒）。可以查資料，但是最終要手敲。

注意數據與展示分離，你程序中的狀態是一回事兒，找一個全局對象存儲它，展示到網頁上是另一回事兒，寫一個函數，根據那個全局對象里的數據集中修改 DOM。你要是混淆到一塊兒去，保證你做不出來。另外注意分模塊，不相干的代碼，要分寫在不同的文件里。

至此，你已經是一個編程愛好者，能用代碼做出實際功能了。

等你把小程序做出來了，就可以關注下代碼習慣了。設計模式什麼的你先別關心，去網上找一個 js 編程規範，百度的，airbnb 的都可以，照著改，改到符合規範為止。

到這裡練習可以暫時停止了，重新找出你那本《javascript 高級編程》，認認真真看一遍，每有所悟，按照你的新想法修改之前你寫過的練習代碼。注意著重理解前面點到為止的概念，比如 原型鏈、閉包、ajax 等等。

等你看完了，覺得這本書對你來說難度僅在於體會背後的意義而不是理解內容本身了，就可以停下了，最難的部分你已經學完了。

至此，你應該具備了相當的自學能力，對前端的理解力已經不是往日可比。

下一步是工程化你的代碼。

先安裝 nodejs，學習 nodejs 的基礎知識，搞清楚 nodejs 是用來幹什麼的，npm 又是幹什麼的（先別管伺服器端的那些東西，暫時你還玩不動，nodejs api 方面，會讀寫文件暫時就夠用了）。然後去網上搜索「js 打包」、「eslint」等詞條，搞清楚什麼是前端工程化，為什麼要工程化。

等你看懂了，拿出你做的小程序，去網上搜索 webpack 的用法，用 webpack 把它打包成發布腳本。多擺弄一下 webpack 的配置，比如把 jquery 打包到你的程序里，以及單獨引用到網頁里，分別試試，再比如把 css 打包到程序里，以及打包為單獨的 css 文件。注意多上網搜索，搞清楚每種配置的意義是什麼，對性能和代碼維護有什麼影響。

現在，配合著 webpack，如果你願意，你可以學習一下 es6、less 等新工具了。相比上面的東西，這些東西極其簡單，花不了你多長時間。如果你不願意，可以暫時擱置。

至此，主要基礎設施已經建設完畢。

但是你還有兩個缺憾，第一，你沒寫過真正的網站，第二，你對 css 還不太懂。

所以我們還需要最後的練習，一個簡單網站項目。寫個什麼網站你說了算，比如你可以仿一下知乎或者優酷的部分頁面，你可以設想一個主流程，比如用戶登錄--視頻列表--視頻播放，這就是三個頁面。

這個練習目的有三個：

• 第一，學習框架使用。
• 第二，練習 css 使用。

• 第三，體會多頁面項目的開發過程。

為了達到第一目的，你要學習一下前端框架。不要覺得這很難，鑒於你前面基礎不錯，現在你應該完全可以看看框架文檔就敲出 demo 代碼來（如果不行，說明你前面敷衍了）。初學我推薦 React＋reflux 的組合，為啥是這倆呢，按理說 vue2.0 入門最方便？一來，現在用 React 的團隊確實比較多；二來，現在新版本的 angular 和 vue 都混合了各家思想，反倒是 React 思想最單純；第三，reflux 雖然不時髦，但是語法很樸實，不容易迷糊；第四，vue 的文檔做的太好了，過於好了……我覺得練習嘛，還是順便練練檢索和英語比較好對吧。

關於框架，我不想掰開細說。因為如果你多少是個 make sense 的人，經過上面那個使用 jquery 的小程序練習，應該已經發現，貪吃蛇這個程度的程序，其實就是三件事——管理程序中的狀態（如果你是理工出身，可以聯想一下狀態矩陣、狀態方程等概念），把狀態畫出來（可以聯想控制論中的傳遞函數），以及監聽事件改變狀態。然後你可能已經產生了一些想法，認為這三件事兒的實現其實是有規律可循的，甚至總結出了一套代碼結構和一些公用工具。如果是這樣，那就簡單了，所謂框架，就是那些比你經驗豐富的老司機給出的結構和工具。對照著你的理解，你可以把框架的每個部分和你腦子裡的部分對應起來。這時候，理解框架會變得極其容易。

剩下的就是你自己的事兒了，如何用 webpack 組織代碼，如何把 css 寫的盡量還原你仿的站，如何用 react 把頁面中的功能實現出來（比如視頻播放頁，左邊視頻列表，右邊播放器，列表和播放器都自己寫，以及點擊列表中的視頻播放器不刷新網頁直接切換這樣的聯動），慢慢嗑，不著急。如果你學了 es6 和 less，可以都用上。

三個注意：

1. 注意使用第三方庫提高開發效率，比如顯示時間，就可以用 moment.js。

2. 注意代碼規範，時刻不要忘記規範。

3. 注意思考程序設計，哪些是公共代碼，哪些是組件代碼，哪些是頁面代碼，代碼如何復用，等等。可以翻翻《設計模式》，但是不建議套用，尤其是不理解的模式不要用。

等你最後這個練習也做得像模像樣了，你將收穫以下成就：

1. 現在你的編程基礎跟靠前端吃飯的人比，不算墊底的（這個標準其實不高，你懂的各行各業都有些基本功一塌糊塗的人）。
2. 你已經具備成為職業前端工程師的常識和潛力，換句話說，如果你真的想做編程工作，可以為求職做準備了。

後面的事情，就不是你要學什麼，而是你想做什麼了——你可以再多做點練習，比如編寫自己的個人網站。也可以深挖原理，比如閱讀庫或者框架代碼，等等，看你的興趣了。當然，也可以邊求職邊學習（雖然說實話現在前端領域對初學者有種不友好的趨勢），面試中暴露的短板，就可以著重補充。比如你想做移動端，卻不了解 click 延時和點透是什麼，就可以著重補充移動端技術，等等。

總之，隨緣就好。
推薦閱讀：