12個前端初學者必學技能

對於前端初學者來講，了解前端崗位所需要的技能對學習目標有非常重要的指導意義。我們統計了大量的前端開發崗位需求，總結出前端崗位要求中最需求的12種技能，希望給前端初學者帶來一些幫助。

1. HTML&CSS

HTML和CSS是Web開發最基礎的部分，其中HTML構成了網頁的「骨架」，CSS為網頁添加了顏色樣式，是網頁的「皮膚」。網頁上所看到的文本、圖片以及花花綠綠的樣式都是通過HTML和CSS實現的，因此學習Web開發首先要學的就是HTML和CSS編碼。HTML和CSS比較簡單，學習起來只需幾周就好。

只要掌握了HTML和CSS你就可以將設計圖轉換成靜態頁面了，但是遠遠不能滿足如今網頁變幻莫測的需求。

2. JavaScript

JavaScript給網頁增加了很多的動作和功能。利用JavaScript可以給網頁元素添加很多交互，例如按鈕點擊、網頁遊戲或百度地圖中可以根據拖拽實時更新地圖等功能。如果你覺得一個網頁交互很舒服很友好，基本上都是採用了大量的JavaScript，例如Pinterest。另外，JavaScript承擔了網站前後端數據交換的重要角色。

其次，拋開前端開發，JavaScript是世界上最受歡迎的語言之一，所以單單是語言本身也是非常值得學習的。

3. jQuery

JavaScript的語法有很多冗長和反覆使用的地方，因此jQuery就應運而生了。jQuery 是一個JavaScript庫，它包含了眾多的插件和擴展，簡化了JavaScript的語法，使開發者可以使用已經封裝好的元素，只在必要的時候、需要個性化定製的時候，使用原生的JS語法。但即便有了jQuery這樣的工具，學好JS基礎仍然很重要。

4. JavaScript 框架

JavaScript框架在開發過程中提供了一個已經構建好的JavaScript代碼結構，常用的框架有：AngularJS，VueJS，ReactJS，BackboneJS，EmberJS等。不同的框架擅長不同的應用場景。這些框架大大提升了開發的效率，並且能夠和一些JS庫如jQuery配合使用盡量減少原生JS編碼。會使用至少一種JavaScript框架已經成為前端學習者的必會技能之一。

5. 前端框架

這裡說的前端框架主要是指CSS框架，如最受歡迎的Bootstrap。由於各種項目中常常出現相同的元素，例如導航條、表單等，因此將這些常用的元素的不同樣式定義在同一個框架中會有很大的價值。大部分的前端開發工作都會要求對這些框架熟悉並且了解他們的原理。

6. CSS預處理器

CSS預處理器是另外一種可以大大提升CSS編碼速度的工具。CSS預處理器給CSS添加了額外的功能從而使CSS編碼更具擴展性。CSS預處理器會在代碼發布到網站上之前對編碼進行預處理，並將源碼處理成兼容性比較好且結構清晰的CSS代碼。SASS和LESS是在前端工作職位要求中最常被要求的兩種CSS預處理器。

7. RESTful API

以前的網站都是前後端融合在一起，但隨著現在客戶端的多樣化，Web開發多採用前後端分離，前端負責渲染和附帶處理簡單的商務邏輯。前端和後端通過API進行交互，RESTful API 應運而生。

REST 的全稱是REpresentational State Transfer，其實是資源的表現狀態轉化（雖然也聽不懂）。設計規範就是URL中只使用名詞來指定資源，原則上不使用動詞，而通過HTTP動詞來實現資源的狀態扭轉，例如：GET 用來獲取資源，POST 用來新建資源（也可以用於更新資源），PUT 用來更新資源，DELETE 用來刪除資源。

更多關於RESTful API 的教程可以參考RESTful API 設計指南

RESTful API已經成為Web開發中常用的API設計規範，因此前端職位要求中一般會要求有過RESTful API 的相關經驗。

8. 響應式布局和移動端設計

