浅谈JavaScript 代码简洁之道

测试代码质量的唯一方式：别人看你代码时说 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'; }