【记录】前端代码规范 规范

1. 命名规范

a.ClassName命名

<!-- 这个时候 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 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：构建过程或辅助工具的变动

参考：凹凸前端代码规范