建站
咨詢
售后
建站咨詢
新聞中心
前言
過去我寫了很多垃圾代碼，現(xiàn)在看起來很糟糕。當(dāng)我再次看到那些代碼片段時，我什至懷疑自己是否適合做一名程序員。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比英山網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式英山網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋英山地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。
因此，今天我想跟你分享 10 個關(guān)于 JavaScript的小技巧，希望可以幫助你避免編寫我曾經(jīng)寫過的垃圾代碼。
1.Promise回調(diào)地獄
Promise 提供了一種優(yōu)雅的方式來處理 JavaScript 中的異步操作。這也是避免“回調(diào)地獄”的解決方案之一。但我不太明白這是什么意思，所以我寫了這段代碼。
我做了這些事情：
- 首先獲取用戶的基本信息。
- 按用戶信息獲取所有文章的簡要摘要。
- 通過文章簡要了解文章詳情。
//
getUserInfo()
.then((userInfo) => {
getArticles(userInfo)
.then((articles) => {
Promise.all(articles.map((article) => getArticleDetail(article)))
.then((articleDetails) => {
console.log(articleDetails)
})
})
})我在這里根本沒有利用 Promise。我們應(yīng)該像下面的代碼片段一樣處理它：
//
getUserInfo()
.then((getArticles)
.then((articles) => {
return Promise.all(articles.map((article) => getArticleDetail(article)))
})
.then((articleDetails) => {
console.log(articleDetails)
})2. 不處理錯誤消息
我經(jīng)常只寫請求成功的代碼邏輯，而忽略請求失敗的代碼邏輯。
//
const getUserInfo = async () => {
try {
const userInfo = await fetch('/api/getUserInfo')
} catch (err) {
}
}這是缺乏經(jīng)驗(yàn)的做法，我們應(yīng)該給出一個用戶友好的提示，而不是什么也不做。
//
const getUserInfo = async () => {
try {
const userInfo = await fetch('/api/getUserInfo')
} catch (err) {
Toast(err.message)
}
}3.為函數(shù)設(shè)置太多參數(shù)。
當(dāng)一個函數(shù)的參數(shù)太多時，它的可讀性就會降低，甚至讓我們不知道如何正確地傳遞參數(shù)。
舉個例子：
我們想要獲取用戶的一些基本信息，比如姓名、性別、年齡等。
//
const getUserInfo = (name, age, weight, gender, mobile , nationality, hobby, address) => {
// ...
}
getUserInfo('fatfish', 100, 2000, ...)那太糟了。如果你的同事寫出這樣的代碼，你會毆打他嗎？
事實(shí)上，當(dāng)函數(shù)參數(shù)過多時，應(yīng)該使用對象來傳遞所需的信息，這樣其可讀性和可擴(kuò)展性就會提高。
//
const getUserInfo = (options) => {
const { name, gender, age, mobile, weight, nationality, hobby, address } = options
// ...
}
getUserInfo({
name: 'fatfish',
age: 100,
weight: 2000
// ...
})4.使用幻數(shù)
小伙伴們，你們有寫過這樣的代碼嗎？很多地方用數(shù)字來進(jìn)行邏輯判斷似乎很正常。是的，這讓我很困惑 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判斷字符串的長度
大多數(shù)時候，我們使用.length，判斷字符串的長度是安全的，但是在表單輸入的情況下要小心使用。
當(dāng)我們輸入 時，nameLen 的值為 2 — 這不是很奇怪嗎？
//
是的，這是有原因的，你猜怎么著？
//
6.永遠(yuǎn)不要寫代碼注釋
我們經(jīng)常向別人抱怨：“你為什么不寫代碼注釋呢？” 但實(shí)際上，我從來沒有寫過！
//
const fn = (dpr) => {
if (dpr >= 2) {
// ...
} else {
}
}天哪，你知道“dpr”是什么意思嗎？我沒想到這意味著窗口設(shè)備PixelRatio。
//
// dpr: Please enter a value for window.devicePixelRatio
const fn = (dpr) => {
if (dpr >= 2) {
// ...
} else {
}
}7. 無意義的代碼注釋
與其寫無意義的代碼注釋，還不如不寫代碼注釋，因?yàn)樗速M(fèi)你的時間。
你不妨解釋一下“a”的含義或使用有意義的變量名稱！
//
let a = 1 // Set the value of "a" to 18. 隨機(jī)命名
過去，我常常編寫隨機(jī)命名變量的尷尬代碼片段。
//
const mw = 375朋友們，請不要向我學(xué)習(xí)。你應(yīng)該給變量一個正確且有意義的名稱。
const maxWidth = 3759. 不刪除已棄用的代碼
很多時候，我們的網(wǎng)站會不斷調(diào)整功能，有新的和廢棄的功能，但我總是擔(dān)心以后會用到它們，所以我只是注釋它們，而不是刪除它們。
其實(shí)這種擔(dān)心完全沒有必要，因?yàn)橐院笥玫目赡苄院苄?。即使以后要用到，也可以通過‘git’進(jìn)行追溯。
10. 一千多行組件代碼
我在一個組件中編寫了一千多行代碼。這太糟糕了，我們應(yīng)該將組件的功能進(jìn)一步拆分為更小的組件。
最后
以上就是我今天想與你分享的全部內(nèi)容，希望對你有用，最后，感謝你的閱讀，如果你覺得不錯的話，請記得關(guān)注我，點(diǎn)贊我，這樣你將會閱讀到更多文章內(nèi)容。
當(dāng)前題目：作為前端工程師，你應(yīng)該了解的十個JavaScript技巧
路徑分享：http://www.5511xx.com/article/dpdcjoh.html
