經常會在群裡或論壇上看到有人問：“學習前端有什麼捷徑？”，一般都是賣油翁式的回答：“無他唯手熟爾”。那麼該如何讓手熟練呢？其實也就是該如何系統的學習前端。在本文中，我會結合自身的經歷，分享一下自己學習前端的過程，期間會穿插引用我過去各個階段所寫的博文。

一、啟蒙

　　剛出來混的時候並不是專門做前端的，只是兼顧一下。那時候使用的程式設計軟體是微軟的Visual Stadio 2005，開發網頁都是拖封裝好的控制元件，做個系統後臺，使用的也是簡單的模板，改動HTML、JavaScript和CSS的機會也都比較少，這個時候其實對前端還沒有什麼意識。

　　然後過了一年，和朋友一起幫人做網站，那個時候就算是正式接觸前端了。有一件事印象很深刻，當時負責寫靜態頁面的朋友一直沒時間寫，於是我就想自己動手，但是完全無從下手，只能等待。在他寫了幾張頁面之後，我就開始研究他的原始碼，這時候也僅僅是能看懂，再做點小修改，還無法獨立佈局。

　　在接下來的幾年裡，陸續呆了多家公司，無一例外的我都會兼顧前端頁面，這也大大提升了我對前端的理解。不過，雖然做了那麼多的頁面，但總有一種感覺，就是怎麼每次布頁面都會碰到這樣那樣的問題，好像永遠都無法駕馭佈局。現在想想，最主要的還是自己的地基不牢固，很多時候的佈局並不難，但會涉及到很多細節，而這些細節很容易產生問題，例如CSS中的百分數計算規則、JavaScript中的全等和相等比較的區別、HTML元素表格的特點等等。這些在開發過程中都會碰到的，我那時候都是碰到了，再去翻資料，很是被動。如果事先就學會了或準備好了文件的話，那麼就能提升工作效率，減少開發週期。我將這個混沌的時期稱為啟蒙階段。

二、博學

　　博學就是廣泛的學習，吸收知識。我當時首先學習的就是HTML、CSS和JavaScript，然後是資料結構、簡單的演算法和網路，接著是效能、設計模式和安全，最後還學習了除錯工具、營銷推廣等各類知識，有的與程式設計有關，有的與程式設計無關。下面會依次列舉學習過程中所涉及的相關知識。

1）HTML

　　HTML很容易被忽略，因為總覺得這個不難。其實的確不難，只是有時候會給人留坑，讓人踩進去防不勝防。比如常用的表格，在全方位的瞭解了它的特點之後，就能知道表格佈局的缺點、它的屬性有哪些、它的CSS樣式該怎麼重置、各個瀏覽器的呈現有何區別等。再比如iframe，在過去常用來非同步上傳檔案，在知道它的特性之後，就能明白其中的原理，碰到此類問題時就能遊刃有餘了。

　　如果要系統的學習HTML的話，我推薦閱讀《HTML5權威指南》、MDN元素引數，還有W3C官方規範，但這個比較拗口，理解起來會有難度。過去寫的一篇《前端基礎學習分享》也可以參考。

2）CSS

　　CSS要學的內容比HTML要多一些，在CSS2時代，提供的CSS屬性並不多，但自從CSS3釋出之後，引入了眾多新屬性，大大提升了CSS的操控性。學習CSS首先要了解該屬性或概念是屬於CSS2還是CSS3，因為頁面要考慮瀏覽器的相容性，即對CSS的支援度有差異，很多時候需要權衡。比如動畫屬性，這是CSS3新增的，不僅能讓頁面生動真實，還能擺脫對Flash的依賴，遠離大段的JavaScript指令碼。雖然效果很強大，但像IE8、IE9等瀏覽器並不支援，在這些瀏覽器中要麼降級，要麼乾脆去掉這些特效。還有一些基礎概念，例如盒模型、BFC、選擇器、層疊、定位等，也是必須要了解的。

　　如果要系統的學習CSS的話，我推薦閱讀《CSS權威指南》，目前英文已經出到了第四版，中文的第四版今年肯定會出。第三版沒有講到CSS3的屬性，只是列舉了CSS2和CSS的基礎概念，講的還是很細的，可以將這本書當做詞典來用，需要的時候翻一下。這部書要細讀，才能發現平時不注意的CSS細節。當然，MDN是肯定用的到的，也少不了W3C規範。再分享一個，我平時會用到的線上CSS參考手冊，如果開發PC端的網頁，還可以參考我以前的一篇CSS分享。

　　目前非常流行的CSS前處理器也有必要了解一下，例如SASS、LESS等。簡單地說，它們就是為CSS設計的程式語言，可以減少工程師的開發量，提升效率。

