[譯]提升你react和js編碼的5個(gè)技巧
原文作者：Adán Carrasco
譯者：花花小仙女
為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。轉(zhuǎn)載請(qǐng)聯(lián)系作者。
兩周前，我開(kāi)始做一個(gè)新項(xiàng)目，有些代碼已經(jīng)寫(xiě)好了。然而，沒(méi)有最佳實(shí)踐可遵循。當(dāng)你開(kāi)始做一個(gè)新項(xiàng)目時(shí)，重要的是一起定義基礎(chǔ)和最佳實(shí)踐/指南，團(tuán)隊(duì)將遵循此基礎(chǔ)來(lái)編寫(xiě)最佳代碼：可維護(hù)，易讀，易于理解。
我將描述我在項(xiàng)目中看到的5種情況以及如何改進(jìn)它們。
關(guān)鍵字：一致性
以有組織的方式引入ES6模塊將節(jié)省你查找任何找不到或不需要模塊的時(shí)間。
之前
之后
在之前的引入是無(wú)序的，一個(gè)文件可能不會(huì)太亂，但是當(dāng)你打開(kāi)大量文件時(shí)候，嘗試找到一個(gè)特定的包真的很難。我們團(tuán)隊(duì)達(dá)成一致，使用之后一種方式對(duì)導(dǎo)入的包進(jìn)行分組，通過(guò)空格行分割每個(gè)模塊。因?yàn)槲募⒈３忠恢?，就可以刪除注釋了。
另外一個(gè)重要的事情就是防止不必要的嵌套和重復(fù)。在大多數(shù)情況下，將大大提升可讀性。
之前
之后
關(guān)于代碼，有一點(diǎn)很重要，就是要知道一個(gè)方法將返回什么，或者通過(guò)變量名輕松理解變量的含義（變量語(yǔ)義化），比如
之前
之后
在之后展示了如何在命名變量和方法保持一致性，在以下方面保持一致：
對(duì)于布爾類(lèi)型使用：is, has,should做前綴 對(duì)于方法使用 get/set 做前綴如果是操作 props 變量和方法都使用駝峰命名
之前
之后
之前
哪些可能會(huì)導(dǎo)致問(wèn)題？
在組件里添加業(yè)務(wù)邏輯（ Business Logic ）會(huì)讓它變得很難維護(hù)，調(diào)試和測(cè)試。我的建議是讓你的組件作為展示組件（presentational component）。這樣，你可以獨(dú)立出業(yè)務(wù)邏輯，然后專(zhuān)注于獨(dú)立地測(cè)試該組件。前面的每個(gè)邏輯都混在一起?，F(xiàn)在我們把每個(gè)職責(zé)分開(kāi)，這樣更容易測(cè)試和調(diào)試。
附加：如果你正在使用類(lèi)型檢查器，請(qǐng)讓它發(fā)揮作用。
如果你的團(tuán)隊(duì)選擇使用類(lèi)型檢查器，那么使用嚴(yán)格模式很重要，以確保它能發(fā)揮作用，來(lái)達(dá)到使用它的目的。
之前
之后
我并不是說(shuō)這些規(guī)則適用于所有項(xiàng)目，但你的團(tuán)隊(duì)需要制定自己的并且達(dá)成統(tǒng)一。
你有哪些最佳實(shí)踐/指南？
掃碼關(guān)注公眾號(hào)，訂閱更多精彩內(nèi)容。
“在看和轉(zhuǎn)發(fā)”就是最大的支持