如何才能在Web前端開發學習中，遊刃有餘？

隨著最近幾年來網際網路的迅猛發展和普及，Web前端工程師已經成為網際網路時代軟體產品研發中不可缺少的一種專業的研發角色。總是會看到很多人問，我現在想學習Web前端開發該如何下手？學習路線是怎樣的？今天這篇文章，來說說我自己對Web前端開發學習的理解，並結合一些面試中會常問到的問題來談談，如何才能在Web前端開發坑中，遊刃有餘？

一、基礎

首先前端的基礎，相信大家閉著眼睛都能知道HTML+CSS+Javascript，但是它們的輕重緩急該如何去選擇呢？在學習優先順序上HTML > CSS > Javsscript，之所以這麼排並不是因為Javascript最不重要，而是因為HTML和CSS的學習上可以不用花太多時間，而且Javascript是前端一切學習的基礎。

HTML與CSS可以在一起學習，因為HTML的標籤只有配合CSS樣式才能達成優美的頁面效果，沒有CSS的頁面只能是很多年前的入口網站的樣子。隨著HTML5和CSS3的普及，以及瀏覽器對它們的支援，越來多的產品都選擇用HTML5開發，HTML5甚至可以直接作為一個前端開發方向。

學習了HTML後，面對這樣的問題，應該不會被難到。

cookie，localStorage，sessionStorage的區別；

HTML5新特性canvas標籤；

瀏覽器快取機制，各有什麼優缺點？

如何看待HTML5的一些新特性？

學習了CSS之後，面對這樣的問題，也應該不會被難到。

元素水平垂直居中的實現；

瀏覽器的幾種盒模型；

行內元素與塊級元素；

元素相對定位與絕對定位；

偽元素:before與::before差別以及用途；

學習了Javascript後，面對這樣的問題，應該不會被難到。

常見的閉包問題，比如for迴圈內部執行輸出函式；

this關鍵字輸出問題；

常用的事件型別；

ajax建立過程，常用的狀態碼；

Javascript記憶體回收機制；

二、框架

說到框架學習，如果說JS框架的話，相信很多人一定會脫口而出jQuery，這是很多當初進入前端開發領域一定會學習的內容，我也不例外。但是現在卻並不會推薦把很多的時間放在學習jQuery上，因為如果你深入學習之後會發現，對於jQuery的使用已經變少了。

針對HTML佈局上，當然Bootstrap是不能少的，我們不用把每個類都研究的很透徹，但是對於常用的class一定要熟練使用。

針對字型圖示庫上，推薦使用font-awaresome，還有某寶圖示庫iconfont，都包含了非常實用的圖示。其實重點想說的是對於前端MVVM框架的學習，相信很多人都知道就是AngularJS，Vue，React。

那麼針對這些新興的框架，我們該如何學習呢？

首先有一點，ES6是一定要去學習的，在Vue2.X，AngularJS2，React中都對ES6提供了原生的支援，以後很多新的特性肯定也會使用ES6的語法去編寫。

AngularJS

AngularJS在由AngularJS1升級到AngularJS2以後，完全是一個新的東西，原來在AngularJS1中的controller，service，filter等內容在AngularJS2中都變成一個個的module，component。所以如果還沒學過AngularJS部分內容的同學可以直接選擇學習AngularJS2。但是需要注意的是AngularJS2是以Typescript語言編寫的，所以對Typescript的學習就必不可少了。

Vue

我認為Vue學習是相對來說成本比較低的框架，目前官方文件已經很詳細，關於Vue全家桶的內容像Vue-resource，Vue-router，Vuex等越來越完善，而且在Github上開源是專案也有很多，可以很容易掌握。

React

React採用了Virtual DOM這一個很獨特的概念，提高了頁面渲染的效率。但是也是由於Virtual DOM的存在，在程式設計方式上，React和Vue,AngularJS稍有不同，如果習慣了Vue開發，可能還不太習慣React的開發。

在針對框架層面，在學習之後，應該能回答下面這些問題。

AngularJS和Vue的雙向資料繫結的實現；

Vuex工作機制；

React的Virtual DOM基本實現，如何自己實現一個Virtual DOM；

三、演算法模組化&元件化

前端開發已經從原來的整體化開發發展到現在的模組化開發，甚至是元件化開發，開發過程愈發精細，講求的是程式碼的可複用性。以前一個頁面從上到下一次編寫的過程，現在已經發展為先將頁面進行拆分成模組甚至是元件，不同的人關注不同的模組，元件，提高開發效率。在模組化開發中，不得不提到CommonJS，AMD和CMD規範，並且有不同的實現，比如RequireJS。對於模組化程式設計的規範已經有很多的文章有講到，可以認真去學習下。

四、構建工具

前端開發是離不開構建工具的，自己寫的程式碼如何打包壓縮，ES6的程式碼如何編譯成JS，Sass，less程式碼如何編譯成原生CSS，這些都是構建工具去完成的。有了構建工具，可以極大的提高我們的開發速度，這裡不得不提到的就是gulp+Webpack。

gulp是一種任務驅動型的構建工具，通過管道處理資料流，提高了資料處理速度，而且其提供的一系列外掛也很方便使用。

而Webpack的作用就是把所有瀏覽器端需要釋出的靜態資源做相應的準備，比如資源的解析、合併和打包，它提供了強大的載入器和外掛機制，例如vue-loader提供了對vue的支援，babel-loader提供了對ES6的支援。其他的構架工具還有工程化構建的Yeoman，Slush，FIS等。

在學習了常用的構建工具後，應該可以回答出下面的問題。

Gulp和Webpack的不同；

Webpack打包速度比較慢，可能原因是什麼？有沒有什麼解決辦法？

五、全棧

Web前端開發到最後就是要走全棧開發的道路了，全棧開發以NodeJS作為服務端語言，基於NodeJS實現的服務端框架有Express，KOA，目前也發展的越來越成熟。既然講到全棧開發，肯定會通過服務端語言操縱資料庫，因此對於資料庫的知識也肯定要掌握的。

給自己半年的時間去盡心盡力的學習Web前端開發，按照上面的學習路線，一步一步來，紮實掌握Web前端發技術才是找到好工作的重要法寶！

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2661026/，如需轉載，請註明出處，否則將追究法律責任。