資訊專欄INFORMATION COLUMN
摘要：介紹看了很多，卻沒(méi)有人教我怎么去寫一手漂亮的代碼，今天我來(lái)講講我自己寫的經(jīng)驗(yàn)不要在代碼中留大段注釋掉的代碼留給去管理，不然你要干嘛適當(dāng)?shù)負(fù)Q行適當(dāng)?shù)奶砑幼⑨?，但不要瘋狂的添加注釋?duì)一段代碼或者一行特別需要注意的代碼注釋不要瘋狂的注釋，太啰嗦，
介紹
看了很多best practice，卻沒(méi)有人教我怎么去寫一手漂亮的js代碼，今天我來(lái)講講我自己寫js的經(jīng)驗(yàn)
不要在代碼中留大段注釋掉的代碼留給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ù)奶砑幼⑨?，但不要瘋狂的添加注?/b>
對(duì)一段代碼或者一行特別需要注意的代碼注釋
不要瘋狂的注釋，太啰嗦，漂亮的代碼自己會(huì)說(shuō)話
// 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
}
在不破壞語(yǔ)義性的情況下，"能省則省"
牢記js中函數(shù)是一等公民
但是，如果省略到影響可讀性了，就是失敗的
在可讀性和簡(jiǎn)潔性至今必須選一個(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
}
提前對(duì)對(duì)象取值(寫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)該考慮對(duì)他們做換行處理了
// 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" ?world
個(gè)人經(jīng)驗(yàn)，如有錯(cuò)誤，還望指正
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/90133.html
摘要：哈哈，又是我，廢話不多說(shuō)，直接看代碼個(gè)人原則既然是組件化的，那么相同的代碼，我不會(huì)寫第二遍不在結(jié)構(gòu)中夾雜太多邏輯遵守上一篇寫一手漂亮的的規(guī)則可讀性在我心里永遠(yuǎn)大于性能追求極致性能場(chǎng)景除外對(duì)生命周期函數(shù)排序傳遞多個(gè)時(shí)注意換行利用對(duì)象展開(kāi)符傳遞 哈哈，又是我，廢話不多說(shuō)，直接看代碼 個(gè)人原則 既然react是組件化的，那么相同的代碼，我不會(huì)寫第二遍 不在dom結(jié)構(gòu)中夾雜太多js邏輯 遵守...
摘要：返回值函數(shù)可以且應(yīng)該被視為一個(gè)獨(dú)立的小程序。以下的函數(shù)是冪等的無(wú)論何時(shí)調(diào)用，其返回值都是。 與多數(shù)現(xiàn)代編程語(yǔ)言一樣，在 Python 中，函數(shù)是抽象和封裝的基本方法之一。你在開(kāi)發(fā)階段或許已經(jīng)寫過(guò)數(shù)百個(gè)函數(shù)，但并非每個(gè)函數(shù)都生而平等。寫出「糟糕的」函數(shù)會(huì)直接影響代碼的可讀性和可維護(hù)性。那么，什么樣的函數(shù)是「糟糕的」函數(shù)呢？更重要的是，要怎么寫出「好的」函數(shù)呢？ 簡(jiǎn)單回顧 數(shù)學(xué)中充滿了函數(shù)...
摘要：我的書簽我的書簽謹(jǐn)慎導(dǎo)入，小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網(wǎng)絡(luò)封包截取工具格式化工具標(biāo)注工具模擬請(qǐng)求類深入淺出布局你所不知道的動(dòng)畫技巧與細(xì)節(jié)常用代碼黑魔法小技巧，讓你少寫不必要的，代碼更優(yōu)雅一勞永 我的書簽 我的書簽（謹(jǐn)慎導(dǎo)入，小心覆蓋） 工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...
摘要：我的書簽我的書簽謹(jǐn)慎導(dǎo)入，小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網(wǎng)絡(luò)封包截取工具格式化工具標(biāo)注工具模擬請(qǐng)求類深入淺出布局你所不知道的動(dòng)畫技巧與細(xì)節(jié)常用代碼黑魔法小技巧，讓你少寫不必要的，代碼更優(yōu)雅一勞永 我的書簽 我的書簽（謹(jǐn)慎導(dǎo)入，小心覆蓋） 工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...
閱讀 609·2023-04-26 01:39
閱讀 4731·2021-11-16 11:45
閱讀 2688·2021-09-27 13:37
閱讀 968·2021-09-01 10:50
閱讀 3713·2021-08-16 10:50
閱讀 2287·2019-08-30 15:55
閱讀 3070·2019-08-30 15:55
閱讀 2325·2019-08-30 14:07
