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 | 加载中 |
自定义类名
自定义类名一般以短横线“-”作为单词间分割,通常不使用驼峰命名,以此区别于变量。在项目中通常使用 scss
、less
来进行样式书写,大大降低了类名重复引发的样式问题。因此我们只需要关注一个模块的外层容器类名。通常采用 模块名称-修饰名称
的命名方式。
React组件的命名
组件的命名通常都是大驼峰命名
最后附上一句名言:
Any fool can write code that a computer can understand. Good programmers write code that humans can understand. ——Martin Fowler