JavaScript代码简洁之道第一期《变量》

Posted 2020-12-13 陌上兮月

只使用业内通用的简写

有些业务描述会比较长，这时候往往有人会使用简写，但是如果简写不是业内通用的，而是自己随性创造的，这将给阅读带来很大困难。

比如，info-->infomation，def-->default，conf-->config，val-->value等等，这些都是业内广泛使用的简写，可以放心使用。

但是如果找不到业内对应的通用简写，为了可阅读性，宁愿全写，也不使用个人发明的简写。

// bad
const calBonusByPerf = () => {} // 糟糕的命名，`cal`和`perf`完全不明白是什么意思

// good
const calculateBonusByPerformance = () => {} // 如果不知道这个简写，全写也不错

// best
const calcBonusByPerformance = () => {} // 合理使用calc简写，没有擅自乱简写

业务代码绝不使用魔数

魔数，即Magic Number，表示像魔法一样让人摸不着头脑的数字，广义一点来说是常量。

对于一些JS本身无业务含义的代码，对常量命名是不必要的。但是如果涉及到业务含义，为常量命名则是必须的。

// bad
const EMPTY_LENGTH = 0; // 表达长度大于0，EMPTY_LENGTH显得很不必要
if (userList.length > EMPTY_LENGTH) {
    // todos
}

// worst
if (res.code === ‘3756‘) { // 3756是什么鬼，一个月后谁也不会知道了
    // todos
}

// good
const LOGIN_SUCCESS = ‘3756‘; // 为业务常量命个名，看起来就非常清晰易读
if (res.code === LOGIN_SUCCESS) {
    // todos
}

如果存在命名空间，就没有必要重复写前缀

有时候我们会将一组变量放在一个对象里面，用来表示这几个变量的强相关性。 用来表示几个变量的强相关性的手段主要就是两种：

1. 增加层级以划分模块
2. 添加统一前缀以标识模块

以上两种手段选其一就可以了，两种都选用是很啰嗦且不必要的。

// 以下模拟一张购车订单字段存储
// normal
const carBrand = ‘Honda‘;
const carPrice = 172800;
const carColor = ‘purple‘;

const customerName = ‘zhangnan‘;
const customerGender = ‘male‘;
const customerAge = 25;

// bad
const car = {
    carBrand: ‘Honda‘,
    carPrice: 172800,
    carColor: ‘purple‘
};

const customer = {
    customerName: ‘zhangnan‘,
    customerGender: ‘male‘,
    customerAge: 25
};

// good 
const car = {
    brand: ‘Honda‘,
    price: 172800,
    color: ‘purple‘
};

const customer = {
    name: ‘zhangnan‘,
    gender: ‘male‘,
    age: 25
};

直接且可描述

不同的类型的词，如果能对应不同的格式，那么区分度会非常高。

比如，当我们我想描述一个布尔值变量，这是一个形容词(adj)，通常会以is或者has开头；

而描述一个动作，格式是主动式的，即do something；

描述一个名词，则只需要描述名词本身就好了，不要出现动词，也不要出现形容词。

// 形容词--bad
const dialogShow = false;
const showDialog = false;
const inWechatBrowser = false;
const beforeLogin = false;

// 形容词--good
const isDialogVisible = false;
const isInWechatBrowser = false;
const hasLoginBefore = false;

// 动词--bad
const userInfoGet = () => {};
const bookIsRead = () => {};

// 动词--good
const getUserInfo = () => {};
const readBook = () => {};

总结

以上即是我们为变量取名的四个基本原则，归纳如下：

• 不乱用简写
• 业务代码为常量命名
• 命名空间和统一前缀择其一即可
• 不同类型对应不同命名格式