英文 | https://javascript.plainenglish.io/4-key-principles-to-writing-readable-and-efficient-javascript-code-1d022b685b3f
JavaScript 是一種非常靈活的程式設計語言,您可以通過多種不同的方式實作您的需求。但是遵循一些原則和技巧可以使您的代碼更具可讀性和效率。
1、以強類型語言的風格編寫代碼
JavaScript 是一種弱類型程式設計語言,其中變量在文法上可以具有不同類型的值。但是為了提高編譯性能并使您的代碼更容易被其他程式員閱讀,建議您以強類型風格編寫代碼。
1)、定義變量時應指定資料類型
錯誤代碼:
上述代碼中的變量缺少類型資訊,導緻其他程式員難以了解代碼或 JavaScript 解釋器無法優化。
好代碼:
2)、不要随意改變變量的類型
錯誤代碼:
earning開始是一個整數,然後變成一個字元串。如果其他人需要閱讀或修改這段代碼,他或她必然會對代碼産生懷疑,甚至會寫出錯誤的代碼。
同時,像 V8 這樣的引擎中的 JavaScript 代碼被轉換為位元組碼然後執行,位元組碼中的資料類型是确定的。如果我們在 JavaScript 代碼中更改變量的資料類型,編譯器必須做一些額外的處理,這會降低程式的性能。
好代碼:
當你需要轉換一個值的類型時,使用一個新的變量。
3)、函數的傳回類型應該是固定的
錯誤代碼:
此函數可能傳回整數或字元串。盡管這符合 JavaScript 文法,但調用函數的人很難直接使用 getPrice() 的結果進行算術運算。
好代碼:
我們可以在函數注釋中同意傳回 -1 表示參數無效,這允許調用者以統一的方式處理函數的結果。
2、減少不必要的範圍查找
JavaScript 支援嵌套作用域和作用域鍊,這使我們能夠編寫高效的代碼。但是錯誤地使用這些文法會弄亂代碼。
1)、如果沒有必要,不要将你的代碼暴露在全局範圍内
錯誤代碼:
首先,script标簽中的所有變量都在全局範圍内,不同的script标簽中的代碼可能是由不同的程式員開發的,可能會造成命名沖突。
其次,上面第二行代碼,在使用元素變量的時候,在全局範圍内尋找元素變量,降低了程式的性能。
好代碼:
這樣,我們使用閉包來隐藏元素變量,這樣不會污染全局作用域,在局部作用域中查找變量也更快。
當然,如果您确定将在其他地方使用元素變量,您仍然應該在全局範圍内公開它。
2)、不要濫用閉包
JavaScript 通過作用域鍊查找變量,如果在目前作用域中找不到變量,JavaScript 引擎會在目前作用域的父作用域中查找,然後逐級查找全局作用域。是以閉包嵌套得越深,變量查找所需的時間就越長。
錯誤代碼:
在 process 函數内部使用了上一級作用域變量 count,這使得 JavaScript 引擎在調用 process 函數時查找 count 變量更加耗時。
同時,如果作用域嵌套多層,process和count之間有幾十行代碼,在讀取process函數時很容易混淆count變量。
更好的方法是将計數作為參數傳遞給處理。
好代碼:
3、使用ES6特性簡化代碼
ES6 已經存在多年,現在非常相容,我們應該積極擁抱 ES6,讓代碼更加簡潔優雅。
1)、使用箭頭函數代替普通函數作為回調函數
如果您不需要考慮此綁定,最好使用箭頭函數而不是普通函數作為回調。
錯誤代碼:
好代碼:
2)、使用類
使用傳統的原型文法會将構造函數代碼與原型方法代碼分離,無法有效組織代碼。
錯誤代碼:
使用類使代碼更簡單、更容易了解,而使用類還可以輕松實作繼承的靜态成員函數。
好代碼:
3)、使用模闆字元串
模闆字元串用反引号 (` `) 字元而不是雙引号或單引号括起來。
錯誤代碼:
在模闆字元串中,我們可以使用任何字元而不是轉義字元,如 \n。
同時,我們可以直接使用表達式 ${} 來插入變量,而不是拆分字元串并使用 + 來連接配接。
好代碼:
這顯然更容易閱讀。
4)、使用預設參數
在 ES5 中,如果我們想給函數的參數一個預設值,我們可以這樣寫:
在 ES6 中,我們可以用一種更簡單、更易讀的方式編寫:
5)、使用塊範圍變量
如果我們希望控制台以 100 毫秒的間隔列印出 0、1、2、…10,反過來,有些人可能會編寫如下代碼:
for(var index = 0; index <= 10; index++){
setTimeout(() => console.log(index), 100)
}
不幸的是,上面的代碼不能滿足要求。因為 var 聲明的變量是在全局範圍内,是以當 setTimeout 回調函數執行時,index 的值已經變成了 11。
ES5 中的一種解決方案是使用閉包:
for(var index = 0; index <= 10; index++){
(function(archivedIndex){
setTimeout(() => console.log(archivedIndex), 100)
})(index)
}
這裡我們通過閉包儲存索引值,這樣每次執行setTimeout都會找到正确的索引值。
但是上面的寫法很麻煩,很難看懂,更好的方法是使用 let 聲明塊範圍的變量。
for(let index = 0; index <= 10; index++){
setTimeout(() => console.log(index), 100)
}
隻需更改三個字元即可完成要求,非常簡單、友善、易讀。
4、文法風格
1)、用三元運算符替換簡單的 if-else
一般來說,三元運算符的文法如下:
condition ? expression_1 : expression_2;
條件是一個表達式,計算結果為布爾值,真或假。如果條件為真,則三元運算符傳回表達式_1,否則傳回表達式_2。
錯誤代碼:
好的代碼:
2)、避免==
== 有很多特殊的機制,過多地使用 == 會使我們的代碼更難了解。我們可以顯式轉換資料類型以使代碼更易于了解。
錯誤代碼:
好的代碼:
總結
以上就是我與你分享的4個關于編寫JavaScript代碼的關鍵原則,希望這些内容對你有所幫助,如果你覺得我今天分享的内容有用的話,請記得點贊我,關注我,并将其分享給你身邊做開發的朋友,也許能夠幫助到他。
最後,感謝你的閱讀,祝程式設計愉快!
學習更多技能
請點選下方公衆号