快捷導(dǎo)航

如何讓你的JS代碼更好看易讀

更新時(shí)間：2017年12月01日 16:45:12 投稿：laozhang

本篇主要給廣大JS程序員介紹了怎么能讓自己寫的JS代碼好看易讀，分析了幾個(gè)需要注意的地方和方法，一起來學(xué)習(xí)下。

作為JS程序員，自己寫的代碼如果好看易讀，不只是自己看起來好看，在別的程序員接手以后，也會(huì)是交接工作異常順利。

不要在代碼中留大段注釋掉的代碼

留給git去管理，不然你要git干嘛

// bad

// function add() {
// const a = b + c
// return a
// }

function add() {
 return a + 1000
}

// good
function add() {
 return a + 1000
}

適當(dāng)?shù)負(fù)Q行

// 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'
}

適當(dāng)?shù)奶砑幼⑨專灰偪竦奶砑幼⑨?br />

對一段代碼或者一行特別需要注意的代碼注釋

不要瘋狂的注釋，太啰嗦，漂亮的代碼自己會(huì)說話

// 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中函數(shù)是一等公民

但是，如果省略到影響可讀性了，就是失敗的

在可讀性和簡潔性至今必須選一個(gè)的話，永遠(yuǎn)先選可讀性

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)

箭頭函數(shù)

// 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的同學(xué)一定懂)

// 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()

合理使用各種表達(dá)式

// 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'

鏈?zhǔn)秸{(diào)用寫法

// bad
fetch(url).then(res => {
 return res.json()
}).then(() => {
 // doSomething
}).catch(e => {

})

// good
fetch(url)
 .then(res => {
 return res.json()
 })
 .then(() => {
 // doSomething
 })
 .catch(e => {

 })

保持代碼是縱向發(fā)展的

發(fā)現(xiàn)那些在整個(gè)文件中特別'突出'的代碼時(shí)，應(yīng)該考慮對他們做換行處理了

// 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