摘要：什么是前端工程師總而言之就是運用等技術，在工作中配合設計師實現用戶界面，和后端工程師進行數據對接，完成應用開發的職位。

別害怕，沒有人能把這些都學個遍，學好基礎，拎一部分，滿足工作中的業務需求就可以了。

學習一樣東西，首先得先去了解它的定義，和大概的框架結構，梳理好思路，然后再一個蘿卜一個坑，循序漸進的去豐富自己的知識體系。有人說，前端東西多而雜，你今天剛弄明白一框架，明天又出一新框架，其實大可不必去理這些花里胡哨的框架，畢竟在真正的工作環境中，你是一名業務驅動型的程序員。

好了，廢話不多說，先上菜

是不是感覺前端東西不就這幾樣嗎？？別急，這里面看似簡單，每一門學精了，沒個三年五載的，你都不好意思說你會。

萬事開頭難，一步一步來，如今充斥著各大前端框架理念。"MVVM"、"MVC"、"MV*"、"模塊化"、"高性能"等等，您可別被這些迷住了眼，不都得先打基礎，HTML、CSS、JavaScript這三門語言就夠你喝一壺的（你再牛逼的框架不也是用我們寫的嗎），即使你已經工作三五年了，這里面有零碎的知識都有你不知道的；所以不管你現在已經在哪個階段，學習基礎知識的勁頭可不能減。

這時候你的知識體系就是這樣了

該看的都看了，該學的都學了，不能光說不練，得用起來.

資深WEB前端工程師

這個方向算是一個 WEB 前端最基本的選擇了，在國外，很多老外都能夠把自己的專業做到極致，能一輩子就在一個專業領域不斷學習和積累。主要在于內因和外因 兩方面，內因是老外通常思想比較簡單直接，容易一直專注于一個領域；外因是國外的環境很好，能夠良好的支撐這樣的職業發展道路。反觀國內，從內因來講，WEB前端技術人員還是蠻浮躁的，通常會因為 WEB 前端知識的更新速度太快而覺得學習起來辛苦，最終轉向后臺或其他道路。

從外因來講，WEB 前端人員 沒有獲得公平的待遇，可能從 HTML 頁面制作就開始并沿襲下來的，從來WEB前端人員都比后端人員低一等，貌似前端就是“淺顯”的代名詞、后端就是“深 奧”的代名詞，這也直接造就了前端人員的收入無法和后端人員媲美，同時直接影響到前端人才市場的活躍程度。另一方面，前端的技術入門較容易，造成另一個極 端情況：人員泛濫、人才稀缺。我想對所有的 WEB 前端工程師說：面包總會有的，要耐得住寂寞！我個人比較推薦這個職業發展方向，因為，在這個方向下，只要 足夠耐心、厚積薄發，成功的概率是非常高的。同時，這是一條最單純的路，我們更多的是花費精力在技術的鉆研上，而不是辦公室政治等其它瑣事。

1.我覺得博客當然是用來寫總結性的東西，它能幫你梳理下整個過程的要注意的地方，寫寫你在工作中遇到的問題，用來記錄和回顧。

2.至于怎么梳理框架，還是看你博客定位了，如果偏向科普類型的，自己看著爽也要別人看的爽，當然是寫的面面俱到然后加配圖。如果是類似自己筆記類型的，可以稍微簡單的寫，提示性的。

可以考慮（github pages 或者 gitcafe pages）+（靜態博客比如 hexo, octopress）+（markdown 寫作）。符合程序員氣質。

最主要是數據都歸自己管，還可以本地隨時查看，對外是博客，對內跟建立自己一個知識庫一樣。

寫博客貴在堅持，這玩意也是見效很慢的東西，你寫多了你會發現你不僅是在技術方面的進步，寫作，寫文檔，表達也會有提高的。

而且發現評論里面有能幫助到別人，自己也會有莫名的成就感。

現在大多數的Web開發者，大都是對基礎簡單掃一遍，專門研究JS框架去了，什么 Vue、Angular、React 等等，倒不是反對這種做法，雖然這樣做，看起來在現實應用場景和暫時找個不錯的工作看起來有利一些，但是卻大大的限制了自身長期的職業發展；而在前期，我是更加的去注重基礎，愿意花更多的時間去了解原生的東西，也不是說我過于保守，只不過是"我在沒燒好一塊塊磚頭的情況下，我可不敢去蓋大房子"；例如，Saas 效率再高，不也得轉換成 CSS 讓瀏覽器去解析，JSX看起來再邪乎，在瀏覽器大爺面前不也得裝JS；當然，我主要去了解各種框架的設計思想，和它實現功能的方式；具體工作中用到時，我會深入研究。

同樣也有人說了，玩 CSS 有什么難度，不就不布布局，改改風格嗎。是的，但是，想玩好了，可不容易，個人推薦張鑫旭的博客張鑫旭，這是一位長期研究CSS的大牛；相信前端工程師聽到他，應該不會陌生。

廢話少說，上第二道菜。

谷歌瀏覽器效果圖

神奇吧，這就是 CSS3 吸引人的地方，喜歡各種動畫交互的人，肯定會對CSS3的新特性愛不釋手；也不是說JS做不到，只不過是 JS 相對 CSS3 要說，要進行重繪，這對瀏覽器的性能來說，會大打折扣，所以"CSS能實現的，盡量別用 JS 去實現"。

附上代碼

HTML

{% highlight ruby %}