3）JavaScript

　　這是前端的核心，剛開始的話，先學習JavaScript的語法。我那時候不重視語法，拿來就是幹，寫出來的程式碼沒有JavaScript的味道，在看別人的程式碼時，也經常會感到疑惑，不能理解他們的寫法，例如獲取變數預設值“a || b”、迭代方法forEach()、every()、some()等。學習語法首推《JavaScript權威指南》、《JavaScript高階程式設計》和《深入理解ES6》，可以先讀權威指南，然後再去高階程式設計，它們都可以當成字典來用。深入理解ES6主要是講ES6標準的，前面兩本目前的版本主要是講ES5標準的，還有一套《你不知道的JavaScript》系列，需要先有前面的基礎，然後再去讀的話，會好理解很多。關於ES6的學習，還可以關注我正在連載的《ES6躬行記》系列，以基礎為主，力求簡單而又清晰不遺漏的介紹ES6的方方面面。各大瀏覽器對ES6的支援，可以參考ECMAScript 6 compatibility table。

　　我以前學習JavaScript沒有那麼系統，都是根據專案中碰到了某個知識點，然後再去查相關的資料，例如《觸屏touch事件記錄》、《typeof、toString、instanceof、constructor與in》等。東一點西一點的這樣補，很是費勁。

4）資料結構和演算法

　　大學裡有一門資料結構課，但當時感受不到它的威力，工作後才知道，資料結構是多麼的重要。資料結構包括佇列、棧、連結串列、樹和圖等，具體有什麼好處可以參考這篇知乎，裡面有各種角度的回答。演算法被稱為程式的靈魂，經典鉅著就是《演算法導論》了，我演算法太渣，看這本書蠻吃力的。

　　我後面還專門去學習了一些數學，想著演算法實現基於數學，那麼先學習更底層的，可能就會好理解一點。之後就去讀了《程式設計師的數學思維修煉（趣味解讀）》、《生活中的數學》、《生活中的概率趣事》和《枕邊演算法書》等書。大學裡還學過一門離散數學，當時覺得枯燥而無用，進了社會後才知道其實很有用，它可以提高抽象思維和嚴格的邏輯推理能力。現在還在讀大學的工科生，真的很有必要將數學打紮實，對以後會有很大的幫助。

5）網路

　　網路我只學習了與我的工作相關的內容，例如HTTP、TCP、HTTPS等協議。做前端，至少得看得懂基本的報文，理解TCP的連線、HTTPS的安全性、HTTP的特點等概念。知道這些後，就能方便自己在除錯頁面的時候，定位BUG，同時也能更和諧的與後端溝通，例如你調個介面，但是沒有資料返回，你可以將報文截圖，然後發給後端，這樣的話，他們就能知道請求和響應的資訊，方便他們定位問題。

　　大學的網路課很枯燥，等於沒學。工作後開始買些網路相關的書看，有《圖解HTTP》和《圖解TCP/IP》，這兩本比較通俗，容易消化。還有一本加《HTTP權威指南》，這本非常專業，內容也很全，就是理解起來費勁一點，可當字典來使用。

6）工具

　　作為前端開發，除了要會使用瀏覽器的Debugger工具之外，還需要會些其它的工具。首推的是Windows上的Fiddler，Mac上可用Charles替代，Fiddler很適合移動端開發，因為手機上的瀏覽器不像PC上的Chrome、Firefox那樣可以開啟除錯工具，它們在移動端是不存在。如果要抓取手機訪問頁面時的通訊資訊，就得藉助Fiddler了。再推Wireshark網路抓包工具，這個工具抓取的資訊要比Fiddler更加底層，例如能抓取TCP三次握手的通訊。

　　前端開發目前都需要自動化構建化工具，例如Gulp、Webpack等。構建工具可以編譯JavaScript、CSS和HTML，例如將ES6程式碼編譯成瀏覽器支援的ES5程式碼、SASS檔案編譯成普通的CSS檔案、合併和壓縮JavaScript指令碼等，改變了前端的開發模式，解放生產力、提高生產效率。

　　計算機學習需要上機操作，上面所列的知識都需要上機驗證，古語云：“紙上得來終覺淺，絕知此事要躬行”，只有真的做了，才能有更深刻的體會。效能、設計模式和安全等知識，對於初學者來說還不適合學習，目前還是以打基礎為核心目標。

三、慎思

　　慎思就是謹慎的思考，學習不是填鴨式的，需要經常思考，這樣才能進步。

1）技術引入

