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