資訊專欄INFORMATION COLUMN
摘要：介紹看了很多，卻沒有人教我怎么去寫一手漂亮的代碼，今天我來講講我自己寫的經驗不要在代碼中留大段注釋掉的代碼留給去管理，不然你要干嘛適當地換行適當的添加注釋，但不要瘋狂的添加注釋對一段代碼或者一行特別需要注意的代碼注釋不要瘋狂的注釋，太啰嗦，
介紹
看了很多best practice，卻沒有人教我怎么去寫一手漂亮的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" ?world
個人經驗，如有錯誤，還望指正
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90133.html
摘要：哈哈，又是我，廢話不多說，直接看代碼個人原則既然是組件化的，那么相同的代碼，我不會寫第二遍不在結構中夾雜太多邏輯遵守上一篇寫一手漂亮的的規則可讀性在我心里永遠大于性能追求極致性能場景除外對生命周期函數排序傳遞多個時注意換行利用對象展開符傳遞 哈哈，又是我，廢話不多說，直接看代碼 個人原則 既然react是組件化的，那么相同的代碼，我不會寫第二遍 不在dom結構中夾雜太多js邏輯 遵守...
摘要：返回值函數可以且應該被視為一個獨立的小程序。以下的函數是冪等的無論何時調用，其返回值都是。 與多數現代編程語言一樣，在 Python 中，函數是抽象和封裝的基本方法之一。你在開發階段或許已經寫過數百個函數，但并非每個函數都生而平等。寫出「糟糕的」函數會直接影響代碼的可讀性和可維護性。那么，什么樣的函數是「糟糕的」函數呢？更重要的是，要怎么寫出「好的」函數呢？ 簡單回顧 數學中充滿了函數...
摘要：我的書簽我的書簽謹慎導入，小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網絡封包截取工具格式化工具標注工具模擬請求類深入淺出布局你所不知道的動畫技巧與細節常用代碼黑魔法小技巧，讓你少寫不必要的，代碼更優雅一勞永 我的書簽 我的書簽（謹慎導入，小心覆蓋） 工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...
摘要：我的書簽我的書簽謹慎導入，小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網絡封包截取工具格式化工具標注工具模擬請求類深入淺出布局你所不知道的動畫技巧與細節常用代碼黑魔法小技巧，讓你少寫不必要的，代碼更優雅一勞永 我的書簽 我的書簽（謹慎導入，小心覆蓋） 工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...
閱讀 533·2023-04-26 01:39
閱讀 4485·2021-11-16 11:45
閱讀 2610·2021-09-27 13:37
閱讀 882·2021-09-01 10:50
閱讀 3579·2021-08-16 10:50
閱讀 2217·2019-08-30 15:55
閱讀 2979·2019-08-30 15:55
閱讀 2259·2019-08-30 14:07