　　我以前每次學到點新技術，就迫不及待的想引入到專案中，例如2011年的時候剛學Ajax，就把整個網站的資料互動用Ajax實現，頁面渲染就用簡陋的字串拼接完成，程式碼醜陋至極（詳見《憶2011年的秋天》）。在專案經歷越來越多之後，就會謹慎的看待新技術。對新技術保持旺盛的求知慾，是件毋庸置疑的好事兒，但是把它引用到專案中，就得斟酌一下了，例如要考慮可維護性、與之前程式碼的相容度、效能和學習成本等方面。

　　如果工作中的專案不行，那麼可以自己開闢一個開源專案，把想要的新技術加進來。例如自己以前學習了CSS3，就試著做了個線上簡歷，用到了陰影、圓角、動畫等CSS3新屬性。

2）知其然而所以然

　　jQuery曾經在前端界有著舉足輕重的地位，甚至影響了W3C標準的制訂，以前很好奇jQuery是怎麼運轉的，於是就去檢視裡面的原始碼，奈何水平有限，很難讀懂。而在移動端有個與之類似的精簡DOM庫：Zepto.js，這個庫的程式碼量少了很多，還是可以讀懂的。接著我就試著寫一個類似的庫，起名叫“iSelector”。為何要重複造這個輪子，因為在造的過程中，能夠了解到以前不知道的Element、Array等相關的方法或屬性，加深對DOM的理解，而且在使用Zepto的時候，能夠選取最合適的方法。還有一點在《製造自己的榫卯》中曾提到過，即應用自己封裝的函式，就好比榫卯，拿來即可用，而不需要特定的釘子。

　　除了造輪子之外，研究開源庫的原始碼也是一種理解原理的途徑，例如手勢外掛Hammer.js的分析，開源網站流量統計系統Piwik原始碼分析等。

3）舉一反三

　　對於同一個問題，會有多種解決方案。在平時的學習中，也有必要舉一反三，這樣在實際應用時，就能選取最優的方案。自己曾經研究過Loading（載入）動畫效果，蒐集了網上的4種實現方式，分別是PNG圖片+CSS3動畫、spin.js、Ladda和Sonic.js。這是一個有趣的過程，不僅可以瞭解到它們各自的優缺點，還能瞭解它們不同的實現原理。

4）開發習慣

　　開發也是學習的過程，總結出自己獨有的開發習慣，能夠提升自己的工作效率。我自己在開發中遇到技術或工具都會做個總結，比如專案中用到了HTML5新增的Canvas元素，我就會蒐集它的屬性、方法和第三方庫，再將它的實際應用（如海報生成、影象裁剪、文字合成等）從專案中抽象出來，整理成文。再比如以前為了撰寫線上文件而使用了靜態頁面生成器Jekyll，在事後寫了兩篇總結（關於安裝、配置和應用），以備自己日後閱讀。

　　對於工作中遇到的問題，我也會記錄下來，例如IE6的BUG記錄，我入行的早期還是IE6橫行的時代，相容IE6是必須的，它那千奇百怪的問題折磨著一代人。

　　程式設計師要時刻充電，閱讀書籍是最好的一個途徑之一。每次在閱讀完整本書或某個章節後，我也喜歡做個總結，可以簡單的把自己感興趣的內容摘抄下來，也可以根據書中的內容做一次實踐，還可以做簡單的記錄彙總。

　　我的開發習慣簡單的概括就是：總結和記錄。

四、篤行

　　篤行就是學以致用，踐履所學，做到知行合一。

1）PrimusUI

　　在學習了CSS3後，為了能使用到那些新屬性，於是就設計了一個UI庫，名字叫“PrimusUI”。這是一個輕量、響應式、移動端、易上手、可定製的UI庫。包含文字、表單、列表、網格等13個模組，涉及伸縮盒、自定義字型、陰影、偽元素等屬性。

2）製作外掛

　　要製作一個外掛不僅需要懂得HTML和CSS，還要熟悉JavaScript。我製作的幾個外掛都是從實際專案中剝離封裝出來的，例如移動端H5通用表單驗證外掛，可驗證文字框的字數、格式等，並且將驗證規則作為控制元件的一個屬性，寫在控制元件的html中，有點MVVM模式的味道。

3）抽象共性

　　平時我還會想各種方式來提升自己的工作效率，以前曾整理出網站的通用部分，對其中的註冊頁面做了詳細的分解，包括提示、圖示、限制和特效等，準備了這些程式碼，在以後需要時，就能拿來做更新，而不用再重新編寫。

4）表述

　　很多時候看了不代表就懂了，得用自己的語言描述某個技術或概念，一直到自己覺得準確了為止，這個過程也能檢驗出自己對知識的理解到底處於哪個深度。還可以將自己的體會整理成一套符合自己需求的知識體系。

&n