測試代碼質量的唯一方式：別人看你代碼時說 f * k 的次數。

代碼質量與其整潔度成正比。干凈的代碼，既在質量上較為可靠，也為后期維護、升級奠定了良好基礎。

本文并不是代碼風格指南，而是關于代碼的可讀性、復用性、擴展性探討。

我們將從幾個方面展開討論：

變量

用有意義且常用的單詞命名變量

Bad:

const yyyymmdstr = moment().format('YYYY/MM/DD');

Good:

const currentDate = moment().format('YYYY/MM/DD');

保持統一

可能同一個項目對于獲取用戶信息，會有三個不一樣的命名。應該保持統一，如果你不知道該如何取名，可以去 codelf 搜索，看別人是怎么取名的。

Bad:

 getUserInfo(); getClientData(); getCustomerRecord();

Good:

getUser()

每個常量都該命名

可以用buddy.js 或者ESLint 檢測代碼中未命名的常量。

Bad:

// 三個月之后你還能知道 86400000 是什么嗎?setTimeout(blastOff, 86400000);

Good:

const MILLISECOND_IN_A_DAY = 86400000;setTimeout(blastOff, MILLISECOND_IN_A_DAY);

可描述

通過一個變量生成了一個新變量，也需要為這個新變量命名，也就是說每個變量當你看到他第一眼你就知道他是干什么的。

Bad:

const ADDRESS = 'One Infinite Loop, Cupertino 95014';const CITY_ZIP_CODE_REGEX = /^[^,/]+[,/s]+(.+?)s*(d{5})?$/;saveCityZipCode(ADDRESS.match(CITY_ZIP_CODE_REGEX)[1],  ADDRESS.match(CITY_ZIP_CODE_REGEX)[2]);

Good:

const ADDRESS = 'One Infinite Loop, Cupertino 95014';const CITY_ZIP_CODE_REGEX = /^[^,/]+[,/s]+(.+?)s*(d{5})?$/;const [, city, zipCode] = ADDRESS.match(CITY_ZIP_CODE_REGEX) || [];saveCityZipCode(city, zipCode);

直接了當

Bad:

const locations = ['Austin', 'New York', 'San Francisco'];locations.forEach((l) => { doStuff(); doSomeOtherStuff(); // ... // ... // ... // 需要看其他代碼才能確定 'l' 是干什么的。 dispatch(l);});

Good:

const locations = ['Austin', 'New York', 'San Francisco'];locations.forEach((location) => { doStuff(); doSomeOtherStuff(); // ... // ... // ... dispatch(location);});

避免無意義的前綴

如果創建了一個對象 car，就沒有必要把它的顏色命名為 carColor。

Bad:

 const car = { carMake: 'Honda', carModel: 'Accord', carColor: 'Blue' }; function paintCar(car) { car.carColor = 'Red'; }