• 那些写的很糟糕的JavaScript代码都是长什么样的?
  • 发布于 2个月前
  • 316 热度
    0 评论
在我这几年的工作生涯中,我写过很多烂代码,对此我深有体会。我的同事们一直认为我的代码是臭代码,但我认为他们不欣赏我的艺术,所以,今天我把自己之前踩过的坑,总结了一下,也希望可以帮助你避免这些糟糕的操作。

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)
}
或许我们应该向用户提供一条友好的警告消息,告诉他发生了错误。
// 堆代码 duidaima.com
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习惯,也记得及时纠正,同时,也欢迎你把自己踩过的坑,在留言区跟我们大家分享一下,以帮助更多的人避免这些坑,我们一起学习进步。
用户评论