本文可能會(huì)嚴(yán)重打擊你的自信心谤牡，請(qǐng)做心里準(zhǔn)備。姥宝。翅萤。

在完整APP的遷移之后，終于可以好好寫這些內(nèi)容了腊满。第一篇就是對(duì)之前的前端技能圖譜進(jìn)行一些細(xì)致的解釋套么。當(dāng)然這些是個(gè)人的經(jīng)驗(yàn)培己，所以可存在一些區(qū)別，不過總的來(lái)說還是差不多的胚泌。

入門

在我理解下的基礎(chǔ)知識(shí)省咨，就是我們可以寫一些基本的樣式，并能對(duì)頁(yè)面的元素進(jìn)行操作诸迟。舉例來(lái)說茸炒，就是我們用Spring和JSP寫了一個(gè)博客愕乎，然后我們可以用jQuery來(lái)對(duì)頁(yè)面進(jìn)行一些簡(jiǎn)單的操作阵苇，并可以調(diào)用一些API。因此感论，我們需要基本的HTML / CSS知識(shí)绅项。只是要寫好CSS并不是一件簡(jiǎn)單的事，這需要很多實(shí)戰(zhàn)經(jīng)驗(yàn)比肄。隨后快耿，我們還需要有JavaScript的經(jīng)驗(yàn)，要不怎么做前端呢芳绩？

同時(shí)掀亥，我們還需要對(duì)DOM有一些基礎(chǔ)的了解，才能做一些基本的操作妥色，如修改顏色等等搪花。在這種情況下，最簡(jiǎn)單的方案就是使用jQuery這樣的工具嘹害。不過撮竿，如果可以自己操作DOM是再好不過的了。

中級(jí)篇

中級(jí)篇就更有意思了笔呀，現(xiàn)在我們就需要對(duì)頁(yè)面進(jìn)行更復(fù)雜的操作幢踏。Ajax和JSON這兩個(gè)技能是必須的，當(dāng)我們要?jiǎng)討B(tài)的改變頁(yè)面的元素時(shí)许师，我們就需要從遠(yuǎn)程獲取最新的數(shù)據(jù)結(jié)果房蝉。并且我們也需要提交表單到服務(wù)器，RESTful就是必須要學(xué)會(huì)的技能微渠。未來(lái)我們還需要Fetch API惨驶，ReactiveX這些技能。

除此我們還需要掌握好HTML的語(yǔ)義化敛助，像DIV / CSS這也會(huì)必須會(huì)的技能粗卜，我們應(yīng)該還會(huì)使用模板引擎和SCSS / SASS。而這個(gè)層面來(lái)說纳击，我們開始使用Node.js來(lái)完成前端的構(gòu)建等等的一系列動(dòng)作续扔，這時(shí)候必須學(xué)會(huì)使用命令行這類工具攻臀。并且，在這時(shí)候我們已經(jīng)開始構(gòu)建單頁(yè)面應(yīng)用了纱昧。

高級(jí)篇

JavaScript是一門易上手的語(yǔ)言刨啸，也充滿了相當(dāng)多的糟粕的用法。幾年前人們使用CoffeeScript編成成JavaScript來(lái)編寫更好的前端代碼识脆，現(xiàn)在人們有了ES6设联、TypeScript和WebPack來(lái)做這些事。盡管現(xiàn)在瀏覽器支持不完善灼捂，但是他們是未來(lái)离例。同樣的還有某些CSS3的特性，其對(duì)于某些瀏覽器來(lái)說也是不支持的悉稠。而這些都是基于語(yǔ)言本來(lái)說的宫蛆，要寫好代碼，我們還需要掌握面向?qū)ο缶幊痰拿汀⒑瘮?shù)式編程耀盗、MVC / MVVM / MV*這些概念。作為一合格的工程師卦尊，我們還需要把握好安全性（如跨域）叛拷，做好 授權(quán)（如HTTP Basic、JWT等等）岂却。

工程化

