如何成為一名優秀的web前端工程師，我想這是一個前端工作者或者有意向入坑前端的朋友們，值得深度思考的一個問題，包括我自己在內，也在不斷工作和實踐中，努力讓自己變得更加優秀。

web前端開發對於現在的網際網路企業而言，是一個非常重要的崗位。隨著市場競爭狀態日益嚴峻，企業對於前端工程師的技能要求也在逐步提升。這就要求前端工程師涵蓋的知識面非常廣，既有具體的技術，又有抽象的理念，從而把網站介面更好地呈現給使用者。

成為一名優秀的web前端需要做好哪些細節？我個人大致總結了3大要點與大家分享：

優秀的web前端開發工程師要在知識體系上既要有廣度和深度。如果你的html、css（包括現在的HTML5+CSS3）基礎不會，或者不夠紮實，或者JS很好，但佈局基礎不行……這些表現不僅和優秀的標準相差深遠，甚至連合格的web前端都談不上。一個優秀的web前端至少能實現視覺和互動功能，以及與後端伺服器通訊，完成業務邏輯。我理解的前端工程師的核心價值就是對使用者體驗的極致追求。

web發展的很快，甚至可以說這些技術幾乎每天都在變化.如果沒有快速學習能力，就跟不上web發展的步伐。優秀的前端工程師必須不斷提升自己，不斷學習新技術、新模式；僅僅依靠今天的知識無法適應未來。web的明天與今天必將有天壤之別，而前端工程師的工作就是要搞清楚如何透過自己的web應用程式來體現這種翻天覆地的變化。

一名優秀的web前端從程式設計風格，即在編制程式時所表現的特點和思維邏輯就能展現出來。這就要求我們在設計程式中要使用結構合理、清晰，形成良好程式設計習慣，對程式的要求不僅是可以在機器上執行，也要給出正確的結果，便於程式除錯和維護。

HTML5作為移動網際網路的主流前端開發語言，從根本上改變了開發商開發web應用的方式，不僅是PC端而且在移動端也得到了更廣泛的應用。HTML5已經成為web前端開發必不可少的語言，目前來說還沒有一個web前端語言能夠取代HTML5的位置。由於HTML5的興起，企業對於web前端工程師的需求也是越來越大。那麼要想成為一名出色的web前端工程師，需要做到哪些呢？

HTML5

HTML是超級文字標記語言，是為“網頁建立和其他可在網頁瀏覽器中看到的資訊”設計的語言。HTML5是由全球資訊網釋出的最新的語言規範，是開放的Web網路平臺的奠基石，所以做Web前端，精通HTML5是必須要掌握的一項技能。

CSS3

CSS即層疊樣式表。 在網頁製作時採用層疊樣式表技術，可以有效地對頁面的佈局、字型、顏色、背景和其它效果實現更加精確的控制。 只要對相應的程式碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。

CSS3是CSS技術的升級版本，CSS3語言開發是朝著模組化發展的。以前的規範作為一個模組實在是太龐大而且比較複雜，所以，把它分解為一些小的模組，更多新的模組也被加入進來。這些模組包括： 盒子模型、列表模組、超連結方式 、語言模組 、背景和邊框 、文字特效 、多欄佈局等。CSS3對於Web前端整個頁面的設計是必備的技能。

JavaScript

JavaScript一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。它的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能，為使用者提供更流暢美觀的瀏覽效果。掌握了JavaScript，你就可以給你的網頁增加各種不同的動態效果，比如百葉窗特效，廣告切換特效，浮動廣告特效，上下無縫滾動特效等等。

JQuery

JQuery，顧名思義也就是JavaScript和查詢(Query),即是輔助JavaScript開發的庫。它是輕量級的JS庫 ，它相容CSS3，還相容各種瀏覽器（IE 6.0+, FF1.5+, Safari 2.0+,Opera 9.0+），JQuery2.0及後續版本將不再支援IE6/7/8瀏覽器。JQuery使使用者能更方便地處理HTML、EVENTS、實現動畫效果，並且方便地為網站提供AJAX互動。熟練掌握JQuery會讓你更好的使用JavaScript。

