首页 >web前端 >js教程 >如何让你的JS代码更好看易读_基础知识

如何让你的JS代码更好看易读_基础知识

韦小宝
韦小宝原创
2017-12-04 13:53:441386浏览

本篇主要给广大JS程序员介绍了怎么能让自己写的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 === &#39;hello&#39; ? <di>world</p> : null

// good
const a = this.props.prop_a === &#39;hello&#39;
 ? <di>world</p>
 : null


以上就是本篇文章的所有内容了,希望对刚入门js的同学有所帮助吧。

相关推荐:

Web 前端代码规范

JavaScript代码规范和性能整理

Javascript编码规范 PHP 代码规范小结

以上是如何让你的JS代码更好看易读_基础知识的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn