摘要：什么是前端工程師總而言之就是運(yùn)用等技術(shù)，在工作中配合設(shè)計(jì)師實(shí)現(xiàn)用戶界面，和后端工程師進(jìn)行數(shù)據(jù)對(duì)接，完成應(yīng)用開發(fā)的職位。

別害怕，沒有人能把這些都學(xué)個(gè)遍，學(xué)好基礎(chǔ)，拎一部分，滿足工作中的業(yè)務(wù)需求就可以了。

學(xué)習(xí)一樣?xùn)|西，首先得先去了解它的定義，和大概的框架結(jié)構(gòu)，梳理好思路，然后再一個(gè)蘿卜一個(gè)坑，循序漸進(jìn)的去豐富自己的知識(shí)體系。有人說，前端東西多而雜，你今天剛弄明白一框架，明天又出一新框架，其實(shí)大可不必去理這些花里胡哨的框架，畢竟在真正的工作環(huán)境中，你是一名業(yè)務(wù)驅(qū)動(dòng)型的程序員。

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

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

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

這時(shí)候你的知識(shí)體系就是這樣了

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

資深WEB前端工程師

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

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

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

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

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

最主要是數(shù)據(jù)都?xì)w自己管，還可以本地隨時(shí)查看，對(duì)外是博客，對(duì)內(nèi)跟建立自己一個(gè)知識(shí)庫一樣。

寫博客貴在堅(jiān)持，這玩意也是見效很慢的東西，你寫多了你會(huì)發(fā)現(xiàn)你不僅是在技術(shù)方面的進(jìn)步，寫作，寫文檔，表達(dá)也會(huì)有提高的。

而且發(fā)現(xiàn)評(píng)論里面有能幫助到別人，自己也會(huì)有莫名的成就感。

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

同樣也有人說了，玩 CSS 有什么難度，不就不布布局，改改風(fēng)格嗎。是的，但是，想玩好了，可不容易，個(gè)人推薦張?chǎng)涡竦牟┛蛷場(chǎng)涡瘢@是一位長期研究CSS的大牛；相信前端工程師聽到他，應(yīng)該不會(huì)陌生。

廢話少說，上第二道菜。

谷歌瀏覽器效果圖

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

附上代碼

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.初級(jí)階段：首先基本功要打好，JavaScript 基本功包括閉包，原型，繼承，變量的作用域等等。

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

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

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

學(xué)習(xí)和研究一個(gè)領(lǐng)域一樣， 需要了解這個(gè)領(lǐng)域都在解決些什么問題，了解這個(gè)領(lǐng)域的發(fā)展和歷史，有哪些了不起的任務(wù)和貢獻(xiàn)者。 該領(lǐng)域內(nèi)對(duì)特定問題的普遍解決方案。

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

前端性能優(yōu)化

前端組件化，模塊化

前端測(cè)試

前端開發(fā)流程

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

前端兼容

異步

當(dāng)?shù)搅诉@一步我我覺得學(xué)習(xí)的方法應(yīng)該是，嘗試解決一個(gè)別人沒有解決的問題或者做得不夠好的問題，通過自己的探索和研究，提出自己的方案。這一過程中會(huì)學(xué)到很多很多的東西，可能不僅僅是前端，這些內(nèi)容可能包括UX，設(shè)計(jì)，服務(wù)端設(shè)計(jì)等等。 可能我現(xiàn)在的狀態(tài)也是處在這里，為了解決一個(gè)特定的問題，深入學(xué)習(xí)這個(gè)特定領(lǐng)域，找出解決方案。

項(xiàng)目技能

開發(fā)調(diào)試

git，svn版本管理

開發(fā)工具

前端工具： 性能測(cè)試工具，調(diào)試工具，代理工具，css工具

grunt， gulp

BDD