{% endhighlight %}

CSS

{% highlight ruby %}

html,body{height:100%}body{background:radial-gradient(ellipse at center,#34679a 0,#214163 47%,#0d1926 100%)}body>div{position:absolute;top:12%;left:50%;margin-left:-103px;width:200px;height:200px;border-radius:50%;border:1px solid #fff;-webkit-transform-style:preserve-3d;-webkit-transform:rotateX(80deg) rotateY(20deg);transform-style:preserve-3d;transform:rotateX(80deg) rotateY(20deg)}body>div:first-of-type:after{content:"";position:absolute;height:40px;width:40px;background:#fff;border-radius:50%;-webkit-transform:rotateX(-80deg) rotateY(0);transform:rotateX(-80deg) rotateY(0);box-shadow:0 0 25px #fff;-webkit-animation:nucleus_ 2s infinite linear;animation:nucleus_ 2s infinite linear;left:50%;top:50%;margin-top:-20px;margin-left:-20px}body>div:nth-of-type(2){-webkit-transform:rotateX(-80deg) rotateY(20deg);transform:rotateX(-80deg) rotateY(20deg)}body>div:nth-of-type(3){-webkit-transform:rotateX(-70deg) rotateY(60deg);transform:rotateX(-70deg) rotateY(60deg)}body>div:nth-of-type(4){-webkit-transform:rotateX(70deg) rotateY(60deg);transform:rotateX(70deg) rotateY(60deg)}body>div>div{width:200px;height:200px;position:relative;-webkit-transform-style:preserve-3d;-webkit-animation:trail_ 2s infinite linear;transform-style:preserve-3d;animation:trail_ 2s infinite linear}body>div>div:after{content:"";position:absolute;top:-5px;box-shadow:0 0 12px #fff;left:50%;margin-left:-5px;width:5px;height:5px;border-radius:50%;background-color:#fff;-webkit-animation:particle_ 2s infinite linear;animation:particle_ 2s infinite linear}body>div:nth-of-type(2)>div,body>div:nth-of-type(2)>div:after{-webkit-animation-delay:-.5s;animation-delay:-.5s}body>div:nth-of-type(3)>div,body>div:nth-of-type(3)>div:after{-webkit-animation-delay:-1s;animation-delay:-1s}body>div:nth-of-type(4)>div,body>div:nth-of-type(4)>div:after{-webkit-animation-delay:-1.5s;animation-delay:-1.5s}@-webkit-keyframes trail_{from{-webkit-transform:rotateZ(0deg)}to{-webkit-transform:rotateZ(360deg)}}@keyframes trail_{from{transform:rotateZ(0deg)}to{transform:rotateZ(360deg)}}@-webkit-keyframes particle_{from{-webkit-transform:rotateX(90deg) rotateY(0deg);transform:rotateX(90deg) rotateY(0deg)}to{-webkit-transform:rotateX(90deg) rotateY(-360deg);transform:rotateX(90deg) rotateY(-360deg)}}@keyframes particle_{from{transform:rotateX(90deg) rotateY(0deg)}to{transform:rotateX(90deg) rotateY(-360deg)}}@keyframes nucleus_{0%{box-shadow:0 0 0 transparent}50%{box-shadow:0 0 25px #fff}100%{box-shadow:0 0 0 transparent}}@-webkit-keyframes nucleus_{0%{box-shadow:0 0 0 transparent}50%{box-shadow:0 0 25px #fff}100%{box-shadow:0 0 0 transparent}}

{% endhighlight %}

1.初級階段：首先基本功要打好，JavaScript 基本功包括閉包，原型，繼承，變量的作用域等等。

2.初級到中級階段：這時候可以學習使用 jQuery，可以使用 jQuery 或者原生的 JavaScript 去實現一些常用的插件，比如輪播，比如選項卡，比如模態框等等。如果自己還想深入一下的話，可以去看看 jQuery 的源碼。多找一些靜態的頁面來做一下。

高級階段：學習使用一些框架，比如 Angular，React，Vue，ember，backbone 等等，但是記住，框架這個東西只是幫你解決了一些問題，給你的項目帶來了一些便利；我們要做的是學習這些框架的思想，如果有時間可以深入的研究一下一兩個框架的源碼，你會有不一樣的發現。還有，框架是一群人一個填坑的成果，不要過度依賴框架。

個人推薦JS路線：JS（原生最重要）- Angular - ES2015 - React - ES2016 - Vue。

學習和研究一個領域一樣， 需要了解這個領域都在解決些什么問題，了解這個領域的發展和歷史，有哪些了不起的任務和貢獻者。 該領域內對特定問題的普遍解決方案。

嘗試關注下面這樣問題，如果可以提出自己的決絕方案

前端性能優化

前端組件化，模塊化

前端測試

前端開發流程

細化的前端問題，樣式，加載，圖片處理

前端兼容

異步

當到了這一步我我覺得學習的方法應該是，嘗試解決一個別人沒有解決的問題或者做得不夠好的問題，通過自己的探索和研究，提出自己的方案。這一過程中會學到很多很多的東西，可能不僅僅是前端，這些內容可能包括UX，設計，服務端設計等等。 可能我現在的狀態也是處在這里，為了解決一個特定的問題，深入學習這個特定領域，找出解決方案。

項目技能

開發調試

git，svn版本管理

開發工具

前端工具： 性能測試工具，調試工具，代理工具，css工具

grunt， gulp

BDD