前端學習之路，分享給剛學或想學前端的網友（持續更新中）

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

1、啓蒙

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

　　而後過了一年，和朋友一塊兒幫人作網站，那個時候就算是正式接觸前端了。有一件事印象很深入，當時負責寫靜態頁面的朋友一直沒時間寫，因而我就想本身動手，可是徹底無從下手，只能等待。在他寫了幾張頁面以後，我就開始研究他的源碼，這時候也僅僅是能看懂，再作點小修改，還沒法獨立佈局。

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

2、博學

　　博學就是普遍的學習，吸取知識。我當時首先學習的就是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腳本。雖然效果很強大，但像IE八、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腳本等，改變了前端的開發模式，解放生產力、提升生產效率。

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

3、慎思

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

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是必須的，它那千奇百怪的問題折磨着一代人。

　　程序員要時刻充電，閱讀書籍是最好的一個途徑之一。每次在閱讀完整本書或某個章節後，我也喜歡作個總結，能夠簡單的把本身感興趣的內容摘抄下來，也能夠根據書中的內容作一次實踐，還能夠作簡單的記錄彙總。

　　個人開發習慣簡單的歸納就是：總結和記錄。

4、篤行

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

1）PrimusUI

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

2）製做插件

　　要製做一個插件不只須要懂得HTML和CSS，還要熟悉JavaScript。我製做的幾個插件都是從實際項目中剝離封裝出來的，例如移動端H5通用表單驗證插件，可驗證文本框的字數、格式等，而且將驗證規則做爲控件的一個屬性，寫在控件的html中，有點MVVM模式的味道。

3）抽象共性

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

4）表述

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