JS代码规范：提升代码可读性与维护性的实用技巧

引言：代码可读性的重要性

对于JavaScript开发者而言，编写美观且易读的代码不仅有助于个人阅读体验，更能确保后续接手工作的同事能够顺畅地进行交接与维护。

注释与版本管理的平衡

避免在代码中保留大段被注释掉的旧代码。

这些历史代码应交由版本控制系统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
}

在不影响代码语义的前提下，遵循“能省则省”的简化原则。

牢记JavaScript中函数作为一等公民的特性。

然而，如果过度简化导致代码可读性下降，则这种简化是失败的。

当可读性与简洁性发生冲突时，必须始终优先保证代码的可读性。


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代码美化与可读性提升指南