本文可能會嚴重打擊你的自信心，請做心里準備。。。

在完整APP的遷移之后，終于可以好好寫這些內容了。第一篇就是對之前的前端技能圖譜進行一些細致的解釋。當然這些是個人的經驗，所以可存在一些區別，不過總的來說還是差不多的。

入門

在我理解下的基礎知識，就是我們可以寫一些基本的樣式，并能對頁面的元素進行操作。舉例來說，就是我們用Spring和JSP寫了一個博客，然后我們可以用jQuery來對頁面進行一些簡單的操作，并可以調用一些API。因此，我們需要基本的HTML / CSS知識。只是要寫好CSS并不是一件簡單的事，這需要很多實戰經驗。隨后，我們還需要有JavaScript的經驗，要不怎么做前端呢？

同時，我們還需要對DOM有一些基礎的了解，才能做一些基本的操作，如修改顏色等等。在這種情況下，最簡單的方案就是使用jQuery這樣的工具。不過，如果可以自己操作DOM是再好不過的了。

中級篇

中級篇就更有意思了，現在我們就需要對頁面進行更復雜的操作。Ajax和JSON這兩個技能是必須的，當我們要動態的改變頁面的元素時，我們就需要從遠程獲取最新的數據結果。并且我們也需要提交表單到服務器，RESTful就是必須要學會的技能。未來我們還需要Fetch API，ReactiveX這些技能。

除此我們還需要掌握好HTML的語義化，像DIV / CSS這也會必須會的技能，我們應該還會使用模板引擎和SCSS / SASS。而這個層面來說，我們開始使用Node.js來完成前端的構建等等的一系列動作，這時候必須學會使用命令行這類工具。并且，在這時候我們已經開始構建單頁面應用了。

高級篇

JavaScript是一門易上手的語言，也充滿了相當多的糟粕的用法。幾年前人們使用CoffeeScript編成成JavaScript來編寫更好的前端代碼，現在人們有了ES6、TypeScript和WebPack來做這些事。盡管現在瀏覽器支持不完善，但是他們是未來。同樣的還有某些CSS3的特性，其對于某些瀏覽器來說也是不支持的。而這些都是基于語言本來說的，要寫好代碼，我們還需要掌握面向對象編程、函數式編程、MVC / MVVM / MV*這些概念。作為一合格的工程師，我們還需要把握好安全性（如跨域），做好 授權（如HTTP Basic、JWT等等）。

工程化

這個標題好像是放錯了，這部分的內容主要都是自動構建的內容。首先，我們需要有基本的構建工具，無論你是使用gulp、grunt，還是只使用npm，這都不重要。重要的是，你可以自動化的完成構建的工具，編譯、靜態代碼分析（JSLint、CSS Lint、TSLint）、對代碼質量進行分析（如Code Climate，可以幫你檢測出代碼中的Bad Smell）、運行代碼中的測試，并生成測試覆蓋率的報告等等。這一切都需要你有一個自動構建的工作流。

兼容性

雖然我們離兼容IE6的時代已越來越遠了，但是我們仍然有相當多的兼容性工作要做。基本的兼容性測試就是跨瀏覽器的測試，即Chrome，IE，Firefox，Safari等等。除此還有在不同的操作系統上對同一瀏覽器的測試，某些情況下可能表現不一致。如不同操作系統的字體大小，可能會導致一些細微的問題。而隨著移動設備的流行，我們還需要考慮下不同Android版本下的瀏覽器內核的表現不致，有時候還要一下不成器的Windows Phone。除此，還有同一個瀏覽器的不同版本問題，常見于IE。。

前端特定

除了正常的編碼之外，前端還有一些比較有意思的東西，如CSS3和JavaScript動畫。使用Web字體，可惜這個不太適合漢字使用。還有Icon字體，畢竟這種字體是矢量的。不過Icon字體還有一些問題，如瀏覽器對其的抗鋸齒優化，還有一個痛是你得準備四種不同類型的字體文件。因此，產生了一種東西SVG Sprite，在以前這就是CSS Sprite，只是CSS Sprite不能縮放。最后，我們還需要掌握一些基本的圖形和圖表框架的使用。

軟件工程

這一點上和大部分語言的項目一樣，我們需要使用版本管理軟件，如git、svn，又或者是一些內部的工具。總之你肯定要有一個，而不是 2016.07.31.zip這種文件。然后，你還需要一些依賴管理工具，對于那些使用Webpack、Browserify來將代碼編寫成前端代碼的項目來說，npm還是挺好用的。不過就個人來說，對于傳統的項目來說我總覺得bower有些難用。我們還需要模塊化我們的源碼文件，才能使其他人更容易開始項目。

調試

作為一個工程師來說，調試是必備的技能。大部分瀏覽器都自帶有調試工具，他們都不錯——如果你使用過的話。在調試的過程中，直接用Console就可以輸出值、計算值等等。如果你的項目在構建的過程中有一些問題，你就需要debugger這一行代碼了。在一些調用遠程API的項目里，我們還需要一些更復雜的工具，即抓包工具。在調試移動設備時，像Wireshark、Charles這一類的工具，就可以讓我們看到是否有一些異常的請求。當然在這個時候，還有一個不錯的工具就是像Chrome自帶的遠程設備調試。對于移動網站來說，還要有Responsive視圖。

測試

我遇到的很多前端工程師都是不寫測試的，于是我便把它單獨地抽了出現。對于一個前端項目來說，正常情況下，我們要有單元測試、功能測試，還有要一些UI測試來驗證頁面間是否可以跳轉。對于依賴于第三方服務的應用來說，還要有一個Mock的服務來方便我們測試。如果是前后端分離的項目，我們還需要有集成測試。

性能與優化

要對Web應用進行性能優化，可能不是一件容易的事，有時候我們還知道哪些地方可以優化。這時候人們就可以使用Yahoo的YSlow，或者我最喜歡的Google PageSpeed來檢測頁面的一些問題，如有沒有開啟GZip、有沒有壓縮、合并、Minify JS代碼等等。我們還應該借助于NetWork這一類的工具，查看頁面加載時，一些比較漫的資源文件，并對其進行優化。在一些情況下，我們還需要借助如Chrome的Timline、Profiel等工具來查看可以優化的地方。

設計

前端工程師還需要具備基本的UI技能。多數情況下拿到的只是一張圖，如果是一個完整的頁面，我們就需要快速分割頁面布局。而依賴于不同的頁面布局，如響應式、網格、FlexBox布局也會有不同的設計。而有些時候，我們就需要自己規劃，制作一個基本的線框圖（Wireframe）等等。

SEO

如果以搜索引擎作為流量來源，我們還需要考慮頁面的內容，除非你用的是競爭排名。像Sitemap可能就不是我們考慮的內容，而我們還要考慮很多點。首先，我們需要保證頁面的內容是對于搜索引擎是可見的，并且對應的頁面還要有基本的Title、Description和Keyword。然后在一些關鍵的字體，如欄目標題等等可以用H2之類的大字的地方就不要放過。同時在頁面設計的過程中，我們還需要考慮一些內部鏈接的建設。它即可以提供頁面的可見度，又可以提高排名。最后，如果你是面向的是Google等支持結構化數據的搜索引擎，你還需要考慮一下MicroData / MicroFormat這一類東西。