浅谈JavaScript 代码简洁之道

日期：2020-05-11 栏目：程序人生浏览：次

测试代码质量的唯一方式：别人看你代码时说 f * k 的次数。

代码质量与其整洁度成正比。干净的代码，既在质量上较为可靠，也为后期维护、升级奠定了良好基础。

本文并不是代码风格指南，而是关于代码的可读性、复用性、扩展性探讨。

我们将从几个方面展开讨论：

变量
函数
对象和数据结构
类
SOLID
测试
异步
错误处理
代码风格
注释

变量

用有意义且常用的单词命名变量

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);
});

转载注明出处：http://www.heiqu.com/90.html

浅谈JavaScript 代码简洁之道

变量

相关推荐