前言
過(guò)去，我寫(xiě)了很多垃圾代碼，現(xiàn)在，看起來(lái)很糟糕。
當(dāng)我再次看到那些代碼片段時(shí)，我甚至懷疑自己是否適合做一名程序員，但是，不管怎么樣，已經(jīng)走在編程開(kāi)發(fā)的路上了，所以不會(huì)不懂只能多學(xué)習(xí)了。
現(xiàn)在，我就把自己踩過(guò)的坑總結(jié)一下分享給你，希望對(duì)你有所幫助。
1. Promise回調(diào)地獄
Promises 提供了一種優(yōu)雅的方式來(lái)處理 JavaScript 中的異步操作。這也是避免“回調(diào)地獄”的解決方案之一。但是我并沒(méi)有真正理解它的意思，所以我寫(xiě)了這段代碼。
我做了這些事情：
- 先獲取用戶的基本信息。
- 按用戶信息獲取所有文章的簡(jiǎn)要摘要。
- 通過(guò)文章簡(jiǎn)單獲取文章詳情。
// ?
getUserInfo()
.then((userInfo) => {
getArticles(userInfo)
.then((articles) => {
Promise.all(articles.map((article) => getArticleDetail(article)))
.then((articleDetails) => {
console.log(articleDetails)
})
})
})
我在這里根本沒(méi)有利用 Promise，我們應(yīng)該像下面的代碼片段一樣處理它：
// ?
getUserInfo()
.then((getArticles)
.then((articles) => {
return Promise.all(articles.map((article) => getArticleDetail(article)))
})
.then((articleDetails) => {
console.log(articleDetails)
})
2.不處理錯(cuò)誤信息
我經(jīng)常只寫(xiě)請(qǐng)求成功的代碼邏輯，而忽略請(qǐng)求失敗的代碼邏輯。
// ?
const getUserInfo = async () => {
try {
const userInfo = await fetch('/api/getUserInfo')
} catch (err) {
}
}
這是沒(méi)有經(jīng)驗(yàn)的，我們應(yīng)該給出一個(gè)用戶友好的提示，而不是什么都不做。
// ?
const getUserInfo = async () => {
try {
const userInfo = await fetch('/api/getUserInfo')
} catch (err) {
Toast(err.message)
}
}
3. 為函數(shù)設(shè)置太多參數(shù)
當(dāng)一個(gè)函數(shù)的參數(shù)過(guò)多時(shí)，它的可讀性就會(huì)變差，甚至不知道如何正確傳遞參數(shù)。
例子
我們想獲取用戶的一些基本信息，比如姓名、性別、年齡等。
// ?
const getUserInfo = (name, age, weight, gender, mobile , nationality, hobby, address) => {
// ...
}
getUserInfo('fatfish', 100, 2000, ...)
以上這樣的代碼，那真是太糟了，如果你的同事這樣寫(xiě)代碼，你會(huì)揍他嗎？
事實(shí)上，當(dāng)函數(shù)參數(shù)過(guò)多時(shí)，應(yīng)該使用對(duì)象來(lái)傳遞需要的信息，這樣會(huì)提高其可讀性和擴(kuò)展性。
// ?
const getUserInfo = (options) => {
const { name, gender, age, mobile, weight, nationality, hobby, address } = options
// ...
}
getUserInfo({
name: 'fatfish',
age: 100,
weight: 2000
// ...
})
4.神奇的數(shù)字
小伙伴們，你們寫(xiě)過(guò)這樣的代碼嗎？很多地方用數(shù)字來(lái)做邏輯判斷似乎很正常。是的，這讓我很困惑 1、2、3 到底是什么意思。
?
// component1.js
if (status === 1 || status === 2) {
// ...
} else if (status === 3) {
// ...
}
// component2.js
if (status === 1 || status === 2) {
// ...
}
我們最好將這些數(shù)字定義為常量。
// ?
// constants.js
export 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,
// ...
}
// component1.js
import { STATUS } from './constants.js'
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
// ...
} else if (status === STATUS.notRealName) {
// ...
}
// component2.js
import { STATUS } from './constants.js'
// component2.js
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
// ...
}
5.使用.length判斷字符串長(zhǎng)度
大多數(shù)時(shí)候，我們使用 .length 來(lái)判斷字符串的長(zhǎng)度是安全的，但是在表單輸入的情況下要小心。
當(dāng)我們輸入??時(shí)，nameLen的值為2——這不奇怪嗎？
// ?
<input type="text" id="name">
<script>
const $name = document.getElementById('name')
$name.addEventListener('blur', () => {
const name = $name.value
const nameLen = name.length
// input: fatfish => nameLen: 7
// input: ?? => nameLen: 2
console.log(`name: ${name}, nameLen: ${nameLen}`)
}, false)
</script>
是的，這是有原因的，你猜怎么著？
// ?
<input type="text" id="name">
<script>
const $name = document.getElementById('name')
$name.addEventListener('blur', () => {
const name = $name.value
const nameLen = name.length
const spRegexp = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g
const nameRealLen = name.replace(spRegexp, '_').length
// input: fatfish => nameLen: 7, nameRealLen: 7
// input: ?? => nameLen: 2, nameRealLen: 1
console.log(`name: ${name}, nameLen: ${nameLen}, nameRealLen: ${nameRealLen}`)
}, false)
</script>
6. 永遠(yuǎn)不要寫(xiě)代碼注釋
我們經(jīng)常向別人抱怨，“你為什么不寫(xiě)代碼注釋？” 但實(shí)際上，我們自己也從來(lái)不寫(xiě)它！
// ?
const fn = (dpr) => {
if (dpr >= 2) {
// ...
} else {
}
}
我的天，你知道‘dpr’是什么意思嗎？沒(méi)想到是指window devicePixelRatio。
// ?
// dpr: Please enter a value for window.devicePixelRatio
const fn = (dpr) => {
if (dpr >= 2) {
// ...
} else {
}
}
7.無(wú)意義的代碼注釋
與其不寫(xiě)代碼注釋，也不要寫(xiě)無(wú)意義的代碼注釋，因?yàn)樗速M(fèi)了你的時(shí)間。
你不妨解釋一下“a”的含義或使用有意義的變量名稱！
// ?
let a = 1 // Set the value of "a" to 1
8. 隨機(jī)命名
過(guò)去，我常常編寫(xiě)隨機(jī)命名變量的笨拙代碼片段。
因此，親愛(ài)的朋友們，請(qǐng)你們不要學(xué)我，你應(yīng)該給變量一個(gè)適當(dāng)且有意義的名稱。
9. 刪除不要棄用的代碼
很多時(shí)候，我們的網(wǎng)站會(huì)不斷調(diào)整功能，有新功能也有過(guò)時(shí)的功能，但我總是擔(dān)心以后會(huì)用到，所以我們總是注釋掉，并沒(méi)有刪除。
其實(shí)這種擔(dān)心是完全沒(méi)有必要的，因?yàn)橐院笥玫降目赡苄院苄?。即使以后要用到，也可以通過(guò)‘git’來(lái)追溯。
10. 上千行組件代碼
我已經(jīng)在一個(gè)組件中編寫(xiě)了一千多行代碼。這太糟糕了，我們應(yīng)該將組件的功能進(jìn)一步拆分成更小的組件。
最后
感謝你的閱讀，以上就是我今天想要跟你分享的內(nèi)容，如果你覺(jué)得我的內(nèi)容對(duì)你有用的話，請(qǐng)點(diǎn)贊我，關(guān)注我，同時(shí)，也期待你的關(guān)注，這樣，你將會(huì)閱讀到更多編程技術(shù)相關(guān)的文章。
