五個JavaScript代碼優化優秀實踐
作者：zone7
在JavaScript中，如果類提升使用就需要在調用類之前聲明它。這一點與函數不一樣。在使用JavaScript中的類時，應該理解并遵循這一基本原則。
1.規范變量和函數的命名
首先，應該制定變量、函數和其他代碼結構的命名約定。這不僅與代碼可讀性有關，而且還極大地影響代碼的調試效率。
建議對變量和函數使用駝峰大小寫（例如，myVariableName）和類的Pascal大小寫（例如，MyClassName）。
// ? 隨意的變量名:
let a = 'John';
let fn = () => console.log('Hello');
// ? 駝峰變量名:
let firstName = 'John';
let sayHello = () => console.log('Hello');2.使用速記技術注意事項
雖然速記技術使我們編寫代碼更快、更整潔，但一定要注意正確使用，因為它們更簡短，更需要開發者清晰理解邏輯，否則可能會產生意想不到的結果。為了避免這種不可預見的結果，有必要查閱文檔，研究相關的JavaScript代碼示例，并進行完整測試。
// ? 傳統的函數定義:
function square1 (num) {
return num * num
}
// ? 使用速記技術:
const square2 = num => num * num
// ? 大代碼段:
let x
if (y) {
x = y
} else {
x = 'default'
}
// ? 更簡潔的代碼:
let x = y || 'default'3.遵循SoC原則
為了代碼的簡潔，建議避免使用style直接修改樣式。這個原則被稱為關注點分離（SoC），建議使用classList API添加或刪除類，同時使用CSS定義樣式規則。
通過遵循這種方法，CSS負責樣式化任務，而JavaScript專注于處理應用程序中的其他功能。SoC的概念其實已經擴展到JavaScript之外的場合，并被作為一種最佳實踐來隔離功能，防止不同技術之間的混合使用。
在javascript處理CSS相關的任務時，應該避免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中，如果類提升使用就需要在調用類之前聲明它。這一點與函數不一樣。在使用JavaScript中的類時，應該理解并遵循這一基本原則。
// ? 錯誤：定義類之前就調用類:
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}`)
}
}
// ? 正確：在定義之后調用類:
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.避免代碼中的過度嵌套
過度嵌套代碼既不專業又導致代碼非常混亂。例如在try-catch塊中進行if-else語句，if-else語句中又嵌套一個for循環，等等。結果，代碼變得混亂，使得理解或錯誤定位變得十分困難。調試這樣的代碼猶如小貓解毛線。為避免過多的嵌套，實現更干凈、更有組織的代碼結構至關重要。
// ? 過度嵌套
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.')
}責任編輯：趙寧寧
來源：
andflow