AJAX

AJAX即“Asynchronous JavaScript AndXML”(非同步JavaScript和XML)，是指一種建立互動式網頁應用的網頁開發技術，可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。AJAX開發人員必須理解傳統的MVC架構，這限制了應用層次之間的邊界。同時，開發人員還需要考慮C/S環境的外部和使用AJAX技術來重定型MVC邊界。最重要的是，AJAX開發人員必須禁止以頁面集合的方式來考慮Web應用而需要將其認為是單個頁面。一旦UI設計與服務架構之間的範圍被嚴格區分開來後，開發人員就需要更新和變化的技術集合了。實現網站互動必須熟練掌握AJAX。

BootStrap

Bootstrap，來自Twitter，是目前很受歡迎的前端框架。Bootstrap是基於HTML、CSS、JavaScript 的，它簡潔靈活，使得Web開發更加快捷。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範，它即是由動態CSS語言Less寫成。Bootstrap一經推出後頗受歡迎，一直是GitHub上的熱門開源專案，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該專案。國內一些移動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基於Bootstrap原始碼進行效能最佳化而來。Bootstrap中包含了豐富的Web元件，根據這些元件，可以快速的搭建一個漂亮、功能完備的網站。其中包括以下元件：下拉選單、按鈕組、按鈕下拉選單、導航、導航條、路徑導航、分頁、排版、縮圖、警告對話方塊、進度條、媒體物件等。時刻學習最近的前端框架也是Web前端工程師的必備技能哦！

瞭解完以上內容之後，我們再來看一下一名優秀的web前端工程師的工作職責是什麼？1、有過前端開發經驗，精通W3C標準及規範，熟悉HTML/HTML5、DIV+CSS、JavaScript等技術；

2、熟悉angularjs,有較強的js能力，能夠使用Firebug等瀏覽器工具進行頁面分析和除錯；

3、有響應式頁面開發經驗，能夠透過css、js實現各種互動效果；

4、有移動端WEB開發經驗者優先；

個人拙見~不喜勿噴，我認為一個好的前端工程師，最主要的是掌握好基礎，js和css以及html的基礎，舉個例子來說，學好js的基礎之後，對於jquery就能更好的理解和學習，學會jquery瞭解jsrender資料渲染之後，更會有助於你理解像angular以及vue這樣的框架。而且對於html頁面結構以及樣式的規範性如果能夠很好的掌握，也有助於你避免很多的bug。

第二條經驗：多動手多實踐，使勁折騰，但不要瞎折騰。說多了都是淚T_T。如果能做幾個外包，那就太不錯了。即賺錢，還能寫在簡歷上

經過這麼多年的發展，軟體行業分工已然是越來越精細。就前端這塊來說，在HTML5和CSS3出現之前，一般人的理解無非是實現幾個頁面、再加上一點效果而已（在那時，前端在專案開發中的地位較低）；但HTML5和CSS3出現之後，使用者互動更加豐富、效果更加酷炫，開始向後端一樣向工程化方向發展，前端逐漸從後而脫離出來，前後端分離已然發展成為主流；如今，js的增強版Typescript也有了面向物件特性；Angular、React、Vue已成為前端主流框架，前端開發移動應用和桌面應用也成為了現實，node甚至於可以操作資料和做伺服器了，web前端已然形成了與Java、PHP等傳統後臺同臺共舞的形勢。

功能越強大，責任也就越重。在前端發展越來越龐大的情況，要作為一個優秀的前端，要做到哪些呢？我一般認為，優秀的前端需要做到三個方面，第一，頁面佈局和互動，這是前端的立命之本；第二，邏輯處理與實現；第三，快速學習。

