前端系統學習——前端學習路線

先附上一張網上廣為流傳的前端知識體系圖：前端知識體系

從大圖中我們總結出：

優秀的Web前端開發工程師 要在知識體系上既要有 廣度 和 深度！應該具備快速學習能力。

前端開發工程師 不僅要掌握基本的Web前端開發技術，網站效能優化、SEO和伺服器端的基礎知識，而且要學會運用各種工具進行輔助開發以及理論層面的知識，包括程式碼的可維護性、元件的易用性、分層語義模板和瀏覽器分級支援等。

如果你想學習前端可以來這個群學習，中間是291，中間是851，最後是189，裡面可以學習交流，也有資料可以下載。

前端工程師至少都要滿足四類客戶的需求： 
– 1、產品經理。這些是負責策劃應用程式的一群人。他們會想出很多新鮮的、奇怪的、甚至是不可能實現的應用。一般來說，產品經理都追求豐富的功能。 　　 
– 2、UI設計師。這些人負責應用程式的視覺設計和互動模擬。他們關心的是使用者對什麼敏感、互動的一貫性以及整體的好用性。一般來說，UI設計師侯傾向於流暢靚麗、但並不容易實現的使用者介面，而且他們經常不滿前端工程師造成 1px 的誤差。 　　 
– 3、專案經理。這些人負責實際地執行和維護應用程式。專案管理的主要關注點，無外乎正常執行時間、應用程式始終正常可用的時間、效能和截止日期。專案經理追求的目標往往是儘量保持事情的簡單化，以及不在升級更新時引入新問題。 　　 
– 4、終端使用者。指的是應用程式的主要消費者。儘管前端工程師不會經常與終端使用者打交道，但他們的反饋意見至關重要。終端使用者要求最多的就是對個人有用的功能，以及競爭性產品所具備的功能。

好了，列舉了這麼多…… 你真的還想學前端麼？不後悔吧？ 如果真的做好了準備的話，哈哈，那我們就一起享受學習前端的樂趣吧！

一、基礎

想成為前端開發者應該先打好基礎： 
HTML > CSS > JavaScript> jQuery >。。。> GitHub

不要擔心以後會做什麼決策，先好好深入學習。 
在增值的方向上投資自己，才是最明智的。

學習了HTML、CSS就可以實現一些靜態頁面，不只是簡單的靜態頁面，應該是稍微複雜一些絢麗一點的頁面。 
推薦書籍：《CSS禪意花園》

二、JS

JS可以跟著以下幾張思維導圖學習（聽說是一位名為“王子墨”的大師做的圖）：學習 Javascript 首先要知道這門語言可以做什麼，不能做什麼，擅長做什麼，不擅長做什麼！

1.JS變數
2.JS運算子

3.JS陣列

4.JS流程語句 

5.JS字串函式

6.JS函式基礎

7.JS基礎DOM操作

8.JS正規表示式

9.JS資料型別

深入瞭解Javascript，需要了解 Javascript 的原理，機制；需要知道他們的本源；需要深刻了解 Javascript 基於物件的本質；還需要深刻了解瀏覽器宿主下 的 Javascript 的行為、特性。他也有很多缺點，各個宿主環境下的行為不統一、記憶體溢位問題、執行效率低下等問題，需要深入瞭解、學會處理這些缺陷。

推薦書籍： 
– 初級： 　 

• 《JavaScript高階程式設計》 　　 
  • 《JavaScript王者歸來》 　　 　　

• 中級： 　　 
  

  • 《JavaScript權威指南》 　　 
    • 《JavaScript.The.Good.Parts》Douglas Crockford 　　
    • 《高效能JavaScript》：Nicholas C. Zakas 　　
    • 《Eloquent JavaScript》 
  • 高階： 　　 
  • 《JavaScript Patterns 》 　　 
    • 《Pro.JavaScript.Design.Patterns》講解JavaScript設計模式 　　
    • 《Developing JavaScript Web Applications》：構建富應用的好書，針對MVC模式有較為深入的講解，同時也對一些流程的庫進行了講解。

  三、後端語言

• 《Developing Large Web Applications》：不僅有JavaScript方面的介紹，還有CSS、HTML方面的介紹，但是介紹的內容卻都非常不錯，真正考慮到了一個大型的Web程式下，如何進行JavaScript架構設計，值得一讀。　
• 《高效能網站建設指南》
• 《Yahoo工程師的網站效能優化的建議》
• 《網站重構》
• 《Web開發敏捷之道》

最好的資料就是某項技術的官方SDK，一般技術都有文件，API，Quick Start，Guide，Tutorial，Demo，Example……結合書看效果最好。

其他：

• “YSLOW”效能優化建議
• “ jQuery 庫”
• “前端框架”
• “HTML5”
• “CSS3” 深入研究
• 前端學習交流QQ群：328058344

這兒還有不知道自己何時收藏的“前端有關的語言”: