码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2020-06-28 14:56:33      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:family   存在   res   阅读   for   rgba   简写   ons   存储   

只使用业内通用的简写

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

比如,info-->infomationdef-->defaultconf-->configval-->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 = () => {};

总结

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

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

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

标签:family   存在   res   阅读   for   rgba   简写   ons   存储   

原文地址:https://www.cnblogs.com/zhangnan35/p/12954831.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!