欢迎光临
我们一直在努力

JavaScript | 命名规范基础

文章目录

普通变量名称,驼峰式命名法

首字母小写,第二个单词开始,每个单词的首字母大写,其他的都是小写:

var aGoodValue = 11;

临时变量,或者函数中的参数命名

开头是下划线,后面跟驼峰式命名法:

var _sumValue = 20;

循环条件中的局部变量一般用i、j、k、l、m、n等单字母命名

for(i=1;i<10;i++){
  //代码
}

ES6中推出了常量,命名为所有字母大写,中间用下划线链接

const ELEMENT_WIDTH=60;

布尔值(Boolean)命名

对应true false状态
场景分类:

  1. 表示可见性、进行中的状态
    推荐命名方式为 is + 动词(现在进行时)/形容词,同时这种方式也可以直接不写 is,但是为了更好的作区分,建议还是加上。(java中有副作用)
{
  isShow: '是否显示',
  isVisible: '是否可见',
  isLoading: '是否处于加载中',
  isConnecting: '是否处于连接中',
  isValidating: '正在验证中',
  isRunning: '正在运行中',
  isListening: '正在监听中'
}
  1. 属性状态
{
  disabled: '是否禁用',
  editable: '是否可编辑',
  clearable: '是否可清除',
  readonly: '只读',
  expandable: '是否可展开',
  checked: '是否选中',
  enumberable: '是否可枚举',
  iterable: '是否可迭代',
  clickable: '是否可点击',
  draggable: '是否可拖拽'
}
  1. 配置类、选项类
    withXx enabelXx allowXx noXx

函数命名

与业务耦合性强
场景分类:

  1. 事件处理
    事件处理函数是前端平时用到最多的,包括浏览器原生事件、异步事件和组件自定义事件。在写法上最常见的两种命名分别为 onXxonXxClickhandleXxhandleXxChange
{
  onSubmit: '提交表单',
  handleSizeChange: '处理分页页数改变',
  handlePageChange: '处理分页每页大小改变',
  onKeydown: '按下键'
}
  1. 异步处理
{
  getUsers: '获取用户列表',
  fetchToken: '取得Token',
  deleteUser: '删除用户',
  removeTag: '移除标签',
  updateUsrInfo: '更新用户信息',
  addUsr: '添加用户',
  createAccount: '创建账户'
}
  1. 路由跳转
    推荐使用 toXxgoXx 这两种方式

4.数据加工,格式化数据

{
  getItemById: '根据ID获取数据元素',
  getItemsBySelected: '根据传入的已选列表ID来获取列表全部数据',
  queryUserByUid: '根据UID查询用户'
  formatDate: '格式化日期',
  convertCurrency: '转换货币单位',
  inverseList: '反转数据列表',
  toggleAllSelected: '切换所有已选择数据状态',
  parseXml: '解析XML数据',
  flatSelect: '展开选择数据',
  sortByDesc: '按降序排序'
}

数组命名

复数形式

{
  users: '用户列表',
  userList: '用户列表',
  tabOptions: '选项卡选项',
  stateMaps: '状态映射表',
  selectedNodes: '选中的节点',
  btnGroup: '按钮组',
  userEntities: '用户实体'
}

数据循环语句中变量命名

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

赞(1) 打赏
未经允许不得转载:散人研 » JavaScript | 命名规范基础
分享到: 更多 (0)

评论 抢沙发

1 + 1 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