這個(gè)標(biāo)題好像是放錯(cuò)了忿薇，這部分的內(nèi)容主要都是自動(dòng)構(gòu)建的內(nèi)容。首先淌友，我們需要有基本的構(gòu)建工具煌恢，無(wú)論你是使用gulp、grunt震庭，還是只使用npm瑰抵，這都不重要。重要的是器联，你可以自動(dòng)化的完成構(gòu)建的工具二汛，編譯、靜態(tài)代碼分析（JSLint拨拓、CSS Lint肴颊、TSLint）、對(duì)代碼質(zhì)量進(jìn)行分析（如Code Climate渣磷，可以幫你檢測(cè)出代碼中的Bad Smell）婿着、運(yùn)行代碼中的測(cè)試，并生成測(cè)試覆蓋率的報(bào)告等等。這一切都需要你有一個(gè)自動(dòng)構(gòu)建的工作流竟宋。

兼容性

雖然我們離兼容IE6的時(shí)代已越來(lái)越遠(yuǎn)了提完，但是我們?nèi)匀挥邢喈?dāng)多的兼容性工作要做∏鹣溃基本的兼容性測(cè)試就是跨瀏覽器的測(cè)試徒欣，即Chrome，IE蜗字，F(xiàn)irefox打肝，Safari等等。除此還有在不同的操作系統(tǒng)上對(duì)同一瀏覽器的測(cè)試挪捕，某些情況下可能表現(xiàn)不一致粗梭。如不同操作系統(tǒng)的字體大小，可能會(huì)導(dǎo)致一些細(xì)微的問題担神。而隨著移動(dòng)設(shè)備的流行楼吃，我們還需要考慮下不同Android版本下的瀏覽器內(nèi)核的表現(xiàn)不致始花，有時(shí)候還要一下不成器的Windows Phone妄讯。除此，還有同一個(gè)瀏覽器的不同版本問題酷宵，常見于IE亥贸。。

前端特定

除了正常的編碼之外浇垦，前端還有一些比較有意思的東西炕置，如CSS3和JavaScript動(dòng)畫。使用Web字體男韧，可惜這個(gè)不太適合漢字使用朴摊。還有Icon字體，畢竟這種字體是矢量的此虑。不過Icon字體還有一些問題甚纲，如瀏覽器對(duì)其的抗鋸齒優(yōu)化，還有一個(gè)痛是你得準(zhǔn)備四種不同類型的字體文件朦前。因此介杆，產(chǎn)生了一種東西SVG Sprite，在以前這就是CSS Sprite韭寸，只是CSS Sprite不能縮放春哨。最后，我們還需要掌握一些基本的圖形和圖表框架的使用恩伺。

軟件工程

這一點(diǎn)上和大部分語(yǔ)言的項(xiàng)目一樣赴背，我們需要使用版本管理軟件，如git、svn凰荚，又或者是一些內(nèi)部的工具耸三。總之你肯定要有一個(gè)浇揩，而不是 2016.07.31.zip這種文件仪壮。然后，你還需要一些依賴管理工具胳徽，對(duì)于那些使用Webpack积锅、Browserify來(lái)將代碼編寫成前端代碼的項(xiàng)目來(lái)說，npm還是挺好用的养盗。不過就個(gè)人來(lái)說缚陷，對(duì)于傳統(tǒng)的項(xiàng)目來(lái)說我總覺得bower有些難用。我們還需要模塊化我們的源碼文件往核，才能使其他人更容易開始項(xiàng)目箫爷。

調(diào)試

