在我這幾年的工作生涯中，我寫過很多爛代碼，對(duì)此我深有體會(huì)。
我的同事們一直認(rèn)為我的代碼是臭代碼，但我認(rèn)為他們不欣賞我的藝術(shù)，所以，今天我把自己之前踩過的坑，總結(jié)了一下，也希望可以幫助你避免這些糟糕的操作。
1.代碼盡量寫在一行
哦，我的天??！你愿意我做你的同事嗎？
我只用一行代碼就清除了一個(gè)網(wǎng)頁(yè)的所有cookies，是不是很牛逼？
document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`))哦！請(qǐng)?jiān)徫?！沒有一點(diǎn)可讀性可言，我頭疼，也許我應(yīng)該這樣做。
const cookies = document.cookie.split(';')
cookies.forEach(cookie => {
cookie = cookie.replace(/^ +/, '') //
cookie = cookie.replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`)
document.cookie = cookie
})2.在控制臺(tái)打印錯(cuò)誤
你有這種編碼習(xí)慣嗎？只關(guān)注請(qǐng)求的成功狀態(tài)，忽略失敗的請(qǐng)求。
出于調(diào)試目的，我總是在控制臺(tái)上打印錯(cuò)誤消息。
try {
fetch(url, {
method: 'post',
...
})
} catch (err) {
// When the request goes wrong, we don't have any perception
console.log(err)
}或許我們應(yīng)該向用戶提供一條友好的警告消息，告訴他發(fā)生了錯(cuò)誤。
try {
fetch(url, {
method: 'post',
...
})
} catch (err) {
Toast(err.message)
}3.使用神奇的數(shù)字
我猜你已經(jīng)多次看到這個(gè)神奇的數(shù)字，它的真正含義是什么？
或許只有他的第一作者才能看得懂！
// index1.js
if (status === 1 || status === 2) {
// ...
} else if (status === 3) {
// ...
}
// index2.js
if (status === 1 || status === 2) {
// ...
}
我們可以定義常量來表示它的含義，如果我們能添加清晰簡(jiǎn)潔的注釋就更好了。
const STATUS = {
// It is an adult and has real-name authentication
adultRealName: 1,
// It is a minor and has real-name authentication
minorRealName: 2,
// Not real-name authentication
notRealName: 3,
// ...
}
// index1.js
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
// ...
} else if (status === STATUS.notRealName) {
// ...
}
// index2.js
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
// ...
}4. 濫用回調(diào)函數(shù)
現(xiàn)在是 2023 年了，我們不應(yīng)該再濫用回調(diào)了，那太可怕了。
那看起來我們是一個(gè)非常初級(jí)的前端開發(fā)工程師。
fetch('/a')
.then((a) => {
fetch('/b', { a })
.then((b) => {
fetch('/c', { b })
.then((c) => {
console.log(c)
})
})
})JavaScript 為我們提供了 await 關(guān)鍵字，所以讓我們簡(jiǎn)化上面的代碼。
const a = await fetch('/a')
const b = await fetch('/b', { a })
const c = await fetch('/c', { b })
console.log(c)哇，它使我們的代碼更簡(jiǎn)單，具有更好的可讀性和可維護(hù)性。
5.給函數(shù)設(shè)置10個(gè)參數(shù)
這可能有點(diǎn)夸張，好吧，我想表達(dá)的是，如果一個(gè)函數(shù)被設(shè)計(jì)成傳遞很多參數(shù)，那么它的可讀性就會(huì)變差，甚至?xí)屛覀儾磺宄绾问褂盟?/p>
比如這個(gè)例子，我就暈了，不知道怎么給它傳遞正確的值。
const getUser = (name, weight, mobile, gender, address, hobby, ...) => {
// ...
return ...
}
getUser('fatfish', 100, 183, ....)我們必須嘗試重新發(fā)明 getUser，是的，使用一個(gè)對(duì)象來傳遞它需要的信息會(huì)讓你看起來像一個(gè)專家。
const getUser = (options) => {
const { name, weight, mobile, gender, address, hobby, ... } = options
// ...
return ...
}
getUser({
name: 'fatfish',
weight: 100,
mobile: 183
...
})6. 使用+號(hào)將字符串轉(zhuǎn)換為數(shù)字
僅使用 + 號(hào)將字符串轉(zhuǎn)換為數(shù)字看起來很簡(jiǎn)單。
const str = '123456'
const num = +str
console.log(num) // 123456
但是使用 Number 或 parseInt 應(yīng)該是一個(gè)更語義化和更清晰的選擇。因?yàn)閺乃麄兩砩峡梢钥闯鑫覀兊哪康氖寝D(zhuǎn)換成數(shù)字。
const str = '123456'
const num1 = Number(str)
const num3 = parseInt(str)
console.log({ num1, num2 }) // { "num1": 123456, "num2": 123456 }
7.直接修改node_modules中的代碼
哇！這一定是一件超級(jí)離譜的事情，我直接修改了node_modules中的代碼來解決第三個(gè)npm包的問題，因?yàn)樗呀?jīng)被git忽略了，所以我的電腦上只有我有那個(gè)部分。
后來項(xiàng)目移交給其他部門后，我修復(fù)的問題又出現(xiàn)了……
// .gitignore
node_modules/
dist/
// ...
寫在最后
朋友們，如果你還這些糟糕的操作，請(qǐng)及時(shí)調(diào)整過來，如果你還有一些其他不好的JavaScript習(xí)慣，也記得及時(shí)糾正。
