開(kāi)發(fā)人員技能樹(shù)：成為“前端大手子”需要具備哪些素質(zhì)？
本文轉(zhuǎn)載自公眾號(hào)“讀芯術(shù)”(ID：AI_Discovery)。
前端開(kāi)發(fā)人員目前的需求量很大，但這并不代表公司錄用的門檻就變低了，他們優(yōu)中取優(yōu)，只選擇頂尖人才。
如今的前端開(kāi)發(fā)和十年前大相徑庭，一切都在不斷演變，JavaScript的三大框架React、Vue和Angular十年前才剛剛誕生。優(yōu)秀前端開(kāi)發(fā)者應(yīng)具備的技巧也在與時(shí)俱進(jìn)，前端開(kāi)發(fā)者需要時(shí)刻保持最佳狀態(tài)。
HTML，但不僅是基本的HTML
眾所周知，充分理解HTML及其所有可能性是web開(kāi)發(fā)的基礎(chǔ)。必須熟悉HTML5，并且能夠編寫(xiě)清晰的HTML代碼。例如，不要?jiǎng)?chuàng)建不必要的包裝元素(wrapping element)，也不能在span中使用div。這些都是基礎(chǔ)，但筆者經(jīng)常看到這樣的基本問(wèn)題出錯(cuò)。
另一項(xiàng)有關(guān)HTML并日益受歡迎的技能是可訪問(wèn)性。什么是網(wǎng)頁(yè)可訪問(wèn)性?具備可訪問(wèn)性的無(wú)障礙網(wǎng)頁(yè)是指殘疾人也可以充分使用的網(wǎng)頁(yè)，這里的殘疾人包括視力受損、失明或失聰?shù)娜巳旱取?/p>
對(duì)于想要?jiǎng)?chuàng)建人人可用的優(yōu)質(zhì)網(wǎng)頁(yè)的企業(yè)和組織來(lái)說(shuō)，可訪問(wèn)性是必須的。對(duì)于這些企業(yè)和組織來(lái)說(shuō)，重要的是推出人人可用的產(chǎn)品和服務(wù)。可訪問(wèn)性的好處不僅在于改善了殘疾人的網(wǎng)絡(luò)體驗(yàn)，同時(shí)還可以提升所有用戶的使用體驗(yàn)。
學(xué)習(xí)使用框架
顯然，三大框架任何之一都值得學(xué)習(xí)。大多數(shù)前端開(kāi)發(fā)工作都要求求職者至少曾使用過(guò)一種常用JavaScript框架。
學(xué)習(xí)React、Vue或Angular三者之一是不錯(cuò)的選擇，這些都是熱門技能。不過(guò)，筆者強(qiáng)烈推薦先大家學(xué)會(huì)JavaScript的基礎(chǔ)知識(shí)，嘗試一些只使用普通的JavaScript的項(xiàng)目。在理解JavaScript的工作方式并且完全清楚基本原理之后，再專注于學(xué)習(xí)三大JavaScript框架中的一種。
由此你將了解所使用的框架解決了哪些問(wèn)題，并理解該框架為何采用某種方法。這種學(xué)習(xí)JavaScript的方法的唯一缺點(diǎn)就是更耗時(shí)。然而，從長(zhǎng)遠(yuǎn)來(lái)看，這是有回報(bào)的，你將遠(yuǎn)遠(yuǎn)領(lǐng)先于那些抄近路的人。
不想學(xué)習(xí)React、Vue或Angular也無(wú)妨，因?yàn)檫€有很多其他框架可供學(xué)習(xí)。不過(guò)要記住，其他的框架遠(yuǎn)沒(méi)有那么高的需求。
圖源：unsplash
樣式風(fēng)格
與十年前相比，網(wǎng)站的風(fēng)格已經(jīng)截然不同。過(guò)去，我們會(huì)用表單來(lái)創(chuàng)建一個(gè)網(wǎng)站。現(xiàn)在我們使用更先進(jìn)的技術(shù)，例如flexboxes和網(wǎng)格布局(grids)。
對(duì)于前端開(kāi)發(fā)人員來(lái)說(shuō)，了解CSS的使用方法是一項(xiàng)基本技能。在每個(gè)瀏覽器中，樣式表(stylesheets)的效果都應(yīng)當(dāng)保持一致——這可并非易事。
設(shè)計(jì)樣式時(shí)并非只需要掌握CSS，Sass如今也很常見(jiàn)。Sass是一個(gè)CSS預(yù)處理器，它允許使用變量、數(shù)學(xué)運(yùn)算、混合(mixin)、循環(huán)、函數(shù)、導(dǎo)入功能等等，這使得編寫(xiě)CSS變得簡(jiǎn)便，而且功能更加強(qiáng)大。此外，和CSS無(wú)甚亮點(diǎn)的語(yǔ)法相比，Sass的語(yǔ)法更為簡(jiǎn)潔而優(yōu)雅。
有時(shí)只需要使用一個(gè)框架就能完成所有重任。這意味著你不再需要從零開(kāi)始編寫(xiě)全部CSS。有了這些現(xiàn)成的功能，你可以用這些框架來(lái)創(chuàng)建一整個(gè)樣式完美的網(wǎng)站。你如果曾接觸過(guò)類似Bootstrap或Tailwind的框架，就領(lǐng)先其他開(kāi)發(fā)人員更多了。
響應(yīng)
用臺(tái)式機(jī)瀏覽網(wǎng)頁(yè)的日子已經(jīng)一去不復(fù)返了，現(xiàn)在大多數(shù)人都在手機(jī)上瀏覽網(wǎng)頁(yè)，確保應(yīng)用程序支持所有尺寸的屏幕需要一些技巧。在用手機(jī)瀏覽網(wǎng)站時(shí)，沒(méi)有誰(shuí)希望看到頁(yè)面上的關(guān)鍵部分消失在屏幕外的區(qū)域。無(wú)論如何，網(wǎng)站上都不該出現(xiàn)橫向滾動(dòng)條。
響應(yīng)式網(wǎng)站能在各種用戶設(shè)備上都提供最好的體驗(yàn)。除此之外，響應(yīng)式網(wǎng)站的外觀更統(tǒng)一。構(gòu)造響應(yīng)式網(wǎng)站需要使用媒體查詢(media queries)。媒體查詢不難掌握，你能很快適應(yīng)。
創(chuàng)造力
前端工作者需要洞悉事務(wù)應(yīng)有的運(yùn)作機(jī)制。在開(kāi)發(fā)某一功能時(shí)，有時(shí)會(huì)發(fā)現(xiàn)這個(gè)功能缺少某一處設(shè)計(jì)，或者不知道如何將其呈現(xiàn)在小尺寸屏幕上，此時(shí)就需要你發(fā)揮創(chuàng)造力。
但即使有了設(shè)計(jì)，你仍然需要?jiǎng)?chuàng)造力來(lái)將圖形設(shè)計(jì)實(shí)現(xiàn)為可用的網(wǎng)頁(yè)。但這并不是需要?jiǎng)?chuàng)造力的唯一原因。與所有軟件一樣，代碼庫(kù)中會(huì)悄然出現(xiàn)漏洞，修復(fù)這些漏洞是你工作的一部分，同樣也需要?jiǎng)?chuàng)造力。
圖源：unsplash
搞懂如何測(cè)試工作成果
如果問(wèn)一群開(kāi)發(fā)人員他們最討厭的工作是什么，大多數(shù)人的回答可能是測(cè)試。不過(guò)，盡管測(cè)試并不是招人喜歡，但每個(gè)開(kāi)發(fā)人員都理解它的重要性。
你可以在這一領(lǐng)域一展拳腳，脫穎而出。會(huì)編寫(xiě)自動(dòng)化測(cè)試不僅是錦上添花，所有開(kāi)發(fā)團(tuán)隊(duì)都在盡可能地轉(zhuǎn)向自動(dòng)化，通過(guò)自動(dòng)化測(cè)試，你可以快速獲得關(guān)于代碼更改的反饋。手動(dòng)測(cè)試十分耗時(shí)，如果沒(méi)有任何自動(dòng)化測(cè)試，就需要重復(fù)進(jìn)行手動(dòng)測(cè)試。
Cypress是常用的自動(dòng)化測(cè)試工具之一。Cypress是一個(gè)端到端測(cè)試框架，它有一些很棒的功能，其中一個(gè)就是回退(time traveling)?；赝斯δ芸梢宰屇銣?zhǔn)確地看到測(cè)試過(guò)程中每一步都發(fā)生了什么，這使得調(diào)試變得更簡(jiǎn)便且深入。
Cypress可以用來(lái)測(cè)試應(yīng)用程序的任務(wù)流。同時(shí)，你可能希望在工具庫(kù)內(nèi)添加更多的測(cè)試。另一個(gè)流行的測(cè)試工具是Jest，Jest允許你為所創(chuàng)建的組件編寫(xiě)單元測(cè)試和快照測(cè)試。這使你能夠測(cè)試應(yīng)用程序的更多獨(dú)立運(yùn)作部分，而不是測(cè)試應(yīng)用程序的不同部分如何協(xié)同工作。
版本控制
任何項(xiàng)目都必須具備版本控制。版本控制使你能持續(xù)管理、追蹤并控制文件的變更，它是確保代碼庫(kù)的質(zhì)量和完整性的必要工具。你應(yīng)該了解如何將剛完成的新功能推送到另一個(gè)分支，并且熟悉基本的版本控制操作，比如push、pull和commit。
解決合并(merge)過(guò)程中的沖突(conflicts)問(wèn)題以及處理揀選(cherry-picking)對(duì)你來(lái)說(shuō)應(yīng)該并非難事，這些是開(kāi)發(fā)人員的基本技能。Git是最常用的版本控制系統(tǒng)，也可選擇Mercurial和SVN。
終端(Terminal)
精通各種終端的操作并能熟練地鍵入命令，這的確是一項(xiàng)被低估的技能。每個(gè)開(kāi)發(fā)人員都在不斷提升自己、提高效率，熟悉各種終端操作有益于提升工作速度。與其用鼠標(biāo)在圖形用戶界面(GUI)上點(diǎn)來(lái)點(diǎn)去，不如直接在終端內(nèi)進(jìn)行操作——效果相同，但更快捷。
掌握mkdir、chmod和chown等基本命令能大大簡(jiǎn)化前端開(kāi)發(fā)者的工作。如果你在DevOps(軟件開(kāi)發(fā)與IT運(yùn)維)團(tuán)隊(duì)工作，那么可能會(huì)涉及到一些運(yùn)維任務(wù)，這需要更新SSL證書(shū)或安裝安全補(bǔ)丁。這些操作都是在終端內(nèi)完成的。
這些技能你掌握了多少?努力點(diǎn)亮屬于“前端大佬”的技能樹(shù)吧!
