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

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

参考：凹凸前端代码规范