如何讓你的JS代碼更好看易讀
作為JS程序員,自己寫的代碼如果好看易讀,不只是自己看起來好看,在別的程序員接手以后,也會是交接工作異常順利。
不要在代碼中留大段注釋掉的代碼
留給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ù)負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 />
對一段代碼或者一行特別需要注意的代碼注釋
不要瘋狂的注釋,太啰嗦,漂亮的代碼自己會說話
// 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ù)是一等公民
但是,如果省略到影響可讀性了,就是失敗的
在可讀性和簡潔性至今必須選一個的話,永遠先選可讀性
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()
合理使用各種表達式
// 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'
鏈式調(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)那些在整個文件中特別'突出'的代碼時,應(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
相關(guān)文章
JavaScript字符串對象toLowerCase方法入門實例(用于把字母轉(zhuǎn)換為小寫)
這篇文章主要介紹了JavaScript字符串對象toLowerCase方法入門實例,toLowerCase方法用于把字母字符串轉(zhuǎn)換為小寫形式,需要的朋友可以參考下2014-10-10Function.prototype.apply()與Function.prototype.call()小結(jié)
JavaScript 中,某個函數(shù)的參數(shù)數(shù)量是不固定的,因此要說適用條件的話,當(dāng)你的參數(shù)是明確知道數(shù)量時,用 call,而不確定的時候,用 apply,然后把參數(shù) push 進數(shù)組傳遞進去。當(dāng)參數(shù)數(shù)量不確定時,函數(shù)內(nèi)部也可以通過 arguments 這個數(shù)組來便利所有的參數(shù)2016-04-04JavaScript字符串對象fromCharCode方法入門實例(用于把Unicode值轉(zhuǎn)換為字符串)
這篇文章主要介紹了JavaScript字符串對象fromCharCode 方法入門實例,fromCharCode用于把Unicode值轉(zhuǎn)換為字符串,需要的朋友可以參考下2014-10-10使用?Next.js?Cli?快速搭建和運行?Web?應(yīng)用
這篇文章主要介紹了使用?Next.js?Cli?快速搭建和運行?Web?應(yīng)用,需要的朋友可以參考下2024-04-04