1. 目的
为了使软件开发过程顺畅,保证软件质量,于是有了这份开发规范文档。
2. 概述
- 数据库不能随意修改,每次修改数据库都必须形成脚本
- 严格遵循
Eslint代码规范,有良好习惯 - 时刻考虑代码的可复用性
- 各模块之间要求低耦合
为了时刻规范代码,请全局安装eslint:
npm install -g eslint
3. 代码规范
3.1 有关命名
尽量保证命名更加语义化
3.1.1 文件名
- 文件命名采用下划线命名法
// good
service_center.js
// bad
serviceCenter.js
3.1.2 类 & 构造函数命名
- 类命名采用
Pascal命名法,大写字母开头,各个单词首字母大写
class Person {
constructor(name) {
this.name = name;
}
}
const person = new Person('小明');
3.1.3 方法命名
- 方法命名采用
Camel命名法,小写字母开头,各个单词首字母大写 - 前缀应当是动词
- 命名建议:可使用常见动词约定等。
| 动词 | 含义 | 返回值 |
|---|---|---|
| get | 获取某个值 | 函数返回一个非布尔值 |
| set | 设置某个值 | 无返回值、返回是否设置成功或者返回链式对象 |
| is | 判断是否为某个值 | 函数返回一个布尔值。true:是;false:否 |
| has | 判断是否含有某个值 | 函数返回一个布尔值。true:包含;false:不含 |
// good
function getName() {
...
return this.name;
}
function isExist() {
...
return true;
}
3.1.4 变量命名
- 采用
Camel命名法,小写字母开头,各个单词首字母大写 - 特有大写缩写词汇保持大写如:SQL, URL等
- 变量名字不宜过长,可适当采用缩减英文元音字母来缩短长度
- 前缀应当是名词(方法名前缀为动词,以此区分变量和方法)
// good
let maxLength = 10;
// bad
let setLength = 10;
3.1.5 常量命名
- 必须采用
全大写命名,且单词以_分割
const MAX_COUNT = 10;
const SQL = 'SELECT * from bas_table';
3.2 注释规范
团队成员都应该形成良好的写注释的习惯,方便阅读以及为了其他成员顺利了解项目
JS支持三种不同类型的注释:行内注释,单行注释以及多行注释。
- 行内注释:行内注释以两个斜线开始,以行尾结束。双斜线与代码以及注释文字之间都都保留一个空格。 语法:code // 行内注释
function addNumber() {
return 3 + 2; // 5
}
- 单行注释:单独一行,单行注释以两个斜线开始,以行尾结束。
function addNumber(a, b) {
return a + b;
}
// 调用求和方法
addNumber(2, 3);
- 多行注释:以
/*开头,*/结尾 语法:/* 注释说明 */
/*
* 第一步:设置a, b值
* 第二步:调用addNumber()方法
*/
addNumber(2, 3);
- 方法注释:函数(方法)注释也是多行注释的一种,但是包含了特殊的注释要求。 语法:
/**
* 方法描述
* @param {type} 参数值 参数说明
* @param {type} 参数值 参数说明
*/
示例:
/**
* @param {number} a 参数a
* @param {Number} b 参数b
*/
funtion addNumber(a, b) {
return a + b;
}
注意:方法里面不要使用多行注释。
4. 格式规范
JS格式规范要严格遵循 Eslint,要求在 husky 钩子中增加Eslint规则校验,校验不通过,代码提交失败。
4.1 缩进
- 使用2个空格而不是 tab 来进行代码缩进,同时绝对不要混用空格和 tab。
4.2 行尾部空格
- 去除行末尾的多余空格。
4.3 换行
{}花括号应该另起一行,左花括号与方法名、类名在同一行。(除了数组初始化时的花括号)if、while等语句,假如体内只有一句代码也不要省略{},为了方便以后的增删- 字符串过长考虑拆分成多行,每行不得超过
eslint规范的最大长度。
// good
if (arr.length) {
console.log('good');
}
// bad
if (arr.length)
{
console.log('bad');
}
4.4 对齐
- {}括号等应该对齐
- 类和方法的块注释必须紧贴类和方法
4.5 使用空格把运算符隔开
// bad
const x=y+5;
// good
const x = y + 5;
4.6 分号
- 必须使用分号。
5. 其他规范
5.1 变量声明
对所有的变量优先使用const,可变的变量使用let,不允许使用var
// good
const a = 1;
const b = 2;
// good
let count = 1;
if (true) {
count += 1;
}
5.2 Strings
- 字符串使用单引号 ''
- 生成字符串时,使用模板字符串代替字符串连接
// bad
function sayHi(name) {
return 'How are you, ' + name + '?';
}
// good
function sayHi(name) {
return `How are you, ${name}?`;
}
5.3 对象
使用字面值创建对象
// good
const obj = {};
// bad
const obj = new Object();
对象方法的简写
// bad
const atom = {
value: 1,
addValue: function (value) {
return atom.value + value;
},
};
// good
const atom = {
value: 1,
addValue(value) {
return atom.value + value;
},
};
对象属性值的简写
const lukeSkywalker = 'Hello World';
// bad
const obj = {
lukeSkywalker: lukeSkywalker
};
// good
const obj = {
lukeSkywalker
};
5.4 数组
使用字面值创建数组
// bad
const arr = new Array();
// good
const arr = [];
使用拓展运算符 ... 复制数组
// bad
const len = arr.length;
const arrCopy = [];
let i;
for (i = 0; i < len; i++) {
arrCopy[i] = arr[i];
}
// good
const arrCopy = [...arr];
5.5 解构
使用解构存取和使用多属性对象
// bad
function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
return `${firstName} ${lastName}`;
}
// good
function getFullName(user) {
const { firstName, lastName } = user;
return `${firstName} ${lastName}`;
}
// best
function getFullName({ firstName, lastName }) {
return `${firstName} ${lastName}`;
}
5.6 函数
- 尽可能使用箭头函数
- 不允许在一个非函数代码块(if、while 等)中声明一个函数
- 使用函数声明代替函数表达式
因为函数声明是可命名的,所以他们在调用栈中更容易被识别。此外,函数声明会把整个函数提升(hoisted),而函数表达式只会把函数的引用变量名提升。这条规则使得箭头函数可以取代函数表达式。
// bad
const foo = function () {
};
// good
function foo() {
}
- 别保存 this 的引用。使用箭头函数或 Function#bind。
// bad
function foo() {
const that = this;
return function() {
console.log(that);
};
}
// good
function foo() {
return () => {
console.log(this);
};
}
本文使用 mdnice 排版