简介
看了很多的best practice，却没人教我怎么去写一手beautiful 的 JavaScript。
装逼5分钟挨打2小时
示例
不要在代码中留大段注释掉的代码
// bad
//add = () => {
// const a = b + c
// return a
// }
add = () => {
return a + 1000
}
// good
add = () => {
return a + 1000
}
适当地换行
// bad
a = () => {
const {
state_a,
state_b,
state_c
} = this.state
this.setState({state_a: state_a * 2})
return 'done'
}
// good
a = () => {
const {
state_a,
state_b,
state_c
} = this.state
this.setState({state_a: state_a * 2})
return 'done'
}
适当的添加注释，但不要添加太多注释
// bad
const a = 'a' // 这是a
const b = 'b' // 这是b
const c = 'c' // 这是c
// good
/**
* 申明变量
*/
const a = 'a'
const b = 'b'
const c = 'c'
将类似行为、命名的代码最好是归类在一起
// bad
handleClick = (arr) => {
const a = 1
arr.map(e => e + a)
const b = 2
return arr.length + b
}
// good
handleClick = (arr) => {
const a = 1
const b = 2
arr.map(e => e + a)
return arr.length + b
}
在不破坏语义性的情况下，'能省则省'
add = (a) => {
return a + 1
}
doSomething = () => {
}
// bad
arr.map(a => {
return add(a)
})
setTimeout(() => {
doSomething()
}, 1000)
// good
arr.map(add)
setTimeout(doSomething, 1000)
// bad
const a = (v) => {
return v + 1
}
// good
const a = v => v + 1
// bad
const b = (v, i) => {
return {
v,
i
}
}
// good
const b = (v, i) => ({v, i})
// bad
const c = () => {
return (dispatch) => {
// doSomething
}
}
// good
const c = () => dispatch => {
// doSomething
}
// bad
const a = this.props.prop_a + this.props.prop_b
this.props.fun()
// good
const {
prop_a,
prop_b,
fun
} = this.props
const a = prop_a + prop_b
fun()
合理使用各种表达式
// bad
if (cb) {
cb()
}
// good
cb && cb()
// bad
if (a) {
return b
} else {
return c
}
// good
return a ? b : c
// bad
if (a) {
c = a
} else {
c = 'default'
}
// good
c = a || 'default'
链式调用写法
// bad
fetch(url).then(res => {
return res.json()
}).then(() => {
// doSomething
}).catch(e => {
})
// good
fetch(url)
.then(res => {
return res.json()
})
.then(() => {
// doSomething
})
.catch(e => {
})
欢迎指教🙂
