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