七个糟糕的个糟糕 JavaScript 代码实践，看看自己这样操作过没有？

作者：佚名 2023-03-23 15:18:03开发 前端 在我这几年的代码工作生涯中，我写过很多烂代码，实践对此我深有体会。自己作过

在我这几年的样操工作生涯中，我写过很多烂代码，个糟糕对此我深有体会。代码

我的实践同事们一直认为我的代码是臭代码，但我认为他们不欣赏我的自己作过艺术，所以，样操今天我把自己之前踩过的个糟糕坑，总结了一下，代码也希望可以帮助你避免这些糟糕的实践操作。

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习惯，也记得及时纠正。

责任编辑：华轩 来源： web前端开发 JavaScrip代码实践

(责任编辑：时尚)