五個(gè)JavaScript代碼優(yōu)化優(yōu)秀實(shí)踐
1.規(guī)范變量和函數(shù)的命名
首先，應(yīng)該制定變量、函數(shù)和其他代碼結(jié)構(gòu)的命名約定。這不僅與代碼可讀性有關(guān)，而且還極大地影響代碼的調(diào)試效率。
建議對(duì)變量和函數(shù)使用駝峰大小寫（例如，myVariableName）和類的Pascal大小寫（例如，MyClassName）。
// ? 隨意的變量名:
let a = 'John';
let fn = () => console.log('Hello');
// ? 駝峰變量名:
let firstName = 'John';
let sayHello = () => console.log('Hello');2.使用速記技術(shù)注意事項(xiàng)
雖然速記技術(shù)使我們編寫代碼更快、更整潔，但一定要注意正確使用，因?yàn)樗鼈兏喍蹋枰_發(fā)者清晰理解邏輯，否則可能會(huì)產(chǎn)生意想不到的結(jié)果。為了避免這種不可預(yù)見的結(jié)果，有必要查閱文檔，研究相關(guān)的JavaScript代碼示例，并進(jìn)行完整測(cè)試。
// ? 傳統(tǒng)的函數(shù)定義:
function square1 (num) {
return num * num
}
// ? 使用速記技術(shù):
const square2 = num => num * num
// ? 大代碼段:
let x
if (y) {
x = y
} else {
x = 'default'
}
// ? 更簡潔的代碼:
let x = y || 'default'3.遵循SoC原則
為了代碼的簡潔，建議避免使用style直接修改樣式。這個(gè)原則被稱為關(guān)注點(diǎn)分離（SoC），建議使用classList API添加或刪除類，同時(shí)使用CSS定義樣式規(guī)則。
通過遵循這種方法，CSS負(fù)責(zé)樣式化任務(wù)，而JavaScript專注于處理應(yīng)用程序中的其他功能。SoC的概念其實(shí)已經(jīng)擴(kuò)展到JavaScript之外的場(chǎng)合，并被作為一種最佳實(shí)踐來隔離功能，防止不同技術(shù)之間的混合使用。
在javascript處理CSS相關(guān)的任務(wù)時(shí)，應(yīng)該避免Style直接修改樣式模式。
// ? 避免操作styling:
let element = document.getElementById('my-element')
element.style.color = 'red'
// ? 使用classList操作樣式:
let element = document.getElementById('my-element')
element.classList.add('my-class')4.理解類的提升
在JavaScript中，如果類提升使用就需要在調(diào)用類之前聲明它。這一點(diǎn)與函數(shù)不一樣。在使用JavaScript中的類時(shí)，應(yīng)該理解并遵循這一基本原則。
// ? 錯(cuò)誤：定義類之前就調(diào)用類:
const hat = new Hat('Red', 1000)
hat.show()
class Hat {
constructor (color, price) {
this.color = color
this.price = price
}
show () {
console.log(`This ${this.color} hat costs $${this.price}`)
}
}
// ? 正確：在定義之后調(diào)用類:
class Hat {
constructor (color, price) {
this.color = color
this.price = price
}
show () {
console.log(`This ${this.color} hat costs $${this.price}`)
}
}
const hat = new Hat('Red', 1000)5.避免代碼中的過度嵌套
過度嵌套代碼既不專業(yè)又導(dǎo)致代碼非?；靵y。例如在try-catch塊中進(jìn)行if-else語句，if-else語句中又嵌套一個(gè)for循環(huán)，等等。結(jié)果，代碼變得混亂，使得理解或錯(cuò)誤定位變得十分困難。調(diào)試這樣的代碼猶如小貓解毛線。為避免過多的嵌套，實(shí)現(xiàn)更干凈、更有組織的代碼結(jié)構(gòu)至關(guān)重要。
// ? 過度嵌套
function checkNumber (num) {
if (num > 0) {
console.log('Number is positive.')
} else {
if (num < 0) {
console.log('Number is negative.')
} else {
console.log('Number is zero.')
}
}
}
// ? 使用return 替代else
function checkNumber (num) {
if (num > 0) {
console.log('Number is positive.')
return
}
if (num < 0) {
console.log('Number is negative.')
return
}
console.log('Number is zero.')
}
