小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金

这篇我们继续讲前端开发项目过程中各个场景的命名方法，这篇系列总共有三篇，大家也可以看看前两篇：

当前选项、激活项命名

适用列表的选中项、菜单选中项、步骤操作的当前进行步骤、页面路由当前路由等的命名。

{
  activeTab: '当前选中选项卡',
  currentPage: '当前页',
  selectedData: '当前选项中数据',
}

临时数据、比对数据命名

针对在代码中有时会使用一些临时的变量来存储数据、保存数据快照的场景下的命名。

{
  swapData: '临时交换数据',
  tempData: '临时数据',
  dataSnapshot: '数据快照'
}

数据循环语句中变量命名

在使用 for 循环时，多层嵌套请依次使用 i/j/k，超过3层可以使用 x/y/z，m/n 来命名。使用 forEach, map, filter 等方法时，每一个元素命名可以根据不同语境下的特殊名字来命名，比如遍历 menus，那么每个元素可以命名为 menu，不然则使用上下文无关的词汇，比如：item, option, data, key, object 等。至于索引通常使用 index，如果多层可以使用 index + 数字 的形式，也可以直接使用 i/j/k 来作为索引，甚至还可以使用 subIndex/grandIndex 这种方式来命名。

对于在使用 for 循环时数组长度如果需要单独命名的话，可以使用 xxlength/xxLens，或者 xxCount。

在循环的过程中通常还会统计某个条件下数据匹配的次数、重复元素数量、记录中间结果等情况。这里推荐使用 count 表示次数，skipped 表示跳过的数量，result 表示结果。

// for 循环
for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    for (let k = 0; k < 10; k++) {
      // do something
    }
  }
}

for (let i = 0, lens = this.options.length; i < lens; i++) {
  // do something
}

// forEach
users.forEach((item, index) => {
  // do something
})

menus.forEach((menu, index) => {
  if (menu.children) {
    menu.children.forEach((subMenu, subIndex) => {
      if (subMenu.children) {
        subMenu.children.forEach((grandMenu, grandIndex) => {
          // 一个不常用的示例
        })
      }
    })
  }
})

方法参数命名

方法的参数名称和数量在不同的方法中各不相同，但是还是有一些固定的模式可以参考，比如在Vue中监听属性变化的新值和旧值；reduce 方法的上一个值，当前值；回调函数的命名、剩余参数的命名等。

情形一：新值、旧值

常见于Vue中watch 对像中的属性监听回调函数，推荐使用

{
  oldVal: '旧值',
  newVal: '新值'
}

情形二：上一个值、下一个值和当前值

这种情形见于路由的钩子方法，Object.assign 数据拷贝的参数。

// 组合一
{
  from: '从...',
  to: '到...'
}

// 组合二
{
  prev: '上一个...',
  next: '下一个...',
  cur: '当前'
}

// 组合三
{
  source: '源',
  target: '目标'
}

// 组合四
{
  start: '开始',
  end: '结束'
}

情形三：异步数据返回

用于Promise的then方法参数，await 的返回的Promise等。可选择的词汇有：res, data, json, entity，推荐使用 res。

demoPromise.then(res => {
  // do something
})

情形四：其它情况

一些使用不多，但是在编程时约定成俗的命名方式。例如 ch 表示单个字符，str 表示字符串, n 代表次数, reg 表示正则, expr 表示表达式, lens 表示数组长度, count 表示数量, p 表示数据的精度, q 表示查询(query), src 表示数据源(source), no 表示数字(number), rate 表示比率, status 表示状态, bool 表示布尔值, arr 表示数组值, obj 表示对象值, x 和 y 表示坐标两轴, func 表示函数, ua表示User Agent, size 表示大小, unit 表示单位, hoz 表示水平方向, vert 表示垂直方向, radix 表示基数，根

// 传入单个字符
function upper(ch) {}

// 数量重复
function repeat(str, n)

// 正则
'abab'.replace(reg, 'bb')

事件命名

这里根据DOM、nodejs和一些框架和UI组件的事件进行归纳

DOM事件

这里列举DOM中常见的事件命名

{
  load: '已完成加载',
  unload: '资源正在被卸载',
  beforeunload: '资源即将被卸载',
  error: '失败时',
  abort: '中止时',
  focus: '元素获得焦点',
  blur: '元素失去焦点',
  cut: '已经剪贴选中的文本内容并且复制到了剪贴板',
  copy: '已经把选中的文本内容复制到了剪贴板',
  paste: '从剪贴板复制的文本内容被粘贴',
  resize: '元素重置大小',
  scroll: '滚动事件',
  reset: '重置',
  submit: '表单提交',
  online: '在线',
  offline: '离线',
  open: '打开',
  close: '关闭',
  connect: '连接',
  start: '开始',
  end: '结束',
  print: '打印',
  afterprint: '打印机关闭时触发',
  click: '点击',
  dblclick: '双击',
  change: '变动',
  select: '文本被选中被选中',
  keydown/keypress/keyup: '按键事件',
  mousemove/mousedown/mouseup/mouseleave/mouseout: '鼠标事件',
  touch: '轻按',
  contextmenu: '右键点击 (右键菜单显示前)',
  wheel: '滚轮向任意方向滚动',
  pointer: '指针事件',
  drag/dragstart/dragend/dragenter/dragover/dragleave: '拖放事件',
  drop: '元素在有效释放目标区上释放',
  play: '播放',
  pause: '暂停',
  suspend: '挂起',
  complete: '完成',
  seek: '搜索',
  install: '安装',
  progress: '进行',
  broadcast: '广播',
  input: '输入',
  message: '消息',
  valid: '有效',
  zoom: '放大',
  rotate: '旋转',
  scale: '缩放',
  upgrade: '更新',
  ready: '准备好',
  active: '激活'
}

自定义事件

在封装组件时提供的事件名除了参考DOM事件外，在命名上也可以参考Github Api 采用 动词过去时 + Event 的方式, Visual Studio Code Api的 `on +

{
  assignedEvent: '分配事件',
  closedEvent: '关闭事件',
  labeledEvent: '标签事件',
  lockedEvent: '锁事件',
  deployedEvent: '部署事件'
}

此外，很多命名方式可以根据场景使用 元素 + click 、元素 + change 、select + 范围等方式灵活运用

{
  selectAll: '选择所有',
  cellClick: '当某个单元格被点击时会触发该事件',
  sortChange: '当表格的排序条件发生变化的时候会触发该事件'
}

状态管理命名

如果在项目中用到了状态管理(redux/vuex/ngrx)，下面给出一些ActionType，Mutation, Action的命名参考。

// Redux 的 actionType
LOAD_SUCCESS
LOAD_FAIL
TOGGLE_SHOW_HISTORY
ON_PLAY
ON_LOAD_START
FETCH_SONGS_REQUEST
RECEIVE_PRODUCTS

// ngrx
const SET_CURRENT_USER = '[User] Set current';
const ADD_THREAD = '[Thread] Add';
const UPDATE_TRIP_SUCCESS = 'Update [Trip] Success';

其它命名

// 日期、时间
// --------------------------------------------------------
sentAt: '发送时间'
addAt: '添加时间'
updateAt: '更新时间'
startDate: '开始日期'
endDate: '结束日期'
startTime: '开时时间'
endTime: '结束时间'

前端命名规则与各个场景的命名方法，解决你取变量名的痛苦！！！（三）