本文轉(zhuǎn)載自公眾號“讀芯術(shù)”(ID：AI_Discovery)。

前端開發(fā)人員目前的需求量很大，但這并不代表公司錄用的門檻就變低了，他們優(yōu)中取優(yōu)，只選擇頂尖人才。

如今的前端開發(fā)和十年前大相徑庭，一切都在不斷演變，JavaScript的三大框架React、Vue和Angular十年前才剛剛誕生。優(yōu)秀前端開發(fā)者應(yīng)具備的技巧也在與時俱進(jìn)，前端開發(fā)者需要時刻保持最佳狀態(tài)。

[[346460]]

HTML，但不僅是基本的HTML

眾所周知，充分理解HTML及其所有可能性是web開發(fā)的基礎(chǔ)。必須熟悉HTML5，并且能夠編寫清晰的HTML代碼。例如，不要創(chuàng)建不必要的包裝元素(wrapping element)，也不能在span中使用div。這些都是基礎(chǔ)，但筆者經(jīng)常看到這樣的基本問題出錯。

另一項有關(guān)HTML并日益受歡迎的技能是可訪問性。什么是網(wǎng)頁可訪問性?具備可訪問性的無障礙網(wǎng)頁是指殘疾人也可以充分使用的網(wǎng)頁，這里的殘疾人包括視力受損、失明或失聰?shù)娜巳旱取?/p>

對于想要創(chuàng)建人人可用的優(yōu)質(zhì)網(wǎng)頁的企業(yè)和組織來說，可訪問性是必須的。對于這些企業(yè)和組織來說，重要的是推出人人可用的產(chǎn)品和服務(wù)。可訪問性的好處不僅在于改善了殘疾人的網(wǎng)絡(luò)體驗，同時還可以提升所有用戶的使用體驗。

學(xué)習(xí)使用框架

顯然，三大框架任何之一都值得學(xué)習(xí)。大多數(shù)前端開發(fā)工作都要求求職者至少曾使用過一種常用JavaScript框架。

學(xué)習(xí)React、Vue或Angular三者之一是不錯的選擇，這些都是熱門技能。不過，筆者強(qiáng)烈推薦先大家學(xué)會JavaScript的基礎(chǔ)知識，嘗試一些只使用普通的JavaScript的項目。在理解JavaScript的工作方式并且完全清楚基本原理之后，再專注于學(xué)習(xí)三大JavaScript框架中的一種。

由此你將了解所使用的框架解決了哪些問題，并理解該框架為何采用某種方法。這種學(xué)習(xí)JavaScript的方法的唯一缺點就是更耗時。然而，從長遠(yuǎn)來看，這是有回報的，你將遠(yuǎn)遠(yuǎn)領(lǐng)先于那些抄近路的人。

不想學(xué)習(xí)React、Vue或Angular也無妨，因為還有很多其他框架可供學(xué)習(xí)。不過要記住，其他的框架遠(yuǎn)沒有那么高的需求。

[[346461]]

圖源：unsplash

樣式風(fēng)格

與十年前相比，網(wǎng)站的風(fēng)格已經(jīng)截然不同。過去，我們會用表單來創(chuàng)建一個網(wǎng)站。現(xiàn)在我們使用更先進(jìn)的技術(shù)，例如flexboxes和網(wǎng)格布局(grids)。

對于前端開發(fā)人員來說，了解CSS的使用方法是一項基本技能。在每個瀏覽器中，樣式表(stylesheets)的效果都應(yīng)當(dāng)保持一致——這可并非易事。

設(shè)計樣式時并非只需要掌握CSS，Sass如今也很常見。Sass是一個CSS預(yù)處理器，它允許使用變量、數(shù)學(xué)運算、混合(mixin)、循環(huán)、函數(shù)、導(dǎo)入功能等等，這使得編寫CSS變得簡便，而且功能更加強(qiáng)大。此外，和CSS無甚亮點的語法相比，Sass的語法更為簡潔而優(yōu)雅。

有時只需要使用一個框架就能完成所有重任。這意味著你不再需要從零開始編寫全部CSS。有了這些現(xiàn)成的功能，你可以用這些框架來創(chuàng)建一整個樣式完美的網(wǎng)站。你如果曾接觸過類似Bootstrap或Tailwind的框架，就領(lǐng)先其他開發(fā)人員更多了。

響應(yīng)

