如何合理的規劃前端之路

什麼是前端工程師？總而言之,就是運用 HTML、CSS、JavaScript 等 Web 技術，在工做中配合UI設計師實現用戶界面，和後端工程師進行數據對接，完成 Web 應用開發的職位。Tips:我的博客排版、UI更佳；地址：https://haonancx.github.io/

先來個下馬威

別懼怕，沒有人能把這些都學個遍，學好基礎，拎一部分，知足工做中的業務需求就能夠了。

梳理清楚知識體系框架

學習同樣東西，首先得先去了解它的定義，和大概的框架結構，梳理好思路，而後再一個蘿蔔一個坑，按部就班的去豐富本身的知識體系。有人說，前端東西多而雜，你今天剛弄明白一框架，明天又出一新框架，其實大可沒必要去理這些花裏胡哨的框架，畢竟在真正的工做環境中，你是一名業務驅動型的程序員。

好了，廢話很少說，先上菜

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

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

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

切勿紙上談兵

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

資深WEB前端工程師

這個方向算是一個 WEB 前端最基本的選擇了，在國外，不少老外都可以把本身的專業作到極致，能一生就在一個專業領域不斷學習和積累。主要在於內因和外因 兩方面，內因是老外一般思想比較簡單直接，容易一直專一於一個領域；外因是國外的環境很好，可以良好的支撐這樣的職業發展道路。反觀國內，從內因來說，WEB前端技術人員仍是蠻浮躁的，一般會由於 WEB 前端知識的更新速度太快而以爲學習起來辛苦，最終轉向後臺或其餘道路。

從外因來說，WEB 前端人員 沒有得到公平的待遇，可能從 HTML 頁面製做就開始並沿襲下來的，歷來WEB前端人員都比後端人員低一等，貌似前端就是「淺顯」的代名詞、後端就是「深 奧」的代名詞，這也直接造就了前端人員的收入沒法和後端人員媲美，同時直接影響到前端人才市場的活躍程度。另外一方面，前端的技術入門較容易，形成另外一個極 端狀況：人員氾濫、人才稀缺。我想對全部的 WEB 前端工程師說：麪包總會有的，要耐得住寂寞！我我的比較推薦這個職業發展方向，由於，在這個方向下，只要 足夠耐心、厚積薄發，成功的機率是很是高的。同時，這是一條最單純的路，咱們更多的是花費精力在技術的鑽研上，而不是辦公室政治等其它雜事。

多寫，多編，要作一名"網紅"

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

2.至於怎麼梳理框架，仍是看你博客定位了，若是偏向科普類型的，本身看着爽也要別人看的爽，固然是寫的面面俱到而後加配圖。若是是相似本身筆記類型的，能夠稍微簡單的寫，提示性的。

能夠考慮（github pages 或者 gitcafe pages）+（靜態博客好比 hexo, octopress）+（markdown 寫做）。符合程序員氣質。

最主要是數據都歸本身管，還能夠本地隨時查看，對外是博客，對內跟創建本身一個知識庫同樣。

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

並且發現評論裏面有能幫助到別人，本身也會有莫名的成就感。

HTML五、CSS3 真的沒JS重要？

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

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

廢話少說，上第二道菜。

谷歌瀏覽器效果圖

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

附上代碼

HTML

{% highlight ruby %}

<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>

{% 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，設計，服務端設計等等。 可能我如今的狀態也是處在這裏，爲了解決一個特定的問題，深刻學習這個特定領域，找出解決方案。

項目技能

1. 開發調試

2. git，svn版本管理

3. 開發工具

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

5. grunt， gulp

6. BDD

總結，仍是那句話，再牛再炫的技術和業務扯不上關係都是白搭！