<一> React 代码规范
文件与组件命名
- 扩展名: 使用.js作为js文件的扩展名。如果同一个文件夹下有同名而不同作用的js文件，则通过中缀（小写）进一步区分，例如：HomePageView.component.js, HomePageView.style.js, HomePageView.action.js等
- 文件名: 使用驼峰命名法且首字母大写，如HomePageView.js
- 组件命名: 与文件名（除中缀外）完全一致。如果组件单独放置在目录中，则目录名也一致
Bad Code
|
1
|
import Footer from
'./Component/OrderAccount/OrderAccountView'
;
|
Good Code
|
1
|
import Footer from
'./Component/OrderAccount/OrderAccount'
;
|
Good Code
|
1
|
import Footer from
'./OrderAccount'
;
|
组件声明
- 使用class与extends关键字。不使用React.createClass方法。需要导出的组件直接在class关键字前使用export default。
Bad Code
|
1
|
export
default
React.createClass({ });
|
Good Code
|
1
|
export
default
class HomePageView extends Component { }
|
对齐
- 按下面的案例对齐
Bad Code
|
1
2
|
<Foo superLongParam=
"bar"
anotherSuperLongParam=
"baz"
/>
|
Good Code
|
1
2
|
<Foo superLongParam=
"bar"
anotherSuperLongParam=
"baz"
/>
|
// 如果一行能摆下props，那就摆在一行
Bad Code
|
1
|
<Foo bar=
"bar"
/>
|
// 子组件照常缩进
Good Code
|
1
2
3
4
5
6
|
<Foo
superLongParam=
"bar"
anotherSuperLongParam=
"baz"
>
<Spazz />
</Foo>
|
引号
- 对于JSX的字符串属性使用双引号(")，其他情况下使用单引号。
Bad Code
|
1
|
<Foo bar=
'bar'
/>
|
Good Code
|
1
|
<Foo bar=
"bar"
/>
|
Bad Code
|
1
|
<Foo style={{ left:
"20px"
}} />
|
Good Code
|
1
|
<Foo style={{ left:
'20px'
}} />
|
空格
- 在自闭合的标签中包含一个空格。
Bad Code
|
1
|
<Foo/>
|
Bad Code
|
1
|
<Foo />
|
Bad Code
|
1
|
<Foo />
|
Good Code
|
1
|
<Foo />
|
state/props
- 对于多个单词组成的pros，使用驼峰命名法。不使用下划线或连接线。
Bad Code
|
1
2
3
4
|
<Foo
UserName=
"hello"
phone_number={12345678}
/>
|
Good Code
|
1
2
3
4
|
<Foo
userName=
"hello"
phoneNumber={12345678}
/>
|
- 读取state和props时，使用const与解构，必要时可使用let。不使用var。
Bad Code
|
1
2
|
var
userName =
this
.props.userName;
let checked =
this
.state.checked;
|
Good Code
|
1
2
|
const { userName, age, sex } =
this
.props;
const { checked } =
this
.state;
|
括号
- 当JSX标签超过一行时，使用括号包裹。
Bad Code
|
1
2
3
4
5
|
render() {
return
<MyComponent className=
"long body"
foo=
"bar"
>
<MyChild />
</MyComponent>;
}
|
Good Code
|
1
2
3
4
5
6
7
|
render() {
return
(
<MyComponent className=
"long body"
foo=
"bar"
>
<MyChild />
</MyComponent>
);
}
|
// good, when single line
Good Code
|
1
2
3
4
|
render() {
const body = <div>hello</div>;
return
<MyComponent>{body}</MyComponent>;
}
|
标签
- 对于没有子组件的JSX标签，始终自闭合。
Bad Code
|
1
|
<Foo className=
"stuff"
></Foo>
|
Good Code
|
1
|
<Foo className=
"stuff"
/>
|
-
如果组件有多行属性，则另起一行进行自闭合。
Bad Code
|
1
2
3
|
<Foo
bar=
"bar"
baz=
"baz"
/>
|
Good Code
|
1
2
3
4
|
<Foo
bar=
"bar"
baz=
"baz"
/>
|
方法
- 为方法命名时，不使用下划线开头（哪怕是想用作私有方法）。
Bad Code
|
1
2
3
4
5
6
|
React.createClass({
_onClickSubmit() {
// do stuff
}
// other stuff
});
|
Good Code
|
1
2
3
4
5
6
|
class extends React.Component {
onClickSubmit() {
// do stuff
}
// other stuff
});
|
方法声明的顺序
- 原则上按如下顺序排列React组件的各个方法（生命周期）：
<二>ES6代码规范
变量与常量声明
- 变量
尽量使用let来代替var
对于全局变量声明，采用global.xxx = xxx，但应避免声明过多全局变量污染环境
- 常量
对于常量应使用const进行声明，命名采用驼峰写法
对于使用 immutable 数据应用const进行声明
Bad Code
|
1
2
3
4
|
let someNum = 123;
const AnotherStr =
'不变的字符串'
;
let arr = [
'不'
,
'变'
,
'数'
,
'组'
];
var
ANOTHER_OBJ = {
'不变对象'
:
true
};
|
Good Code
|
1
2
3
4
|
const someNum = 123;
const anotherStr =
'不变的字符串'
;
const arr = [
'不'
,
'变'
,
'数'
,
'组'
];
const anotherObj = {
'不变对象'
:
true
};
|
字符串
- 处理多行字符串,使用模板字符串
以反引号( ` )标示
可读性更强，代码更易编写
注意排版引起空格的问题，使用场景为声明HTML模板字符串
Bad Code
|
1
2
3
|
const tmpl =
'<div class="content"> \n'
+
'<h1>这是换行了。</h1> \n'
+
'</div>'
;
|
Good Code
|
1
|
const tmpl = ` <div class=
"content"
> <h1>这是换行了。</h1> </div>`;
|
- 处理字符串拼接变量时,使用模板字符串
Bad Code
|
1
2
3
|
function
sayHi(name) {
return
'How are you, '
+ name +
'?'
;
}
|
Good Code
|
1
2
3
|
function
sayHi(name) {
return
`How are you, ${name}?`;
}
|
解构
- 解构语句中不使用圆括号
Bad Code
|
1
2
|
[(a)] = [11];
// a未定义
let { a: (b) } = {};
// 解析出错
|
Good Code
|
1
|
let [a, b] = [11, 22];
|
- 对象解构
对象解构 元素与顺序无关
对象指定默认值时仅对恒等于undefined ( !== null ) 的情况生效
- 若函数形参为对象时，使用对象解构赋值
Bad Code
|
1
2
3
4
5
|
function
someFun(opt) {
let opt1 = opt.opt1;
let opt2 = opt.opt2;
console.log(op1);
}
|
Good Code
|
1
2
3
4
5
6
7
|
function
someFun(opt) {
let { opt1, opt2 } = opt;
console.log(`$(opt1) 加上 $(opt2)`);
}
function
someFun({ opt1, opt2 }) {
console.log(opt1);
}
|
- 若函数有多个返回值时，使用对象解构，不使用数组解构，避免添加顺序的问题
Bad Code
|
1
2
3
4
5
6
|
function
anotherFun() {
const one = 1, two = 2, three = 3;
return
[one, two, three];
}
const [one, three, two] = anotherFun();
// 顺序乱了
// one = 1, two = 3, three = 2
|
Good Code
|
1
2
3
4
5
6
|
function
anotherFun() {
const one = 1, two = 2, three = 3;
return
{ one, two, three };
}
const { one, three, two } = anotherFun();
// 不用管顺序
// one = 1, two = 2, three = 3
|
- 已声明的变量不能用于解构赋值（语法错误）
// 语法错误
Bad Code
|
1
|
let a; { a } = { b: 123};
|
- 数组解构
数组元素与顺序相关
- 交换变量的值
Code
|
1
2
3
4
5
6
7
8
|
let x = 1; let y = 2;
// 不好
let temp;
temp = x;
x = y;
y = temp;
// 好
[x, y] = [y, x];
// 交换变量
|
- 将数组成员赋值给变量时，使用数组解构
Code
|
1
2
3
4
5
6
|
const arr = [1, 2, 3, 4, 5];
// 不好
const one = arr[0];
const two = arr[1];
// 好
const [one, two] = arr;
|
数组
- 将类数组(array-like)对象与可遍历对象(如Set, Map)转为真正数组
采用Array.from进行转换
Code
|
1
2
3
4
5
6
7
8
|
// 不好
function
foo() {
let args = Array.prototype.slice.call(arguments);
}
// 好
function
foo() {
let args = Array.from(arguments);
}
|
- 数组去重
结合Set结构与Array.from
使用indexOf，HashTable等形式，不够简洁清晰
|
1
2
3
4
|
// 好
function
deduplication(arr) {
return
Array.from(
new
Set(arr));
}
|
- 数组拷贝
采用数组扩展...形式
Code
|
1
2
3
4
5
6
7
8
9
|
const items = [1, 2, 3];
// 不好
const len = items.length;
let copyTemp = [];
for
(let i = 0; i < len; i++) {
copyTemp[i] = items[i];
}
// 好
let copyTemp = [...items];
|
- 将一组数值转为数组
采用Array.of进行转换
|
1
2
3
4
5
6
|
// 不好
let arr1 =
new
Array(2);
// [undefined x 2]
let arr2 =
new
Array(1, 2, 3);
// [1, 2, 3]
// 好
let arr1 = Array.of(2);
// [2]
let arr2 = Array.of(1, 2, 3);
// [1, 2, 3]
|
函数
- 当要用函数表达式或匿名函数时，使用箭头函数(Arrow Functions)
箭头函数更加简洁，并且绑定了this
|
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
34
35
36
37
|
// 不好
const foo =
function
(x) {
console.log(foo.name);
// 返回'' ，函数表达式默认省略name属性
};
[1, 2, 3].map(
function
(x) {
return
x + 1;
});
var
testObj = {
name:
'testObj'
,
init() {
var
_this =
this
;
// 保存定义时的this引用
document.addEventListener(
'click'
,
function
() {
return
_this.doSth();
},
false
);
},
doSth() {
console.log(
this
.name);
}
};
// 好
const foo = (x) => {
console.log(foo.name);
// 返回'foo'
};
[1, 2, 3].map( (x) => {
return
x + 1;
});
var
testObj = {
name:
'testObj'
,
init() {
// 箭头函数自动绑定定义时所在的对象
document.addEventListener(
'click'
, () =>
this
.doSth(),
false
);
},
doSth() {
console.log(
this
.name);
}
};
|
- 箭头函数书写约定
函数体只有单行语句时，允许写在同一行并去除花括号
当函数只有一个参数时，允许去除参数外层的括号
|
1
2
3
4
5
6
|
// 好
const foo = x => x + x;
// 注意此处会隐性return x + x
const foo = (x) => {
return
x + x;
// 若函数体有花括号语句块时须进行显性的return
};
[1, 2, 3].map( x => x * x);
|
- 用箭头函数返回一个对象，应用括号包裹
|
1
2
3
4
|
// 不好
let test = x => { x: x };
// 花括号会变成语句块，不表示对象
// 好
let test = x => ({ x: x });
// 使用括号可正确return {x:x}
|
l 立即调用函数 IIFE
|
1
2
3
4
5
6
7
8
|
// 不好
function
foo(opts) {
opts = opts || {};
// 此处有将0，''等假值转换掉为默认值的副作用
}
// 好
function
foo(opts = {}) {
console.log(
'更加简洁，安全'
);
}
|
- 对象中的函数方法使用缩写形式
更加简洁
函数方法不要使用箭头函数，避免this指向的混乱
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// 不好
const shopObj = {
des:
'对象模块写法'
,
foo:
function
() {
console.log(
this
.des);
}
};
const shopObj = {
des:
'对象模块写法'
,
foo: () => {
console.log(
this
.des);
// 此处会变成undefined.des，因为指向顶层模块的this
}
};
// 好
const des =
'对象模块写法'
;
// 使用对象属性值简写方式
const shopObj = {
des,
foo() {
console.log(
this
.des);
}
};
|
类
- 类名应使用帕斯卡写法(PascalCased)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// 好
class SomeClass {
}
l 类名与花括号须保留一个空格间距
// 不好
class Foo{
constructor(){
// constructor
}
sayHi()
{
// 仅保留一个空格间距
}
}
// 好
class Foo {
constructor() {
// constructor
}
sayHi() {
// 仅保留一个空格间距
}
}
|
- 定义类时，方法的顺序如下：
-
- constructor
- public get/set 公用访问器，set只能传一个参数
- public methods 公用方法，公用相关命名使用小驼峰式写法(lowerCamelCase)
- private get/set 私有访问器，私有相关命名应加上下划线 _ 为前缀
- private methods 私有方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
// 好
class SomeClass {
constructor() {
// constructor
}
get aval() {
// public getter
}
set aval(val) {
// public setter
}
doSth() {
// 公用方法
}
get _aval() {
// private getter
}
set _aval() {
// private setter
}
_doSth() {
// 私有方法
}
}
|
- 如果不是class类，不使用new
|
1
2
3
4
5
6
7
8
|
// 不好
function
Foo() {
}
const foo =
new
Foo();
// 好
class Foo {
}
const foo =
new
Foo();
|
- 使用真正意思上的类Class写法，不使用prototype进行模拟扩展
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
Class更加简洁，易维护
// 不好
function
Dog(names = []) {
this
._names = [...names];
}
Dog.prototype.bark =
function
() {
const currName =
this
._names[0];
alert(`one one ${currName}`);
}
// 好
class Dog {
constructor(names = []) {
this
._names = [...names];
}
bark() {
const currName =
this
._names[0];
alert(`one one ${currName}`);
}
}
|
- this的注意事项
子类使用super关键字时，this应在调用super之后才能使用
可在方法中return this来实现链式调用写法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
class Foo {
constructor(x, y) {
this
.x = x;
this
.y = y;
}
}
// 不好
class SubFoo extends Foo {
constructor(x, y, z) {
this
.z = z;
// 引用错误
super
(x, y);
}
}
// 好
class SubFoo extends Foo {
constructor(x, y, z) {
super
(x, y);
this
.z = z;
// this 放在 super 后调用
}
setHeight(height) {
this
.height = height;
return
this
;
}
}
|
模块
- 使用import / export来做模块加载导出，不使用非标准模块写法
跟着标准走的人，运气总不会太差
|
1
2
3
4
5
6
|
// 不好
const colors = require(
'./colors'
);
module.exports = color.lightRed;
// 好
import { lightRed } from
'./colors'
;
export
default
lightRed;
|
- import / export 后面采用花括号{ }引入模块的写法时，须在花括号内左右各保留一个空格
|
1
2
3
4
5
|
// 不好
import {lightRed} from
'./colors'
;
import { lightRed} from
'./colors'
;
// 好
import { lightRed } from
'./colors'
;
|
153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
