可讀性代碼就是可維護(hù)性代碼背零!
1购岗、注重命名
為一個(gè)事件命名是很困難的员舵。雖然困難但是非常有必要。
想象以下藕畔,將兩個(gè)數(shù)組合并成一個(gè)數(shù)組马僻,并生成一個(gè)唯一值的數(shù)組。那么你會怎么命名它呢注服?我們也許會這樣命名韭邓?
function mergeNumberListIntoUniqueList(listOne, listTwo) {
return [...new Set([...listOne, ...listTwo])]
}
上面的命名并不糟糕,但是還不是很友好溶弟。你可以將一個(gè)功能函數(shù)拆分為兩個(gè)功能函數(shù)女淑,這樣命名更友好和函數(shù)復(fù)用性更好。
function mergeLists(listOne, listTwo) {
return [...listOne, ...listTwo]
}
function createUniqueList(list) {
return [...new Set(list)]
}
2辜御、IF語句簡化
假設(shè)我們有下面的代碼:
if(value === 'duck' || value === 'dog' || value === 'cat') {
// ...
}
我們可以這樣解決:
const options = ['duck', 'dog', 'cat'];
if (options.includes(value)) {
// ...
}
將亂七八糟的條件判斷放到一個(gè)變量中存儲鸭你,比看臃腫的表達(dá)式要好很多。
3擒权、及早返回
有下面的代碼:
function handleEvent(event) {
if (event) {
const target = event.target;
if (target) {
// Your awesome piece of code that uses target
}
}
}
及早返回使得我們的代碼更加易讀:
function handleEvent(event) {
if (!event || !event.target) {
return;
}
// Your awesome piece of code that uses target
}
4袱巨、解構(gòu)賦值
在javascript
中,我們可以對objects
和arrays
進(jìn)行解構(gòu)賦值碳抄。
例如:
// object 解構(gòu)賦值
const numbers = {one: 1, two: 2};
const {one, two} = numbers;
console.log(one); // 1
console.log(two); // 2
// array 解構(gòu)賦值
const numbers = [1, 2, 3, 4, 5];
const [one, two] = numbers;
console.log(one); // 1
console.log(two); // 2
5愉老、童子軍規(guī)則
童子軍有一條規(guī)則:永遠(yuǎn)保持離開時(shí)的露營比你發(fā)現(xiàn)它時(shí)更整潔。如果你在地面上發(fā)現(xiàn)了臟東西剖效,那么無論是否是你留下的嫉入,你都要將它清理干凈。你要有意地為下一組露營者改善環(huán)境璧尸。
我們編寫代碼也是這樣子咒林,如果你在代碼中發(fā)現(xiàn)了臟代碼,那么你可以嘗試去修改它爷光,即使是一個(gè)沒有被引用到的變量名垫竞。
6、代碼風(fēng)格
在你的團(tuán)隊(duì)中使用一種代碼風(fēng)格瞎颗,比如限定代碼縮進(jìn)的規(guī)范是兩空格呢還是四空格件甥;使用單引號呢還是雙引號呢;使用同類的一種框架呢,還是流行兩種解決方案的框架呢...這樣團(tuán)隊(duì)中人員接手項(xiàng)目的成本就會降低哼拔,開發(fā)人員的心里減少排斥感~
參考:https://dev.to/joachimzeelmaekers/clean-up-your-code-by-applying-these-7-rules-35ee引有。更多內(nèi)容可以戳jimmy blogs。