1. 命名规范
a.ClassName命名
ClassName的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “_” 连接
当子孙模块超过4级或以上的时候，可以考虑在祖先模块内具有识辨性的独立缩写作为新的子孙模块
<!-- 这个时候 tiui 为 tenant_info_user_img 首字母缩写-->
<div class="tenant">
<div class="tenant_cover"></div>
<div class="tenant_info">
<div class="tenant_info_user">
<div class="tenant_info_user_img">
<img src="" alt="">
<!-- 这个时候 tiui 为 tenant_info_user_img 首字母缩写-->
<div class="tiui_tit"></div>
<div class="_txt"></div>
...
</div>
</div>
<div class="tenant_info_list"></div>
</div>
</div>
祖先模块不能出现下划线，除了是全站公用模块，如 mod_ 系列的命名：
<!-- 这个是全站公用模块，祖先模块允许直接出现下划线 -->
<div class="mod_info">
<div class="mod_info_son"></div>
<div class="mod_info_son"></div>
...
</div>
b.图片命名
图片命名建议以以下顺序命名：
图片业务（可选） +（mod_）图片功能类别（必选）+ 图片模块名称（可选） + 图片精度（可选）
图片业务：
- List item
- pp_：拍拍
- wx_：微信
- sq_：手Q
- jd_：京东商城
- …
图片功能类别：
- mod_：是否公共，可选
- icon：模块类固化的图标
- logo：LOGO类
- spr：单页面各种元素合并集合
- btn：按钮
- bg：可平铺或者大背景
- …
图片模块名称：
- goodslist：商品列表
- goodsinfo：商品信息
- useravatar：用户头像
- …
图片精度：
- 普清：@1x
- Retina：@2x | @3x
- …
如下面例子：
公共模块：
wx_mod_btn_goodlist@2x.png
wx_mod_btn_goodlist.png
mod_btn_goodlist.png
非公共模块：
wx_btn_goodlist@2x.png
wx_btn_goodlist.png
btn_goodlist.png
c. 声明变量命名
- 小驼峰命名
- 语义化
d. vue文件命名
组件的命名需遵从以下原则：
- 有意义的 : 不过于具体，也不过于抽象
- 简短 : 2 到 3 个单词
- 具有可读性 : 以便于沟通交流
- 小驼峰命名
例如：
2. JS代码规范
a. 基本
- 2个空格缩进，必须正确缩进
- 分号、逗号之后必须空格或转行
- 左大括号不转行
- 左大括号之前一定有空格
- 若左右大括号在一行，则大括号内侧必须有空格。例如const obj = { a: 1, b: 2 }
- 双目运算符前后必须有空格 例如： a && b
- 非必要不写分号（无行末分号）
b. 变量
- 不使用var，没有显式赋值的变量必须用const，其余用let
- 允许多个变量共用声明和初始化语句，逗号隔开，但不能太长。例如：const
a = 1, b = 2 - 变量名原则上使用小驼峰命名法（首字母小写，其余单词首字母大写），例如userInfo
- 对象内容很短时，可以在一行内完成
- 对象的最后一个成员后，不得添加逗号
- 对象成员变量赋值时，若属性名称和读取的变量名一致，则必须简写。即const obj = { a: a
}必须简写为const obj = { a }
c. 控制
- if、else、for的执行语句块很短时，可以在行内完成，不必大括号展开。若换行，必须大括号展开。
- else应该与if的右大括号在同一行，此时else前后都有空格，即} else {
- if、else if、else的层级嵌套尽量不要超过三层
3. 注释规范
a.HTML中单行注释
一般用于简单的描述，如某些状态描述、属性描述等
注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行
<!-- Comment Text -->
<div>...</div>
b. JS中注释
·单行注释
说明： 单行注释以两个斜线开始，以行尾结束
语法： // 注释说明
使用规则：注释双斜杠后有一个空格
// 描述该变量是做什么的
let pig = ''
·多行注释
说明：以 /* 开头， / 结尾
语法：/ 注释说明 /
使用规则：第一行为/，最后行为*/，其他行以开始，并且注释文字与保留一个空格
/*
* 代码执行到这里后会调用setTitle()函数
* setTitle()设置title的值
*/
setTitle()
·函数(方法)注释
语法：
/**
?* 函数说明
? * @author 作者
? * @param {参数类型} 描述信息
? * @return {返回类型} 描述信息*/
常用注释关键字:
| 注释名 | 语法 |
|---|---|
| @param | @param 参数名 {参数类型} 描述信息 |
| @return | @return {返回类型} 描述信息 |
例如：
/**
* 批量解冻/冻结
* @author 饺子
* @param arr {Array} 数据数组
* @param isFreeze {Boolean} 是否冻结【0=否，1=是】
*/
async batchPersonAuditEntrance(arr=[], isFreeze=0) {
if(arr.length <= 0) return this.$message.error('暂无处理数据')
let lists = this.$helper.deepClone(arr)
lists = lists.map((item,index)=> {
return {
operationId: item.id, //* 运营数据id
accountType: item.accountType, //* 账号类型
accountId: item.accountId, //* 账号id
villageId: item.villageId, //* 小区id
isFreeze: isFreeze, //* 是否冻结【0=否，1=是】
realName: item.realName, // 名称(解冻必传)
phoneNumber: item.phoneNumber, // 电话号码(解冻必传)
avatarUrl: item.avatarUrl, // 头像(解冻必传)
gender: item.gender, // 性别(解冻必传)
templateEndDate: item.expiredTime, // 时间模板结束时间(解冻必传)
index
}
})
const { code, data: { list = [] }, message} = await this.$myRequest(this.$api.batchPersonAuditEntrance, {list : JSON.stringify(lists)})
if(code !== 200) return this.$message.error(message)
if(list && list.length <=0) {
this.$message.success('操作成功')
this.$refs.table.clearSelection()
await this.getList()
return
}
// list长度大于0则处理错误信息
this.showFailData = list.map(item=> {
return {
message: item.message, // 后端返回的错误信息
...arr[item.index], // 找到前端错误信息对应的项
}
})
this.showFaceFailDataDialog = !this.showFaceFailDataDialog
}
4. git提交代码规范
// git commit -m 'type：，描述信息'
git commit -m 'feat: 描述信息'
Type: commit的类别，包含以下七种：
feat：新功能（feature）
fix：修补bug
docs：文档（documentation）
style： 格式（不影响代码运行的变动）
refactor：重构（即不是新增功能，也不是修改bug的代码变动）
test：增加测试
chore：构建过程或辅助工具的变动
参考：凹凸前端代码规范
