这篇文章是SEO禅在推进前端团队命名规范总结整理的，这里分享给各位，有需要的朋友可以看看，有什么问题可以留言评论。
命名方法论介绍
现在市面上流行的几中命名方法有如下5种：
驼峰命名法(camelCase)
驼峰命名是最常用的一种命名方法，通常被用在，函数，变量，如：
getUser()
let userInfo = {}
let isLogin = false帕斯卡命名法(PascalCase)
帕斯卡命名方法一般常见于Class类、接口、组件等，如：
class Person {}
interface Animal{}
PersonComponent.vue //vue组件短横线命名法(kebab-case)
短横线命名方法一般常见于HTML、CSS、文件名等，如：
<router-view /> // html标签
<body data-theme-dark ></body> // HTML属性（attribute）
.header-margin-top // CSS class语义化命名
.mt-30 // CSS class工具化(utility-first)命名
views/sub-directory/file-name.js //普通目录和js文件下划线命名法(SNAKE_CASE )
下划线命名方法一般常见于Python，PHP，数据库表字段等，在前端，我们通常使用下划线命名方法来命名常量，如：
let MAX_TIMEOUT = 5000 // 5s
let NODE_ENV: '"development"',匈牙利命名法(Hungarian notation)
匈牙利命名方法的基本格式：变量名=属性+类型+对象描述，如：
let sUsername = 'string类型变量'
let iAge = 3 // int类型变量
let g_sUsername = '全局string类型' // 这里的g_是全局变量的属性定义，s是变量类型此方法的出现是过去IDE还不太智能的时候，对类型的跟踪和判断并不准确，随着IDE的不断演进和越来越智能，这种方法已经慢慢退出历史舞台。
常见命名规范
上面说的是命名的方法论，学会了方法论并不能代表你有良好的命名习惯，下面介绍几种常用的命名规范作为参考。
函数命名
一般函数使用驼峰命名（camelCase）方法，命名规范遵循：动词+名词的方式，如：
canEditRole() // 判断是否有编辑角色权限，通常情况函数不能使用两个动词，这里的can是助动词
editRole() // 编辑角色
isLogin() // 判断是否登录
hasRole(role) // 判断是否拥有某个角色
getRoles(user) // 获取用户角色
setRoles(roles) // 设置用户角色下面是常用的函数命名动词列表：
- get 获取/set 设置，add 增加/remove 删除，create 创建/destory 销毁
- is/has/can/contains 是否拥有某些特性，功能
- start 启动/stop 停止，launch 启动/run 运行，begin 开始/finish/end 结束
- open 打开/close 关闭，read 读取/write 写入，load 载入/save 保存
- backup 备份/restore 恢复，import 导入/export 导出，split 分割/merge 合并
- inject 注入/extract 提取，attach 附着/detach 脱离，bind 绑定/separate 分离
- view 查看/browse 浏览，edit 编辑/modify 修改，select 选取/mark 标记，copy 复制/paste 粘贴
- undo 撤销/redo 重做，insert 插入/delete 移除，clean 清理/clear 清除，index 索引/sort 排序
- find 查找/search 搜索，increase 增加/decrease 减少，play 播放/pause 暂停
- compile 编译/execute 执行，debug 调试/trace 跟踪，observe 观察/listen 监听
- build 构建/publish 发布，input 输入/output 输出
- encode 编码/decode 解码，encrypt 加密/decrypt 解密，compress 压缩/decompress 解压缩，pack 打包/unpack 解包，
- connect 连接/disconnect 断开，send 发送/receive 接收，download 下载/upload 上传，
- refresh 刷新/synchronize 同步，update 更新/revert 复原，lock 锁定/unlock 解锁
- submit 提交/commit 交付，push 推/pull 拉，expand 展开/collapse 折叠
- enter 进入/exit 退出，abort 放弃/quit 离开，obsolete 废弃/deprecate 废旧,
- collect 收集/aggregate 聚集，parse 解析/resolve/ reject拒绝
上面动词只是作为参考，有些意思相近，在团队开发的时候最好规定一套动词规范，至于名词最好使用有意义的英文，能不缩写就不缩写，因为不是每个人都懂你的缩写是什么意思，除非有完善的对照表。
变量属性命名
除了函数命名规范外，另一个常见的就是变量和属性命名规范，这里推荐使用定语+名词的形式，如：
fileName
maxSize其中file和max都是定语，表示这个变量的作用范围，在为变量取名字的时候，时态也需要考虑进去，比如说：
isConnected // 有过去时态，表示是否已经连接
isConnecting // 现在进行时，表示正在连接
isConnect // 没有时态，不知道是已经连接还是正在连接，有歧义如果英文不太好可以使用翻译，或者统一使用中文拼音，但是不要中英文混用。
作者：SEO禅
本文链接：前端开发命名规范文档
版权申明：如无特殊说明，本站文章均为作者原创，著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处，谢谢！