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
