在我这几年的工作生涯中,我写过很多烂代码,对此我深有体会。
我的同事们一直认为我的代码是臭代码,但我认为他们不欣赏我的艺术,所以,今天我把自己之前踩过的坑,总结了一下,也希望可以帮助你避免这些糟糕的操作。
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 ) {
// ...
}
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 我们可以定义常量来表示它的含义,如果我们能添加清晰简洁的注释就更好了。
复制 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 )) {
// ...
}
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 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
...
})
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 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习惯,也记得及时纠正。