作为JS程序员,自己写的代码如果好看易读,不只是自己看起来好看,在别的程序员接手以后,也会是交接工作异常顺利。
不要在代码中留大段注释掉的代码
留给git去管理,不然你要git干嘛
// const a = b + c
// return a
// }
function add() {
return a + 1000
}
// good
function add() {
return a + 1000
}
适当地换行
function a() {
const {
state_a,state_c
} = this.state
this.setState({state_a: state_a * 2})
return 'done'
}
不要疯狂的注释,太啰嗦,漂亮的代码自己会说话
/**
- 申明变量
*/
const a = 'a'
const b = 'b'
const c = 'c'
将类似行为、命名的代码归类在一起
arr.map(e => e + a)
const b = 2
return arr.length + b
}
// good
function handleClick(arr) {
const a = 1
const b = 2
arr.map(e => e + a)
return arr.length + b
}
在不破坏语义性的情况下,'能省则省'
牢记js中函数是一等公民
但是,如果省略到影响可读性了,就是失败的
在可读性和简洁性至今必须选一个的话,永远先选可读性
}
// bad
arr.map(a => {
return add(a)
})
setTimeout(() => {
doSomething()
},1000)
// good
arr.map(add)
setTimeout(doSomething,1000)
箭头函数
// 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
}
提前对对象取值(写react的同学一定懂)
// good
const {
prop_a,prop_b,fun
} = this.props
const a = prop_a + prop_b
fun()
合理使用各种表达式
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'
链式调用写法
})
// good
fetch(url)
.then(res => {
return res.json()
})
.then(() => {
// doSomething
})
.catch(e => {
})
保持代码是纵向发展的
发现那些在整个文件中特别'突出'的代码时,应该考虑对他们做换行处理了
return handleClick(
type,props
)
// bad
const a = this.props.prop_a === 'hello' ?
// good
const a = this.props.prop_a === 'hello'
?