前言
一个项目大多都是由一个团队来完成，如果没有统一的代码规范，那么每个人的代码必定会风格迥异。大多数情况下，并非程序中有复杂的算法或是复杂的逻辑，而是去读别人的代码实在是一件痛苦的事情。统一的风格使得代码可读性大大提高了，人们看到任何一段代码都会觉得异常熟悉。显然的，规范的代码在团队的合作开发中是非常有益而且必要的。
而笔者在实习公司进行codeReview的过程中，发现自己写代码的规范意识还远远不够，参考了很多资料，在mentor和几位伙伴的帮助下，进行了多次的代码整改，为此，特意写一篇关于命名规范的文章，希望能够帮助到后来者，早日养成代码规范的习惯。 本文所有内容都是基于已有方案的一个总结
- 导师：作为新人养成良好的代码规范目前是最最重要的一件事情，最简单的东西就是业务开发了，要学会思考总结。你看看你写的代码，好家伙，是不是你走了，公司都没人能维护你的代码了。
- 我：好的好的！这就写笔记（摸鱼偷偷来逛掘金）
基本准则
- 贴合业务
- 简洁、语义化，能够英文释义
- 始终保持一种命名方法。项目中可能多人协同开发，而命名方式有多种都是可行的，进行开发时应保持原来代码命名风格
常用命名方法
- Pascal命名法：所有单词的首字母都大写，其他字母小写
- Camel命名法：除首字母外，其他单词的首字母大写，其他字母小写
- 下划线命名法：单词与单词间用下划线做间隔
- kebab-case：横线连接
一、佛光初现-HTML篇
起手式佛光大放，可使敌人暂时失明；同时使对手失重浮起，身形大失难以反抗。最后一举定乾坤。
- 内置标签名小写，闭合正确，组件采用大驼峰命名。
<header></header> <MyComponent></MyComponent> ｜｜ <MyComponent />
- 自定义属性采用data-开头
<li data-msg='xxx'></li>
- 非必要不使用id选择器（避免冲突）
- a 标签的几个规范
- 给a标签添加title属性
<a>标签的href属性必须写上链接地址，暂无的加上javascript:;
- HTTP自适应
在HTTP页面，会使用HTTP发送请求，在HTTPS页面会使用HTTPS发送请求。
<a href="//cf.qq.com/main.shtml">进入官网</a> //图片SRC <img src="//game.gtimg.cn/images/cf/web201610/logo.png"> //JS链接 <script src="//ossweb-img.qq.com/images/js/title.js"></script>
二、金顶佛灯-CSS篇
起手式催动一个小火球，正式出手时释放大火。掌力惊人的同时，更可以在对方体内释放佛火。
- id、class 都使用小写
- 样式名不能包含ad、guanggao、ads、gg是广告含义的关键词，避免元素被网页拓展、插件屏蔽
- 选择器避免嵌套三级以上
- 属性值处于0-1之间的省略掉前面的0
- 字体不小于12px，字重使用数字，颜色不使用单词命名
- BEM规范
- B表示Block 一般用于组件的最外层
.form
- E表示Element，Block元素下的元素(使用双短下划线连接)
.form__button
- M表示Modifiler，修改B/E层级的某个样式，或某个属性(使用双短横线连接)
.form__button--disabled // 禁用状态的表单按钮 .form__button--pink // 粉色的表单按钮
- ⚠️ 公共的单独样式，就不用写成BEM 举个简单的🌰（这里就不过多介绍BEM了，花两分钟时间驻留此地应该可以学会的～）
.pig{} /* 猪 */ .pig__feet{} /* 猪蹄(猪的脚)*/ .pig--pink{} /* 小猪佩奇（粉色的猪） */ .pig--pink__feet{} /* 小猪佩奇的猪蹄 */ .pig--pink__head{} /* 小猪佩奇的脑袋 */
- 观察到这里其实可以发现，
A__B一般描述的是A的B,而A--C描述的是处于C状态下的A，一般C是修饰A的某个词。
当然如果你的结构最外层本身就是多个词组成的直接使用短横线-连接即可
.nav__left /* 导航栏的左侧 */ .left-nav /* 左侧导航栏 */ .nav__left__btn /* 导航栏左侧的按钮 */ .left-nav__btn /* 左侧导航栏的按钮 */
- 查看一些UI库的代码你会经常看到类似这样的命名
表示的意思就是 el-input这个组件的包裹层
三、佛动山河-JS篇
首四式里最具威力的一招，没有什么特别的技巧。
- 函数、变量统一使用小驼峰命名
- 常量全部大写，多个单词之间使用_下划线连接
const MAX_AGE = 199;
- 类中的私有函数或者私有变量使用_下划线开头，例如_name
- 命名尽量精准，不使用太过宽泛的词作为后缀
getUserPosts // bad 含义过于宽泛，不精确 getUserData getUserInfo
- 确定好上下文，存在上下文的情况下，无歧义避免冗余
Class Employee { constructor (name) { // good this.name = name; // bad 因为本身就处在 Employee 这个上下文中，信息冗余 this.employeeName = name; } } // 这里在 name 前加 employee 是有必要的，因为已经脱离了 Employee 这个上下文 const employeeName = new Employee('gavin').name;
- 保持动词的一致性
// 常用的动词有get set read create add update reset delete remove等。 getQuestion getUserPosts getUsers // bad 有很多近意动词，选一个一直用，不要变来变去 getQuestion returnUsers retrieveUsers
- 函数或方法名尽量采用动词或判断性词汇
getFullYear() // 取值 toString() // 转换 isArray() // 判断
- Boolean 值的命名，一般采用is，has，can，need开头
- 描述状态
isShow：是否显示 isVisible：是否可见 isLoading：是否处于加载中 isConnecting：是否处于连接中 isValidating：正在验证中 isRunning：正在运行中 isListening：正在监听中
- 属性状态（实体属性）
disabled：是否禁用 editable：是否可编辑 clearable：是否可清除 readonly：只读 expandable：是否可展开 checked：是否选中 enumberable：是否可枚举 iterable：是否可迭代 clickable：是否可点击 draggable：是否可拖拽
- 配置项（功能开启）allow、with、enable、no等动词为前缀的小驼峰
//是否带选项卡 withTab //不带选项卡 withoutTab //开启过滤 enableFilter //允许自定义缩放 allownCustomScale //是否清除 shouldClear //是否能选中元素 canSelectItem //不显示label后面的冒号 noColon //检查Js checkJs
四、佛问迦蓝-Vue篇
起手式释放梵音，可使敌人暂时失聪，然后打出正式攻击。
- 单一规范，使用小驼峰or短横线命名
- 组件名不使用缩写
// 错误 components/ |- sd-settings.vue |- u-prof-opts.vue // 正确 components/ |- student-dashboard-settings.vue |- user-profile-options.vue
- 只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。
components/ |- TheHeading.vue |- TheSidebar.vue
- .基础组件使用特定前缀开头
// 错误 components/ |- MyButton.vue |- VueTable.vue |- Icon.vue // 正确 components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue
- 单词顺序
组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾
// 错误 components/ |- ClearSearchButton.vue |- RunSearchButton.vue |- SearchInput.vue // 正确 components/ |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vue
- props
在子组件html中传入prop的为 kebab-case格式，子组件接收方采用 camelCase 格式。
// 错误 <welcome-message greetingText="hi"/> props: { 'greeting-text': String } // 正确 <welcome-message greeting-text="hi"/> props: { greetingText: String }
- 组件事件名
统一使用 kebab-case 格式，并且以 动词结尾。
// 正确 this.$emit('dom-resize'); this.$emit('api-load');
- 紧密耦合的组件名
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
components/ |- TodoList.vue |- TodoListItem.vue |- TodoListItemButton.vue
- VueX
- Store 中的Module 使用“小驼峰命名法”
- Store 中的Mutation 使用 全部大写的下划线命名法
- Store 中的state/getters/action 使用“小驼峰命名法”
- Router
- path 小写
- name 大驼峰
- component 大驼峰
五、迎佛西天-Git篇
出手时恍若有多条手臂，可以以一人之力全方位攻击对手。
5.1 分支branch
git 分支分为集成分支、功能分支和修复分支，分别命名为 develop、feature 和 hotfix，均为单数。不可使用 features、future、hotfixes、hotfixs 等错误名称。
- master（主分支，永远是可用的稳定版本，不能直接在该分支上开发）
- develop（开发主分支，所有新功能以这个分支来创建自己的开发分支，该分支只做只合并操作，不能直接在该分支上开发）
- feature-xxx（功能开发分支，在develop上创建分支，以自己开发功能模块命名，功能测试正常后合并到develop分支）
- feature-xxx-fix(功能bug修复分支，feature分支合并之后发现bug，在develop上创建分支修复，之后合并回develop分支。PS:feature分支在申请合并之后，未合并之前还是可以提交代码的，所以feature在合并之前还可以在原分支上继续修复bug)
- hotfix-xxx（紧急bug修改分支，在master分支上创建，修复完成后合并到 master）
5.2 提交记录commit
type
feat: 新特性，新功能
fix: 修改问题
docs: 文档修改
style: 代码格式修改, 注意不是 css 修改
refactor: 代码重构
chore: 其他修改, 比如构建流程, 依赖管理
scope
-l 修改内容只影响一个功能模块
-m 修改内容影响两个及以上模块
-g 修改内容会影响所有模块
subject：
使用 "动词+名词" 结构，简短文件修改部分的内容。eg. feat -g 新增系列直播
六、佛光普照-其他
掌气幻化为巨大的佛座莲台，将敌我双方包围其中，可凭借花瓣反弹掌力，不但不会消散，反而增强掌力、掌速；如果对手击碎莲花，更能借机由平面攻击进阶为立体攻击，本人也将快如佛光。
6.1 文件命名
- 不得有空格
- 使用短横线命名
todo-list / index.vue - 某些特殊文件采用全大写 例如 README
6.2 项目名称
- 小写，单词之间_隔开，
my_project_name
6.3 基础命名
get 获取/set 设置, add 增加/remove 删除 create 创建/destory 移除 start 启动/stop 停止 open 打开/close 关闭, read 读取/write 写入 load 载入/save 保存, create 创建/destroy 销毁 begin 开始/end 结束, backup 备份/restore 恢复 import 导入/export 导出, split 分割/merge 合并 inject 注入/extract 提取, attach 附着/detach 脱离 bind 绑定/separate 分离, view 查看/browse 浏览 edit 编辑/modify 修改, select 选取/mark 标记 copy 复制/paste 粘贴, undo 撤销/redo 重做 insert 插入/delete 移除, add 加入/append 添加 clean 清理/clear 清除, index 索引/sort 排序 find 查找/search 搜索, increase 增加/decrease 减少 play 播放/pause 暂停, launch 启动/run 运行 compile 编译/execute 执行, debug 调试/trace 跟踪 observe 观察/listen 监听, build 构建/publish 发布 input 输入/output 输出, encode 编码/decode 解码 encrypt 加密/decrypt 解密, compress 压缩/decompress 解压缩 pack 打包/unpack 解包, parse 解析/emit 生成 connect 连接/disconnect 断开, send 发送/receive 接收 download 下载/upload 上传, refresh 刷新/synchronize 同步 update 更新/revert 复原, lock 锁定/unlock 解锁 check out 签出/check in 签入, submit 提交/commit 交付 push 推/pull 拉, expand 展开/collapse 折叠 begin 起始/end 结束, start 开始/finish 完成 enter 进入/exit 退出, abort 放弃/quit 离开 obsolete 废弃/depreciate 废旧, collect 收集/aggregate 聚集
6.3 数据处理
- 获取数据用get或者query
- 格式化数据有format、convert、toggle、inverse、pharse、flat等
//根据ID获取数据元素 getItemById //根据传入的已选列表ID来获取列表全部数据 getItemsBySelected //根据UID查询用户 queryUserByUid
//格式化日期 formatDate //转换货币单位 convertCurrency //反转数据列表 inverseList //切换所有已选择数据状态 toggleAllSelected //解析XML数据 parseXml //展开选择数据 flatSelect //按降序排序 sortByDesc
七、天佛降世-附赠命名篇
页面结构
容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center
导航
导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary
功能
标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：regsiter 搜索：search 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标签页：tab 文章列表：list 提示信息：msg 当前的: current 小技巧：tips 图标: icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright
表单
Radio 单选框 Checkbox 多选框 Input 输入框 InputNumber 计数器 Select 选择器 Cascader 级联选择器 Switch 开关 Slider 滑块 TimePicker 时间选择器 DatePicker 日期选择器 DateTimePicker 日期时间选择器 Upload 上传 Rate 评分 ColorPicker 颜色选择器 Transfer 穿梭框 Form 表单
数据
Table 表格 Tag 标签 Progress 进度条 Tree 树形控件 Pagination 分页 Badge 标记 Avatar 头像 Skeleton 骨架屏 Empty 空状态 Descriptions 描述列表 Result 结果
通知框
Alert 警告 Loading 加载 Message 消息提示 MessageBox 弹框 Notification 通知
导航
NavMenu 导航菜单 Tabs 标签页 Breadcrumb 面包屑 PageHeader 页头 Dropdown 下拉菜单 Steps 步骤条
常用组件名
Dialog 对话框 Tooltip 文字提示 Popover 弹出框 Popconfirm 气泡确认框 Card 卡片 Carousel 走马灯 Collapse 折叠面板 Timeline 时间线 Divider 分割线 Calendar 日历 Image 图片 Backtop 回到顶部 InfiniteScroll 无限滚动 Drawer 抽屉
结尾
其实如来神掌一共有九式，但是因为作者的内功不够，目前还只修炼到第五式，（摸鱼时间结束，赶紧跑去赶业务了）感谢看到最后。喜欢就点个赞再走吧！
最后贴出思维导图📒
