如何让你的JS代码更好看易读
更新时间：2017年12月01日 16:45:12 投稿：laozhang
本篇主要给广大JS程序员介绍了怎么能让自己写的JS代码好看易读，分析了几个需要注意的地方和方法，一起来学习下。
作为JS程序员，自己写的代码如果好看易读，不只是自己看起来好看，在别的程序员接手以后，也会是交接工作异常顺利。
不要在代码中留大段注释掉的代码
留给git去管理，不然你要git干嘛
// bad
// function add() {
// const a = b + c
// return a
// }
function add() {
return a + 1000
}
// good
function add() {
return a + 1000
}
适当地换行
// bad
function a() {
const {
state_a,
state_b,
state_c
} = this.state
this.setState({state_a: state_a * 2})
return 'done'
}
// good
function 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
function handleClick(arr) {
const a = 1
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中函数是一等公民
但是，如果省略到影响可读性了，就是失败的
在可读性和简洁性至今必须选一个的话，永远先选可读性
function add(a) {
return a + 1
}
function 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
}
提前对对象取值(写react的同学一定懂)
// 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 => {
})
保持代码是纵向发展的
发现那些在整个文件中特别'突出'的代码时，应该考虑对他们做换行处理了
// bad return handleClick(type, key, ref, self, source, props) // good return handleClick( type, key, ref, self, source, props ) // bad const a = this.props.prop_a === 'hello' ? <di>world</div> : null // good const a = this.props.prop_a === 'hello' ? <di>world</div> : null
相关文章
这篇文章主要介绍了JavaScript中的replace()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
JavaScript字符串对象toLowerCase方法入门实例（用于把字母转换为小写）
这篇文章主要介绍了JavaScript字符串对象toLowerCase方法入门实例,toLowerCase方法用于把字母字符串转换为小写形式,需要的朋友可以参考下2014-10-10
下面小编就为大家带来一篇JS 面向对象之继承---多种组合继承详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要介绍了JavaScript 浏览器对象模型BOM使用介绍,需要的朋友可以参考下2015-04-04
本篇文章讲述了JS同步、异步、延迟加载的方法，具有很好的参考价值，希望对大家的学习有所帮助2018-05-05
这篇文章主要介绍了JavaScript面向对象继承，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
Function.prototype.apply()与Function.prototype.call()小结
JavaScript 中，某个函数的参数数量是不固定的，因此要说适用条件的话，当你的参数是明确知道数量时，用 call，而不确定的时候，用 apply，然后把参数 push 进数组传递进去。当参数数量不确定时，函数内部也可以通过 arguments 这个数组来便利所有的参数2016-04-04
这篇文章给大家介绍几种常用的前后端数据交互方法，并给出使用建议。以提高前后端协同开发的效率。非常的详细，推荐给小伙伴们，有需要的小伙伴可以参考下。2015-04-04
JavaScript字符串对象fromCharCode方法入门实例（用于把Unicode值转换为字符串）
这篇文章主要介绍了JavaScript字符串对象fromCharCode 方法入门实例,fromCharCode用于把Unicode值转换为字符串,需要的朋友可以参考下2014-10-10
这篇文章主要介绍了使用 Next.js Cli 快速搭建和运行 Web 应用,需要的朋友可以参考下2024-04-04
最新评论