参考
1
2
3
4
| 代码规范：
1. 基础规范：http://alloyteam.github.io/CodeGuide/
2. Vue 规范：https://v2.cn.vuejs.org/v2/style-guide/
3. ES6 规范：https://es6.ruanyifeng.com
|
代码质量检查工具
- 项目自带的
vue-cli-service lint
- 项目安装的第三方 lint 工具，配置脚本执行，如 《ESLint》中 F2ELint
- 使用 IDEA 自带工具
Analyze Inspect Code，最全面的代码质量检查工具，包含自带和第三方 lint 工具
Airbnb
https://github.com/airbnb/javascript
块级作用域
建议不再使用 var ，而是使用 let 取代
在 let 和 const 之间，建议优先使用 const，利于提高程序的运行效率
所有的函数都应该设置为常量 const，避免重复定义
常量应全部大写，通过下划线 _ 连接，例如 const MAX_USER_COUNT = 200
const 对象不能重新赋值，但可以操作对象
1
2
3
4
5
6
| const p = {name: "张三"}
p.name = "李四"
p.age = 20;
Object.assign(p, { age: 30 })
|
字符串
静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号，${variable} 引用变量值
1
2
3
| const a = 'foobar';
const b = `foo${a}bar`;
|
解构赋值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
const arr = [1, 2, 3, 4];
const [first, second] = arr;
const { left, right } = {left: "left", right: "right"}
const { left: leftV, right: rightV } = {left: "left", right: "right"}
function getFullName({ firstName, lastName }) {
}
getFullName({firstName: 'zhang', lastName:'ming'})
const json = { name:'张三', age:20, result: { code: 200} };
const { name, age, result: { code }} = json;
console.log(code);
console.log(name)
|
对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
const a = { k1: v1, k2: v2 };
const b = {
k1: v1,
k2: v2,
};
const p = {name: "张三"}
const k = {...p}
const p = [1,2,3]
const k = [...p]
const a = { x: null };
a.x = 3;
const a = {name: '张三'};
Object.assign(a, { x: 3 });
let b = {...a, {x: 3}}
const atom = {
ref,
value: 1,
addValue(value) {
return atom.value + value;
},
};
|
数组
1
2
3
4
5
6
7
8
|
const itemsCopy = [...items];
const items2 = [...items, '1', '2'];
const items3 = ['1', '2', ...items];
const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);
|
函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
[1, 2, 3].map(x => x * x);
function concatenateAll(name, age, ...args) {
return args.join('');
}
function handleThings(name, age=20) {
}
function handleThings(name, age=20, sex="男") {
}
function handleThings(opts = {}) {
}
|
Map
只有模拟现实世界的实体对象时，才使用 Object。如果只是需要 key: value 的数据结构，使用 Map 结构。因为 Map 有内建的遍历机制
只有模拟现实世界的实体对象时，才使用 Object。如果只是需要 key: value 的数据结构，使用 Map 结构。因为 Map 有内建的遍历机制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| const map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);
console.log(map.get('a'));
map.set('a', 97);
console.log(map.get('a'));
console.log(map.size);
map.delete('b');
console.log(map.size);
for (let key of map.keys()) {
console.log(key);
}
for (let value of map.values()) {
console.log(value);
}
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
|
Class
用 Class，取代需要 prototype 的操作,Class 的写法更简洁
1
2
3
4
5
6
7
8
9
10
11
|
class Queue {
constructor(contents = []) {
this._queue = [...contents];
}
pop() {
const value = this._queue[0];
this._queue.splice(0, 1);
return value;
}
}
|
Extend
使用 extends 实现继承，因为这样更简单，不会有破坏 instanceof 运算的危险
1
2
3
4
5
6
|
class PeekableQueue extends Queue {
peek() {
return this._queue[0];
}
}
|
模块
Module 语法是 JavaScript 模块的标准写法，坚持使用这种写法。使用 import 取代 require
1
| import { func1, func2 } from 'moduleA';
|
使用 export 取代 module.exports
1
2
3
4
5
6
7
8
9
10
|
import React from 'react';
class Breadcrumbs extends React.Component {
render() {
return <nav />;
}
};
export default Breadcrumbs;
|
ESLint 的使用
ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码