用臺式機(jī)瀏覽網(wǎng)頁的日子已經(jīng)一去不復(fù)返了，現(xiàn)在大多數(shù)人都在手機(jī)上瀏覽網(wǎng)頁，確保應(yīng)用程序支持所有尺寸的屏幕需要一些技巧。在用手機(jī)瀏覽網(wǎng)站時，沒有誰希望看到頁面上的關(guān)鍵部分消失在屏幕外的區(qū)域。無論如何，網(wǎng)站上都不該出現(xiàn)橫向滾動條。

響應(yīng)式網(wǎng)站能在各種用戶設(shè)備上都提供最好的體驗。除此之外，響應(yīng)式網(wǎng)站的外觀更統(tǒng)一。構(gòu)造響應(yīng)式網(wǎng)站需要使用媒體查詢(media queries)。媒體查詢不難掌握，你能很快適應(yīng)。

創(chuàng)造力

前端工作者需要洞悉事務(wù)應(yīng)有的運作機(jī)制。在開發(fā)某一功能時，有時會發(fā)現(xiàn)這個功能缺少某一處設(shè)計，或者不知道如何將其呈現(xiàn)在小尺寸屏幕上，此時就需要你發(fā)揮創(chuàng)造力。

但即使有了設(shè)計，你仍然需要創(chuàng)造力來將圖形設(shè)計實現(xiàn)為可用的網(wǎng)頁。但這并不是需要創(chuàng)造力的唯一原因。與所有軟件一樣，代碼庫中會悄然出現(xiàn)漏洞，修復(fù)這些漏洞是你工作的一部分，同樣也需要創(chuàng)造力。

[[346462]]

圖源：unsplash

搞懂如何測試工作成果

如果問一群開發(fā)人員他們最討厭的工作是什么，大多數(shù)人的回答可能是測試。不過，盡管測試并不是招人喜歡，但每個開發(fā)人員都理解它的重要性。

你可以在這一領(lǐng)域一展拳腳，脫穎而出。會編寫自動化測試不僅是錦上添花，所有開發(fā)團(tuán)隊都在盡可能地轉(zhuǎn)向自動化，通過自動化測試，你可以快速獲得關(guān)于代碼更改的反饋。手動測試十分耗時，如果沒有任何自動化測試，就需要重復(fù)進(jìn)行手動測試。

Cypress是常用的自動化測試工具之一。Cypress是一個端到端測試框架，它有一些很棒的功能，其中一個就是回退(time traveling)。回退功能可以讓你準(zhǔn)確地看到測試過程中每一步都發(fā)生了什么，這使得調(diào)試變得更簡便且深入。

Cypress可以用來測試應(yīng)用程序的任務(wù)流。同時，你可能希望在工具庫內(nèi)添加更多的測試。另一個流行的測試工具是Jest，Jest允許你為所創(chuàng)建的組件編寫單元測試和快照測試。這使你能夠測試應(yīng)用程序的更多獨立運作部分，而不是測試應(yīng)用程序的不同部分如何協(xié)同工作。

版本控制

任何項目都必須具備版本控制。版本控制使你能持續(xù)管理、追蹤并控制文件的變更，它是確保代碼庫的質(zhì)量和完整性的必要工具。你應(yīng)該了解如何將剛完成的新功能推送到另一個分支，并且熟悉基本的版本控制操作，比如push、pull和commit。

解決合并(merge)過程中的沖突(conflicts)問題以及處理揀選(cherry-picking)對你來說應(yīng)該并非難事，這些是開發(fā)人員的基本技能。Git是最常用的版本控制系統(tǒng)，也可選擇Mercurial和SVN。

終端(Terminal)

精通各種終端的操作并能熟練地鍵入命令，這的確是一項被低估的技能。每個開發(fā)人員都在不斷提升自己、提高效率，熟悉各種終端操作有益于提升工作速度。與其用鼠標(biāo)在圖形用戶界面(GUI)上點來點去，不如直接在終端內(nèi)進(jìn)行操作——效果相同，但更快捷。

掌握mkdir、chmod和chown等基本命令能大大簡化前端開發(fā)者的工作。如果你在DevOps(軟件開發(fā)與IT運維)團(tuán)隊工作，那么可能會涉及到一些運維任務(wù)，這需要更新SSL證書或安裝安全補(bǔ)丁。這些操作都是在終端內(nèi)完成的。

這些技能你掌握了多少?努力點亮屬于“前端大佬”的技能樹吧!