本篇主要給廣大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</p> : null
// good
const a = this.props.prop_a === 'hello'
? <di>world</p>
: null
登入後複製
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
JS保留一位數字後移除非數字
JS驗證輸入保留指定小數
JS使用分時函數最佳化程式碼
#
以上是如何才能讓你的JS程式碼更好看易讀（請看詳細介紹）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
