js命名应遵循 简洁、语义化 的原则
一、变量
命名方法: 小驼峰式命名法
命名规范：前缀为形容词 （函数前缀为动词, 以此来区分函数和变量）
# 好的命名方式
let maxCount = 10;
let tableTitle = '啦啦啦';
# 不好的命名方式
let setConut = 10;
let getTitle = '啦啦啦';
二、常量
命名方法：名词全部大写
命名规范：使用大写字母和下划线来组合命名，下划线用来分割单词。
const MAX_COUNT = 10;
const URL = '//www.huifenqi.com';
三、函数 & 方法
命名方法： 小驼峰式命名法
命名规范： 前缀应该为动词
命名建议：常用动词约定
| 动词 | 含义 |
|---|---|
| can | 判断是否可执行某个动作 |
| has | 判断是否含义某个值 |
| is | 判断是否为某个值 |
| get | 获取某个值 |
| set | 设置某个值 |
| load | 加载某些数据 |
// 是否可阅读
function canRead() {}
// 获取名称
function getName() {}
四、类 & 构造函数
命名方法：大写驼峰式命名法，首字母大写。
命名规范：前缀为名称。
class Persion {
constructor(name) {
...
}
}
let person = new Person('啦啦啦');
五、类的成员
类的成员包括：
- 公共属性和方法： 跟变量和函数命名一样。
- 私有属性和方法：前缀为下划线
_, 后面跟公共属性和方法一样的命名方式。
class Person {
// 私有属性
_name: string;
constructor() { }
// 公共方法
getName() {
return this._name;
}
// 公共方法
setName(name) {
this._name = name;
}
}
六、注释规范
格式化插件推荐prettier
6.1 单行注释
// 设置标题
setTitle()
6.2 多行注释
/*
* 代码执行到这里后会调用setTitle()函数
* setTitle()：设置title的值
*/
setTitle();
6.3 函数 & 方法注释
/**
* 函数说明
* @关键字
**/
常用关键字注释
| 注释名 | 语法 | 含义 | 示例 |
|---|---|---|---|
| @param | @param {参数类型} 描述信息 | 描述参数 | @param {String} name 传入名称 |
| @return | @return {参数类型} 描述信息 | 描述返回值 | @retun {Boolean} true: 可执行; false: 不可执行 |
| @author | @author 描述信息 | 描述作者 | @author 某某某 2018/04/24 |
| @example | @example 示例代码 | 演示函数的使用 | @example setTitle('啦啦啦'); |
七、vue常用开发规范
- 参考vue风格指南
7.1 import
import 应置于顶层, 引入组件名遵循大写驼峰式命名法。
import ElInput form '***'
import Emitter from '***'
7.2 methods
命名方法：同函数命名法
命名建议：事件处理应以handle开头,如handleBlur
其他建议：使用promise或async/await处理异步逻辑，避免使用回调函数。