作為一個(gè)工程師來(lái)說，調(diào)試是必備的技能聂儒。大部分瀏覽器都自帶有調(diào)試工具虎锚，他們都不錯(cuò)——如果你使用過的話。在調(diào)試的過程中衩婚，直接用Console就可以輸出值窜护、計(jì)算值等等。如果你的項(xiàng)目在構(gòu)建的過程中有一些問題非春，你就需要debugger這一行代碼了柱徙。在一些調(diào)用遠(yuǎn)程API的項(xiàng)目里，我們還需要一些更復(fù)雜的工具奇昙，即抓包工具护侮。在調(diào)試移動(dòng)設(shè)備時(shí)，像Wireshark储耐、Charles這一類的工具羊初，就可以讓我們看到是否有一些異常的請(qǐng)求。當(dāng)然在這個(gè)時(shí)候弧岳，還有一個(gè)不錯(cuò)的工具就是像Chrome自帶的遠(yuǎn)程設(shè)備調(diào)試凳忙。對(duì)于移動(dòng)網(wǎng)站來(lái)說，還要有Responsive視圖禽炬。

測(cè)試

我遇到的很多前端工程師都是不寫測(cè)試的涧卵，于是我便把它單獨(dú)地抽了出現(xiàn)。對(duì)于一個(gè)前端項(xiàng)目來(lái)說腹尖，正常情況下柳恐，我們要有單元測(cè)試、功能測(cè)試，還有要一些UI測(cè)試來(lái)驗(yàn)證頁(yè)面間是否可以跳轉(zhuǎn)乐设。對(duì)于依賴于第三方服務(wù)的應(yīng)用來(lái)說讼庇，還要有一個(gè)Mock的服務(wù)來(lái)方便我們測(cè)試。如果是前后端分離的項(xiàng)目近尚，我們還需要有集成測(cè)試蠕啄。

性能與優(yōu)化

要對(duì)Web應(yīng)用進(jìn)行性能優(yōu)化，可能不是一件容易的事戈锻，有時(shí)候我們還知道哪些地方可以優(yōu)化歼跟。這時(shí)候人們就可以使用Yahoo的YSlow，或者我最喜歡的Google PageSpeed來(lái)檢測(cè)頁(yè)面的一些問題格遭，如有沒有開啟GZip哈街、有沒有壓縮、合并拒迅、Minify JS代碼等等骚秦。我們還應(yīng)該借助于NetWork這一類的工具，查看頁(yè)面加載時(shí)璧微，一些比較漫的資源文件作箍，并對(duì)其進(jìn)行優(yōu)化。在一些情況下往毡，我們還需要借助如Chrome的Timline蒙揣、Profiel等工具來(lái)查看可以優(yōu)化的地方靶溜。

設(shè)計(jì)

前端工程師還需要具備基本的UI技能开瞭。多數(shù)情況下拿到的只是一張圖，如果是一個(gè)完整的頁(yè)面罩息，我們就需要快速分割頁(yè)面布局嗤详。而依賴于不同的頁(yè)面布局瓷炮，如響應(yīng)式葱色、網(wǎng)格、FlexBox布局也會(huì)有不同的設(shè)計(jì)娘香。而有些時(shí)候苍狰，我們就需要自己規(guī)劃，制作一個(gè)基本的線框圖（Wireframe）等等烘绽。

SEO

如果以搜索引擎作為流量來(lái)源淋昭，我們還需要考慮頁(yè)面的內(nèi)容，除非你用的是競(jìng)爭(zhēng)排名安接。像Sitemap可能就不是我們考慮的內(nèi)容翔忽，而我們還要考慮很多點(diǎn)。首先，我們需要保證頁(yè)面的內(nèi)容是對(duì)于搜索引擎是可見的歇式，并且對(duì)應(yīng)的頁(yè)面還要有基本的Title驶悟、Description和Keyword。然后在一些關(guān)鍵的字體材失，如欄目標(biāo)題等等可以用H2之類的大字的地方就不要放過痕鳍。同時(shí)在頁(yè)面設(shè)計(jì)的過程中，我們還需要考慮一些內(nèi)部鏈接的建設(shè)龙巨。它即可以提供頁(yè)面的可見度额获，又可以提高排名。最后恭应，如果你是面向的是Google等支持結(jié)構(gòu)化數(shù)據(jù)的搜索引擎抄邀，你還需要考慮一下MicroData / MicroFormat這一類東西。