Web前端初學(xué)者都應(yīng)該學(xué)習(xí)哪些技能？

　　Web前端初學(xué)者都應(yīng)該學(xué)習(xí)哪些技能?對(duì)于初學(xué)Web前端技術(shù)的人來(lái)說(shuō)，了解前端崗位所需要的技能對(duì)學(xué)習(xí)目標(biāo)有非常重要的指導(dǎo)意義。今天傳智播客根據(jù)前端開(kāi)發(fā)崗位需求，為大家整理出前端崗位要求中最需求的幾種技能，想要學(xué)習(xí)Web前端技術(shù)的小伙伴們來(lái)看一看，希望對(duì)大家有所幫助。 　　Web前端初學(xué)者應(yīng)該學(xué)習(xí)的技能
　　1、 HTML和CSS
　　HTML和CSS是Web開(kāi)發(fā)前端初學(xué)者必學(xué)技能最基礎(chǔ)的部分，其中HTML構(gòu)成了網(wǎng)頁(yè)的“骨架”，CSS為網(wǎng)頁(yè)添加了顏色樣式，是網(wǎng)頁(yè)的“皮膚”。網(wǎng)頁(yè)上所看到的文本、圖片以及花花綠綠的樣式都是通過(guò)HTML和CSS實(shí)現(xiàn)的，因此學(xué)習(xí)Web開(kāi)發(fā)首先要學(xué)的就是HTML和CSS編碼。HTML和CSS比較簡(jiǎn)單，學(xué)習(xí)起來(lái)只需幾周就好。
　　只要掌握了HTML和CSS你就可以將設(shè)計(jì)圖轉(zhuǎn)換成靜態(tài)頁(yè)面了，但是遠(yuǎn)遠(yuǎn)不能滿足如今網(wǎng)頁(yè)變幻莫測(cè)的需求。
　　2. JavaScript
　　JavaScript給網(wǎng)頁(yè)增加了很多的動(dòng)作和功能。利用JavaScript可以給網(wǎng)頁(yè)元素添加很多交互，例如按鈕點(diǎn)擊、網(wǎng)頁(yè)游戲或百度地圖中可以根據(jù)拖拽實(shí)時(shí)更新地圖等功能。如果你覺(jué)得一個(gè)網(wǎng)頁(yè)交互很舒服很友好，基本上都是采用了大量的JavaScript，例如Pinterest。另外，JavaScript承擔(dān)了網(wǎng)站前后端數(shù)據(jù)交換的重要角色。
　　其次，拋開(kāi)前端開(kāi)發(fā)，JavaScript是世界上最受歡迎的語(yǔ)言之一，所以單單是語(yǔ)言本身也是非常值得學(xué)習(xí)的。
　　3. jQuery
　　JavaScript的語(yǔ)法有很多冗長(zhǎng)和反復(fù)使用的地方，因此jQuery就應(yīng)運(yùn)而生了。jQuery 是一個(gè)JavaScript庫(kù)，它包含了眾多的插件和擴(kuò)展，簡(jiǎn)化了JavaScript的語(yǔ)法，使開(kāi)發(fā)者可以使用已經(jīng)封裝好的元素，只在必要的時(shí)候、需要個(gè)性化定制的時(shí)候，使用原生的JS語(yǔ)法。但即便有了jQuery這樣的工具，學(xué)好JS基礎(chǔ)仍然很重要。
　　4. JavaScript 框架
　　JavaScript框架在開(kāi)發(fā)過(guò)程中提供了一個(gè)已經(jīng)構(gòu)建好的JavaScript代碼結(jié)構(gòu)，常用的框架有：AngularJS，VueJS，ReactJS，BackboneJS，EmberJS等。不同的框架擅長(zhǎng)不同的應(yīng)用場(chǎng)景。這些框架大大提升了開(kāi)發(fā)的效率，并且能夠和一些JS庫(kù)如jQuery配合使用盡量減少原生JS編碼。會(huì)使用至少一種JavaScript框架已經(jīng)成為前端學(xué)習(xí)者的必會(huì)技能之一。
　　5. 前端框架
　　這里說(shuō)的前端框架主要是指CSS框架，如最受歡迎的Bootstrap。由于各種項(xiàng)目中常常出現(xiàn)相同的元素，例如導(dǎo)航條、表單等，因此將這些常用的元素的不同樣式定義在同一個(gè)框架中會(huì)有很大的價(jià)值。大部分的前端開(kāi)發(fā)工作都會(huì)要求對(duì)這些框架熟悉并且了解他們的原理。
　　6. CSS預(yù)處理器
　　CSS預(yù)處理器是另外一種可以大大提升CSS編碼速度的工具。CSS預(yù)處理器給CSS添加了額外的功能從而使CSS編碼更具擴(kuò)展性。CSS預(yù)處理器會(huì)在代碼發(fā)布到網(wǎng)站上之前對(duì)編碼進(jìn)行預(yù)處理，并將源碼處理成兼容性比較好且結(jié)構(gòu)清晰的CSS代碼。SASS和LESS是在前端工作職位要求中最常被要求的兩種CSS預(yù)處理器。
　　7. RESTful API
　　以前的網(wǎng)站都是前后端融合在一起，但隨著現(xiàn)在客戶端的多樣化，Web開(kāi)發(fā)多采用前后端分離，前端負(fù)責(zé)渲染和附帶處理簡(jiǎn)單的商務(wù)邏輯。前端和后端通過(guò)API進(jìn)行交互，RESTful API 應(yīng)運(yùn)而生。
　　REST 的全稱是REpresentational State Transfer，其實(shí)是資源的表現(xiàn)狀態(tài)轉(zhuǎn)化(雖然也聽(tīng)不懂)。設(shè)計(jì)規(guī)范就是URL中只使用名詞來(lái)指定資源，原則上不使用動(dòng)詞，而通過(guò)HTTP動(dòng)詞來(lái)實(shí)現(xiàn)資源的狀態(tài)扭轉(zhuǎn)，例如：GET 用來(lái)獲取資源，POST 用來(lái)新建資源(也可以用于更新資源)，PUT 用來(lái)更新資源，DELETE 用來(lái)刪除資源。
　　更多關(guān)于RESTful API 的教程可以參考RESTful API 設(shè)計(jì)指南。
　　RESTful API已經(jīng)成為Web開(kāi)發(fā)中常用的API設(shè)計(jì)規(guī)范，因此前端職位要求中一般會(huì)要求有過(guò)RESTful API 的相關(guān)經(jīng)驗(yàn)。
　　8. 響應(yīng)式布局和移動(dòng)端設(shè)計(jì)
　　隨著移動(dòng)設(shè)備的普及，越來(lái)越多的人會(huì)在移動(dòng)設(shè)備上瀏覽網(wǎng)頁(yè)，甚至逐漸超過(guò)了在電腦上瀏覽的次數(shù)。所以毫無(wú)疑問(wèn)的是，響應(yīng)式布局和移動(dòng)端設(shè)計(jì)技能對(duì)于前端工作人員來(lái)說(shuō)也是非常重要的。響應(yīng)式布局就是頁(yè)面根據(jù)屏幕寬度的大小和設(shè)備的類型進(jìn)行布局甚至內(nèi)容上的調(diào)整。
　　例如，一個(gè)網(wǎng)頁(yè)在電腦上瀏覽時(shí)，由于屏幕比較寬，因此可能會(huì)出現(xiàn)圖標(biāo)元素的多列并排，但是如果是手機(jī)等寬度較小的屏幕，則需要適當(dāng)調(diào)整列數(shù)，從而使人們?cè)谝苿?dòng)端上也能正常舒適地瀏覽內(nèi)容。這樣的布局就是響應(yīng)式布局。
　　移動(dòng)端設(shè)計(jì)包含了響應(yīng)式布局，但也包含了設(shè)計(jì)單獨(dú)的移動(dòng)端。在有些場(chǎng)合我們希望用戶在移動(dòng)端所看到的內(nèi)容和電腦端所看到的可能會(huì)完全不同，例如國(guó)內(nèi)支付寶的電腦端和移動(dòng)端完全不一樣。電腦端因?yàn)槠淦聊淮罂梢钥匆?jiàn)更詳細(xì)的信息，但移動(dòng)端因?yàn)槠聊话婷娴南拗?，要求展示必須?jiǎn)單清晰。關(guān)于如何學(xué)習(xí)設(shè)計(jì)移動(dòng)端，可以參考這篇文章Secrets To Building Mobile Sites Users Love。
　　9. 跨瀏覽器開(kāi)發(fā)
　　前端代碼運(yùn)行在瀏覽器中，目前主流的瀏覽器也有很多種，不同的渲染機(jī)制導(dǎo)致同樣的代碼在不同的瀏覽器下顯示效果會(huì)不同。雖然現(xiàn)在的主流瀏覽器在網(wǎng)頁(yè)的統(tǒng)一展示方面做得越來(lái)越好，但在能夠完全一致地顯示之前，學(xué)習(xí)如何兼容各種瀏覽器還是比較重要的一項(xiàng)技能。
　　學(xué)習(xí)跨瀏覽器開(kāi)發(fā)可以參考這里
　　10. 測(cè)試和調(diào)試
　　在Web開(kāi)發(fā)過(guò)程中不可避免bug的產(chǎn)生，熟練測(cè)試和調(diào)試是非常重要的。
　　單元測(cè)試是測(cè)試單獨(dú)的源代碼塊的過(guò)程，單元測(cè)試框架提供了單元測(cè)試的具體方法和結(jié)構(gòu)。
　　另外一種常見(jiàn)的測(cè)試類型是UI測(cè)試，主要用來(lái)檢查網(wǎng)頁(yè)在用戶交互的時(shí)候是否能夠正常反應(yīng)。你可以寫(xiě)一些測(cè)試用例在網(wǎng)頁(yè)上尋找某些特定的東西，例如測(cè)試當(dāng)用戶忘記填寫(xiě)一個(gè)網(wǎng)頁(yè)的表單時(shí)，錯(cuò)誤提示框是否正確地彈出。
　　調(diào)試簡(jiǎn)單來(lái)講就是找出bug的原因，并且修復(fù)的過(guò)程。
　　11. Git和版本管理器
　　寫(xiě)代碼的過(guò)程中，版本控制是非常重要的。常用的版本控制器有Git等。版本控制器可以跟蹤代碼修改記錄，如果一不小心把代碼改壞了還可以回滾到之前的版本。在團(tuán)隊(duì)合作過(guò)程中，版本控制更加重要。Git是目前最常用的版本控制系統(tǒng)，因此熟練掌握Git對(duì)開(kāi)發(fā)職位來(lái)說(shuō)非常重要。
　　12. 解決問(wèn)題的技能
　　拋開(kāi)崗位要求明確標(biāo)注的技能以外，另外一項(xiàng)非常重要的技能應(yīng)該就是解決問(wèn)題的技能了。思考如何能夠更好地實(shí)現(xiàn)設(shè)計(jì)稿的效果，如何能夠更好地和后端對(duì)接等。
　　假如你將前端頁(yè)面寫(xiě)好了，在與后端開(kāi)發(fā)人員對(duì)接的時(shí)候，前端的很大部分的功能全部失效了。此時(shí)一個(gè)好的前端會(huì)將此看做一個(gè)亟待解決的問(wèn)題和調(diào)招而不是一場(chǎng)災(zāi)難。當(dāng)然一個(gè)優(yōu)秀的前端會(huì)在剛開(kāi)始的時(shí)候就考慮周全避免此類事情的發(fā)生。
　　以上就是傳智播客今天為大家整理的Web前端初學(xué)者都應(yīng)該學(xué)習(xí)哪些技能?的文章，希望本篇文章能夠?qū)φ郎?zhǔn)備學(xué)習(xí)Web前端技術(shù)的小伙伴們有所幫助。想要快速入門(mén)web前端，并且通過(guò)web前端找到心儀工作，可以參加傳智播客的web前端培訓(xùn)班。最后祝愿小伙伴們順利學(xué)成成為一名優(yōu)秀的Web前端工程師。