初學者精通前端的學習路線

前端開發工程師是個很新的職業，在國內乃至國際上真正開始受到重視的時間是從2005年開始的，是指Web前端開發工程師的簡稱。 Web前端開發是從美工演變而來的，名稱上有很明顯的時代特徵。在網路的演化過程中，Web 1.0時代，網站的主要內容都是靜態的，使用者使用網站的行為也以瀏覽為主。隨著網路的深入發展，前端開發工程師一躍成為市場上非常搶手的人才。很多同學，包括以前做UI的、Java的、或是IT完全零基礎的同學都想學習前端。下圖是網路上流傳甚廣的一張前端學習心智圖，許多初學者表示看到這些密密麻麻的知識點就已經暈了。確實，前端是一門涵蓋面很廣的學科。但想學前端的你也不用慌張，內容雖多但有跡可循，只要循序漸進就不怕學不好前端！

 

那麼前端開發到底需要學什麼？該怎麼學？接下來小編教你如何從零基礎學習前端。

一、前端開發入門

在入門階段，你首先要學會最基本的技能：根據UI的設計稿，實作HTML的靜態頁面製作。這就要求你得掌握HTML、CSS頁面佈局排版、樣式美化等技能。

在這個階段你需要學習：

1、HTML+CSS基礎
掌握HTML的標籤使用、排版技巧、CSS的佈局定位、樣式美化、瀏覽器相容性。
2、JavaScript基礎
掌握JS的基本語法、條件、語句、循環等，學會常用演算法，增強邏輯性。
3、常用的前端工具
例如Webstrom、Sublime、Dreamweaver等。掌握其快速鍵設定等技巧，快速提升開發調試效率。
這個階段的學習難度相對不高，學完這些之後，我們已經能完成靜態頁面的製作。當然，這只是入門，如果你想用這些技能找工作的話還是比較困難的。

二、前端開發初級

在接下來的這一階段，我們的目標是達到前端開發行業的基本要求，讓自己有底氣出去找一份月薪8000以上的工作！

這個階段我們要專注於掌握這兩方面的能力：
1、利用jQuery、Bootstrap等框架開發複雜的互動功能與效果；
2、利用HTML5、CSS3、Canvas進行移動端開發。
針對第一方面的能力，你需要學習：
1、JavaScript基本特效
能夠實現圖片輪播、拖曳、放大鏡等常見網頁特效。
2、jQuery基礎
掌握jQuery常用API的使用方法，並且能夠熟悉jQuery的外掛開發機制。
3、Bootstrap響應式
掌握原生響應式實作機制，能夠使用Bootstrap中的柵極格式佈局和響應式佈局進行複雜頁面的佈局開發。
4、AJAX基礎
充分理解AJAX原理，掌握JS原生和jQuery方式的AJAX使用。
5、UI流行框架
掌握jQueryUI的使用，快速且有效率地實現頁面的效果呈現。
學會了這些技能，你就能夠獨立製作電商類、企業類網站，實現常見JS動態效果，並且能夠基於jQuery、Bootstrap等框架實現酷炫的效果和復雜的功能啦！
針對第二個面向的行動端開發，你需要學習：
1、HTML5、CSS3新功能
掌握HTML5、CSS3在行動端的使用技巧。
2、Canvas基礎
掌握Canvas的基本畫圖API，做到能實現Canvas在報表和廣告展示效果上的應用，並且能夠實現酷炫的展示效果。
3、行動Web框架
能夠基於jQuery Mobile/Zepto等框架進行行動裝置JS功能開發。
掌握這兩大面向的技能，你就能達到市場上對前端工程師的基本要求了。根據市場回饋數據看，薪資普遍在8000-13000元/月，趕快加油學習吧！

三、前端開發進階

就知道你是個有理想要抱負的人，不會滿足於做一個初級的前端開發工程師。在接下來的這個階段，我們將走上前端開發的進階之路，將自己的能力再往上拔一個等級。同樣，薪資也會上升一個等級！

但是，如果你是一個前端菜鳥，接下來的文章中可能會出現一些你沒有用過或沒有聽過的知識點。不要急，你可以先將文章收藏下來，以後慢慢理解。

言歸正傳，在這個階段，我們要重點掌握以下兩個面向的能力：

#1、在實作功能的同時，考慮程式碼的優雅性，注重程式碼的效能和重用性；
2、深入理解前端框架實現原理，並且能夠開發和重構通用的前端元件。

在這個階段你需要學習以下知識：

1、物件導向開發思維
2、JavaScript物件導向
3、JavaScript閉包、作用域鏈、原型鍊等高階特性
4、常用的設計模式
5、使用原生JavaScript的原理實作框架封裝
6、jQuery框架封裝原理
7、jQuery插件的實作原理
掌握jQuery插件的實作原理，深刻理解插件的兩種擴充方式的實作機制。
8. 組件化與模組化開發：SeaJS、RequireJS
如果你熟練以上技能，就能夠具備解決複雜問題和技術困難的能力，並且能夠獨立設計開發複雜的功能模組。如果你達到這個水平，恭喜你已經能滿足前端產業的中級需求，根據市場回饋數據看，薪資普遍在 13000-20000元/月！

四、前端開發高級

寫到這裡，連小編自己也激動了，因為在接下來的這個階段，我們的目標是：進軍全端開發工程師！全端開發工程師就是那種既精前端，又通後台，遇到問題能快速定位問題、解決問題的一類大牛！根據職友集資料統計，北京全端開發工程師月薪在20K-50K之間的佔比高達60%，而且人才非常缺乏！

要晉升為全端開發工程師，我們在這個階段得做這些事：

1、能從前端的全域角度認識流行框架的原理與實作模式；
2 、深刻理解行動App的開發模式與技術選型；
3、熟悉Node.js的全端式解決方案；
4、了解主流的後台技術與前後端協作方式，能從全域角度理解專案的整個生命週期。

對應的，你需要學習以下這些：

1、Web開發工作流程框架：Yeoman/Grunt/Gulp/Bower等
掌握流行的前端工作流程工具，可以讓前端開發更方便更有效率！
2、MVC/MVVM框架：AngularJS等
掌握前端MVC/MVVM框架實作機制，透過AngularJS的實踐深刻理解MVC的開發模式，理解雙向資料綁定等相關概念。
3、HTML5響應式框架
4、UI流行框架：jQueryUI、EasyUI、ExtJS等
掌握常見UI框架的封裝原理，透過原始碼分析，深入理解元件化開發想法。
5、Ionic、Angular
掌握行動裝置混合開發模式，透過Ionic、Angular的結合，理解使用HTML5、CSS3、JS實現App開發的整體流程與實作機制。
6、React Native
掌握行動端ReactNative的開發模式。
7、HTML5 Plus
8、Node.js全端式開發

可見，如果要把前端開發做得更好、更專業，真的不簡單。這就是前端開發的特點，也是讓很多人困惑的原因。如此繁雜的知識體系讓新手學習起來無從下手，對老手來說，也常常不知道下一步該學什麼。所以希望以上前端學習路線能幫助大家。

相關推薦：

零基礎自學PHP所具備的條件

PHP程式設計師的成長路線

HTML5的學習路線分析

2017 Web 開發者學習路線圖詳解

web前端學習路線：如何從零開始學習DIV+CSS

#