前端规范之变量命名

529 阅读4分钟

JavaScript 中的命名

常量可以采用全大写的形式,但普通的const修饰的变量不应该大写

const HOURS_IN_DAY = 24;
const USER_AGE = 30;

// bad 下面这些并不是常量,只是不会被修改的变量
const USER = findUser();
const TODAY = new Date();

使用具描述性的名字

这一条包含的信息比较宽泛,这里稍微再展开下:

  • 命名要精确表意,不能太宽泛,更不能词不达意

    • 同一个事物可能有多个单词适配,选最合适的
    • 同一个词有多种含义
  • 使用业务术语。应避免从电脑的视角去命名,而是应该从人类认识事物的角度去命名

  • 尽量避免用缩略语

  • 单词拼拼对。推荐安装「Code Spell Checker」或其他类似插件

getUserPosts

// bad 含义过于宽泛,不精确
getUserData
getUserInfo

// bad 不要用单个单词的变量,如果只是很小的范围内使用的临时变量则无大碍
global.d = new Date()

常用的命名动词

常用的动词有get set read create add update reset delete remove等。

getQuestion
getUserPosts
getUsers

// bad 有很多近意动词,选一个一直用,不要变来变去
getQuestion
returnUsers
retrieveUsers

布尔值的命名

布尔值一般用is can has need等助动词开头,如 isVisible hasLicense canEvaluate shouldAbort。返回布尔值的函数或方法,命名规则相同,如 Array.isArray(arr)。但这样容易出现函数名和变量名冲突的情况,这个时候可以在函数前加check get等区分。

const hasApple = checkHasApple(fruits, 'apple');

// hasApple       是否包含苹果
// checkHasApple  判断是否包含苹果

数值的命名

首选有意义的简短命名,如 width length count,如果没有合适的就采用 numberOfXXX xxxCount 之类的通用命名

width
length
total

maxWidth

numberOfErrors
errorCount

函数的命名

函数名由一个 动词 加 一个 名词 组成,如 getUser getInfo isArray。

getFullYear()  // 取值
toString()     // 转换
isArray()      // 判断

复杂对象的命名

推荐使用 valuesByKey 的方式,如 usersByID。

 const usersByID = {
   id12345: { name: 'byted', age: 9 },
   // ...
 };

 // bad
values  // 提供的信息不够充分
keysToValuesMap  // 名字里不要体现类型,类型信息交给 TypeScript 记吧
mapOfKeysToValues
mapFromKeysToValues

用词应尽量精简,无法精简长些也无妨,不能为了精简而放弃语义

findUserByNameOrEmail
setUserLoggedInTrue

// bad 选词应该尽量精简,但必须保证语义的确定性
findUser
复制代码
getUserFriend

// bad "FromDatabase" 提供了多少附加信息? 这种可以精简掉
getUserFriendFromDatabase

两个字母的缩略词都大写,大于两个则改驼峰

IO
AppID

// bad
Io
APPID

常用的命名组合列表

一般情况下,变量/函数的命名采用动词前缀+名词修饰。

前缀说明
变量
can是否可以执行某操作
is是否xxx
has是否有xxx
函数
calc计算
change改变
fetch/get获取(数据)
handle操作
judge判断
set设置

CSS 中的命名

下面列出了常见的css命名单词

CSS类名说明
布局
layout布局容器
wrapper/wrap控制布局宽度的外围容器
header/head/hd头部/顶部
main/bd主体部分
footer/foot/ft底部
sidebar侧边栏
容器
banner广告栏
content内容部分
copyright版权
list列表
menu/submenu菜单/二级菜单
nav/subnav导航栏/二级导航
组件/细节
arrow箭头
btn按钮
download下载
logo徽标
message/msg信息
news新闻
product产品
search搜索
status状态
summary摘要
tab标签页
tag标签
text/txt文本
tip提示
title/subtitle标题/二级标题
尺寸
large
middle中等
small
mini迷你
位置
top/right/bottom/left上/右/下/左
关系
first第一个
last最后一个
prev上一个
current当前项
next下一个
forward向前
back向后
状态
primary主要
info提示信息
success成功
warning一般警告
danger/error严重警告/错误警告
link文字链接
plain/ghost按钮是否镂空
light亮模式
dark暗模式
disabled禁用
active激活
checked选中
loading加载中

自定义类名

自定义类名一般以短横线“-”作为单词间分割,通常不使用驼峰命名,以此区别于变量。在项目中通常使用 scssless 来进行样式书写,大大降低了类名重复引发的样式问题。因此我们只需要关注一个模块的外层容器类名。通常采用 模块名称-修饰名称 的命名方式。

React组件的命名

组件的命名通常都是大驼峰命名

最后附上一句名言:

Any fool can write code that a computer can understand. Good programmers write code that humans can understand. ——Martin Fowler