代码规范

一、变量命名规范

1、Vue 响应式对象命名

ref响应式对象：xxxRef
reactive响应式对象: xxxReactive
ref响应式元素：xxxElRef

// 普通对象
const userInfo = {
  name: '张三',
  age: 18
}

// 响应式对象：ref和reactive
// 如果是ref，规范为：xxxRef。
const nameRef = ref('李四');
// 如果是reactive，xxxReac
const userInfoReac = reactive({
  name: '张三',
  age: 18
})

// 如果是元素，xxxElRef。 El是为了区分和上面的Ref区别
// html 代码
<div ref="divElRef"></div>
// js代码
const divElRef = ref(null);

2、类型修饰后缀

// 序号采用index，整数采用num，浮点型采用float
let rowIndex = 1;        // 行顺序号
let docNum = 155;        // 稿件数量
let lengthFloat = 89.5;    // 长度通常是整
数型的，加上float作为后缀后，就明确了变量的实际类型

// 字符串采用str，布尔型采用'is'作为前缀
const sex = 1;
const sexStr = ['女', '男', '未知'][sex];
const isMen = sex == 1;

// 数组采用array，集合采用set/map，对象采用obj，JSON采用json
const userObj = {};
const userJson = {};
const userArray = [];    // 不建议采用list作为后缀
const userSet = new Set();
const userMap = new Map();

// 类和函数修饰后缀
const xxxFn;            // 函数
const xxxCb;            // 回调函数（强调：为了避免回调'cb'与采编'cb'的命名歧义，系统中用全大写'CB'代表采

2、UI组件中加载或弹窗控制规范

// 只有一个loading
<a-table :loading="loading" />
// 有多个loading
<a-table :loading="loading" />
<a-table :loading="loadingUserTable" />
<a-table :loading="loadingRoleTable" />

// visible同上

三、Vue 模板中方法名规范

// 提交：handleSubmit或handleSubmitXxx
<a-button type="primary">提交</a-button>

// 保存：handleSave或handleSaveXxx
<a-button type="primary" @click="handleSave">保存</a-button>

// 关闭：handleClose或handleCloseXxx
<a-button type="primary" @click="handleClose">关闭</a-button>

// 打开弹窗：openDialog或openDialogXxx
<a-button type="primary" @click="openDialog">打开弹窗</a-button>

// 关闭弹窗：closeDialog或closeDialogXxx
<a-button type="primary" @click="closeDialog">关闭弹窗</a-button>

// 跳转页面: jump或jumpXxx
<a-button type="primary" @click="jump">跳转页面</a-button>

三、类和类中方法的命名规范 强制

1 类名采用大驼峰方式命名，实例名采用小驼峰方式命名
2 类中方法采用小驼峰方式命名
3 内部方法名前面加下划线，表示私有方法仅限内部调用
4 以上命名方式同样适用于对构造函数及内部方法的命名