如何寫出讓同事贊不絕口的代碼

作者/ 瓊虎(安增平)

編輯/ hjy

在加入了擁有較高技術(shù)底蘊(yùn)的有道技術(shù)團(tuán)隊(duì)后，發(fā)現(xiàn)自己在前面的職業(yè)生涯中養(yǎng)成的一些‘作坊’習(xí)慣必須得到糾正。 

在日常工作中，研發(fā)同學(xué)只在coding階段中不需要?jiǎng)e人關(guān)心自己的代碼，其他時(shí)候，需要將自己的產(chǎn)出展示給別人的場(chǎng)景變得十分常見。

簡(jiǎn)單舉幾個(gè)例子：

① feature準(zhǔn)入后，同產(chǎn)品業(yè)務(wù)線的同事需要trans-review 

② mentor每個(gè)季度要Lint-review

③ 測(cè)試二輪后要diff-review 

④ ...... 

團(tuán)隊(duì)中的每個(gè)人都會(huì)用不同的視角來(lái)“審視”你的”作品“，那么我們?nèi)绾文贸鲆环菹袼囆g(shù)品一樣的項(xiàng)目代碼，然后獲得同事們的稱贊呢？ 

保持在項(xiàng)目中做到以下幾點(diǎn)，便可收獲殿堂級(jí)的藝術(shù)代碼。

以下幾點(diǎn)是在接手銷售轉(zhuǎn)化系統(tǒng)及質(zhì)檢系統(tǒng)等幾個(gè)項(xiàng)目后，針對(duì)自己的不足和團(tuán)隊(duì)成員交流得出的結(jié)論。

在聲明一個(gè)變量的時(shí)候，盡可能的將其作用和充當(dāng)?shù)慕巧⑷肫渲校?/p>

聲明一個(gè)函數(shù)，使用組合動(dòng)詞而非名詞：

聲明一個(gè)集合內(nèi)部包含多項(xiàng)內(nèi)容的時(shí)候，要記得使用復(fù)數(shù)形式：

在使用數(shù)學(xué)計(jì)算公式的時(shí)候盡量提前聲明好常量，常量的注入有助于提升你在維護(hù)代碼階段的可讀性：

在回調(diào)函數(shù)或者函數(shù)聲明的形參中，盡量保持形參的語(yǔ)義化，避免后期維護(hù)過程中看到前面隨意聲明的i，j，k后，又要折返到原回調(diào)處進(jìn)行查看，影響開發(fā)效率：

（同時(shí)在使用TS的過程中也盡量避免使用any類型，使用這種類型在codeReview過程中可能會(huì)被靈魂拷問）同時(shí)在聲明boolean類型的時(shí)候要以is作為開頭：

做到以上這些，在codeReview中就可以保持一個(gè)自信的狀態(tài)去接受同事們領(lǐng)導(dǎo)們的審閱，因?yàn)?strong style="box-sizing: border-box;">沒有犯低級(jí)錯(cuò)誤可以讓查看你代碼的人保持心情愉悅，同時(shí)這種心情可以對(duì)你產(chǎn)生正反饋。 

每個(gè)函數(shù)盡量保持其職責(zé)的單一性，不要出現(xiàn)一個(gè)非常強(qiáng)健的函數(shù)做了很多事情：

and這種單詞本身就不是函數(shù)的一部分，他會(huì)導(dǎo)致添加過多的業(yè)務(wù)依賴或職責(zé)到當(dāng)前的函數(shù)中，從長(zhǎng)遠(yuǎn)的角度看這絕對(duì)是弊大于利的。

在函數(shù)外的任何東西，任何變量都不是他的業(yè)務(wù)，所以好的函數(shù)應(yīng)該和函數(shù)外的任何變量保持好隔離。 

下面這段代碼可能只有剛?cè)腴T的新手才會(huì)寫出來(lái)，但是這種混亂的邏輯在業(yè)務(wù)復(fù)雜了之后，很可能會(huì)混入你的代碼中：

上面的例子可以改成下面這樣：

當(dāng)然在ES6的使用過程中上述問題普遍已經(jīng)不存在了，但純函數(shù)的思想需要時(shí)刻謹(jǐn)記。

當(dāng)你在創(chuàng)建了一些函數(shù)之后，發(fā)現(xiàn)他們?cè)诋?dāng)前的業(yè)務(wù)中做了一些比較類似的行為。例如，驗(yàn)證用戶登陸的用戶名和密碼，那么我們最好可以將其歸類為一個(gè)模塊中。

這里我們可以稱之為驗(yàn)證模塊，而不是簡(jiǎn)單的使用一個(gè)util或者server將其集中起來(lái)就完事了：

如果一個(gè)業(yè)務(wù)中出現(xiàn)了大量的if else這種內(nèi)容，想必開發(fā)人員看到會(huì)十分頭痛。

舉個(gè)簡(jiǎn)單的例子：

仔細(xì)看下這里的else其實(shí)是不需要的，我們可以通過提前返回來(lái)remove掉：

當(dāng)我們?yōu)g覽某個(gè)App或網(wǎng)站時(shí)，經(jīng)常會(huì)在點(diǎn)擊某個(gè)按鈕彈出“An Error Occurs”這種提示，這種提示很不友好，我們無(wú)法排查到底出現(xiàn)了什么原因，用戶更是一頭霧水，但是假如在出現(xiàn)這種錯(cuò)誤的時(shí)候?qū)⒚枋鲂畔⑻畛涞耐暾?，?duì)用戶或是技術(shù)支持都會(huì)有一個(gè)很棒的使用體驗(yàn)。

例如：當(dāng)用戶在表單中沒有輸入信息：

當(dāng)用戶此時(shí)網(wǎng)絡(luò)出現(xiàn)了故障：

對(duì)開發(fā)者而言，一個(gè)詳盡的提示能讓你輕松定位到問題，節(jié)省了大量的時(shí)間：

包含但不限于這幾種錯(cuò)誤格式，還有showMessage等方法可以提供......

在VSCode下開發(fā)的同學(xué)，可以通過安裝 prettier 來(lái)保持漂亮的代碼。同時(shí)借助ESLint可以讓你在開發(fā)時(shí)注重縮進(jìn)、空格這些格式化的內(nèi)容。 

假如在開發(fā)過程中注入了TS，那么開啟typescript-eslint會(huì)幫助你規(guī)范自己的類型定義，塑造一個(gè)風(fēng)格嚴(yán)謹(jǐn)?shù)拇astyle。

借助這些插件讓我們的代碼格式化時(shí)間大大降低，從而我們可以將更多的時(shí)間放在提升代碼質(zhì)量上。

- END -