如何讓你的JS程式碼更好看易讀_基礎知識

本篇主要給廣大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中文網其他相關文章！