隨著移動設備的普及，越來越多的人會在移動設備上瀏覽網頁，甚至逐漸超過了在電腦上瀏覽的次數。所以毫無疑問的是，響應式布局和移動端設計技能對於前端工作人員來說也是非常重要的。響應式布局就是頁面根據屏幕寬度的大小和設備的類型進行布局甚至內容上的調整。

例如，一個網頁在電腦上瀏覽時，由於屏幕比較寬，因此可能會出現圖標元素的多列並排，但是如果是手機等寬度較小的屏幕，則需要適當調整列數，從而使人們在移動端上也能正常舒適地瀏覽內容。這樣的布局就是響應式布局。

移動端設計包含了響應式布局，但也包含了設計單獨的移動端。在有些場合我們希望用戶在移動端所看到的內容和電腦端所看到的可能會完全不同，例如國內支付寶的電腦端和移動端完全不一樣。電腦端因為其屏幕大可以看見更詳細的信息，但移動端因為屏幕版面的限制，要求展示必須簡單清晰。關於如何學習設計移動端，可以參考這篇文章Secrets To Building Mobile Sites Users Love。

9. 跨瀏覽器開發

前端代碼運行在瀏覽器中，目前主流的瀏覽器也有很多種，不同的渲染機制導致同樣的代碼在不同的瀏覽器下顯示效果會不同。雖然現在的主流瀏覽器在網頁的統一展示方面做得越來越好，但在能夠完全一致地顯示之前，學習如何兼容各種瀏覽器還是比較重要的一項技能。

學習跨瀏覽器開發可以參考這裡

10. 測試和調試

在Web開發過程中不可避免bug的產生，熟練測試和調試是非常重要的。

單元測試是測試單獨的源代碼塊的過程，單元測試框架提供了單元測試的具體方法和結構。

另外一種常見的測試類型是UI測試，主要用來檢查網頁在用戶交互的時候是否能夠正常反應。你可以寫一些測試用例在網頁上尋找某些特定的東西，例如測試當用戶忘記填寫一個網頁的表單時，錯誤提示框是否正確地彈出。

調試簡單來講就是找出bug的原因，並且修復的過程。

11. Git和版本管理器

寫代碼的過程中，版本控制是非常重要的。常用的版本控制器有Git等。版本控制器可以跟蹤代碼修改記錄，如果一不小心把代碼改壞了還可以回滾到之前的版本。在團隊合作過程中，版本控制更加重要。Git是目前最常用的版本控制系統，因此熟練掌握Git對開發職位來說非常重要。

12. 解決問題的技能

拋開崗位要求明確標註的技能以外，另外一項非常重要的技能應該就是解決問題的技能了。思考如何能夠更好地實現設計稿的效果，如何能夠更好地和後端對接等。

假如你將前端頁面寫好了，在與後端開發人員對接的時候，前端的很大部分的功能全部失效了。此時一個好的前端會將此看做一個亟待解決的問題和調招而不是一場災難。當然一個優秀的前端會在剛開始的時候就考慮周全避免此類事情的發生。

所以呢？

讀到這裡的你一定認為前端開發是一個很酷的職業，但又在疑惑前端開發學習應該從何開始。

碼蜂社《前端基礎直播班》第二期 開班了~

內容搶先看：

主講人：Mark老師

對，就是他，《Web突破班》主講人，還做了N多次的公開課~中科院計算所碩士，現任匠當科技CEO，曾帶領團隊開發數十個項目，技術紮實老道~

怎麼？還想再了解了解？ 免費試聽報名 加QQ群 299640586

詳情點這點這：《前端基礎直播班》第二期

註：文章參考整理自 Exactly What You Need to Know to Be a Front End Developer

-----------------------------------------------------------------------------------------------

碼蜂社往期免費公開課：

2017-08-04-老司機帶你玩轉知乎數據（爬蟲篇）

2017-08-25-老司機帶你玩轉知乎數據（數據分析可視化篇）

2017-05-13-母親節&520專題-圖片牆

2017-04-23-單線程模型與定時器

2017-04-16-ES6基礎