頁面佈局和互動就是要對HTML5、CSS3、JS以及Angular、React、Vue等框架的特性瞭如指掌（這三個框架或許不需要全部瞭解），不僅管是用原生的HTML還是框架實現精美的頁面效果，並且提供酷炫的互動效果。雖然你可以使用Bootstrap或者Vue對應的一些UI庫來實現某一些效果，但你必須要懂得他們的原理，比如柵格佈局是封裝了什麼實現的，UI庫為什麼可以傳參，如何根據自己的想法寫一個輪播等等，以便在這些UI庫不能滿足你的需要時可以自己實現（當然，也有的人說，真男人從不用框架，但我說，好的程式設計師不會重複造輪子）。

前面提到，現在前後端分離已是歷史必然。在前後端分離的開發模式下，前端與後端透過ajax、Websocket等方式進行資料交換。現在的大趨勢是越來越多的邏輯處理會放到前端來處理（比如就有程式設計師跟我抱怨，後端總想把儘量多的東西放到前端來做），最簡單的例子，一些資料格式放到前端來轉換、一些資料的判空從前端就開始做。

前面說，Node已然可以用來開發伺服器操作資料庫了，業務的實現基本就是純粹的邏輯處理與實現。除此之外，還有很多其他的東西，詳見下面這張前端圖譜。

其實軟體行業的技術發展都很快，可謂日新月異，因此必須要不斷學習新的技術和新的模式，不斷提升自己，使用更先進的技術構建更完善的系統。如果有可能的話，還要能對前端的發展做一些自己的貢獻。

　　Web前端工程師價值進一步凸顯，薪資待遇一漲再漲。很多人看好Web前端的市場前景紛紛選擇學習入行，但是對技能的理解浮於表面、缺乏專案經驗，當然無法滿足企業“經驗足、上手快”的要求。

　　如果你想成為一名做的Web前端程式設計師，需要掌握Web前端的相關技術，知道招聘要求的技能是什麼，需要什麼樣的人才，這樣才能讓自己有好的前途。

　　那麼，企業對Web前端工程師的招聘要求有哪些呢?

　　1、HTML5。HTML5是開放的Web網路平臺的奠基石，所以做Web前端，精通HTML5是必須要掌握的一項技能。

　　2、CSS3。可以有效地對頁面的佈局、字型、顏色、背景和其它效果實現更加精確的控制。

　　3、JavaScript。掌握了JavaScript，你就可以給你的網頁增加各種不同的動態效果。

　　4、JQuery。JQuery使使用者能更方便地處理HTML、EVENTS、實現動畫效果，並且方便地為網站提供AJAX互動。熟練掌握JQuery會讓你更好的使用JavaScript。

　　5、AJAX。一種建立互動式網頁應用的網頁開發技術，可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

　　6、具備相應的開發經驗。這是你能否拿到高薪的關鍵因素，因此你需要充分利用身邊的資源，多多練習、積累實戰經驗。

　　出於學習效果考慮，如果你沒有什麼基礎，可以選擇參加專業的學習。比較適合零基礎的小白迅速成長，學習曲線先快後慢。既是從事IT工作的首選切入點，也能體驗勇攀知識高峰，提高能力的職業成就感。

想要成為優秀的前端工程師，首先要有足夠的興趣，並且願意花時間去研究前端的生態。一個優秀的前端工程師，首先要對前端基礎知識有足夠的瞭解，比如js,css,html,其次要對主流框架有一定的認知，比如vue,react,angular,知道其適用的範圍和應用場景優缺利弊。其實是有很好的業務能力和邏輯思維，並且對演算法有一定的認知。前端領域內的h5,小程式，混合app,pc系統要有足夠的經驗，這樣，算是一個優秀的工程師了。

想要成為一個優秀的web前端開發工作那你需要至少保證企業開發所需的技術本領你都掌握了，可以去招聘網上了解一下，不同薪資階段的崗位都需要有哪些要掌握的內容有哪些。而且現在技術更新迭代也比較快，作為一名優秀的前端開發工程師你需要不斷的學習來提高自己。

你可以瞭解一下尚矽谷的前端課程，更新迭代比較快的即使用於自己也是不錯的影片的。