banner

可讀性代碼就是可維護性代碼！

1、注重命名

為一個事件命名是很困難的。雖然困難但是非常有必要。

想象以下，將兩個數(shù)組合并成一個數(shù)組，并生成一個唯一值的數(shù)組。那么你會怎么命名它呢？我們也許會這樣命名？

function mergeNumberListIntoUniqueList(listOne, listTwo) {
  return [...new Set([...listOne, ...listTwo])]
}

上面的命名并不糟糕，但是還不是很友好。你可以將一個功能函數(shù)拆分為兩個功能函數(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)) {
  // ...
}

將亂七八糟的條件判斷放到一個變量中存儲，比看臃腫的表達式要好很多。

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進行解構(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ī)則：永遠保持離開時的露營比你發(fā)現(xiàn)它時更整潔。如果你在地面上發(fā)現(xiàn)了臟東西，那么無論是否是你留下的，你都要將它清理干凈。你要有意地為下一組露營者改善環(huán)境。

我們編寫代碼也是這樣子，如果你在代碼中發(fā)現(xiàn)了臟代碼，那么你可以嘗試去修改它，即使是一個沒有被引用到的變量名。

6、代碼風(fēng)格

在你的團隊中使用一種代碼風(fēng)格，比如限定代碼縮進的規(guī)范是兩空格呢還是四空格；使用單引號呢還是雙引號呢;使用同類的一種框架呢，還是流行兩種解決方案的框架呢...這樣團隊中人員接手項目的成本就會降低，開發(fā)人員的心里減少排斥感~

參考：https://dev.to/joachimzeelmaekers/clean-up-your-code-by-applying-these-7-rules-35ee。更多內(nèi)容可以戳jimmy blogs。