十個編寫更簡潔的 JavaScript 代碼的技巧
近年來，隨著許多框架的推出，涵蓋了從后端、Web前端到跨平臺移動應用程序，甚至游戲的方方面面，Javascript 的流行度達到了很高的水平。
編寫干凈可讀的代碼是構建業務邏輯之后最重要的事情之一。根據我與多個組織、初創公司和項目合作的經驗，我可以保證處理糟糕的代碼是一場噩夢。它減慢了開發過程，延遲了發布，并使用它的開發人員感到沮喪。
因此，我們需要編寫一些干凈可讀的代碼，在今天的內容中，我將與你分享一些我編程干凈代碼的基本技巧，希望對你有所幫助。現在我們開始吧。
1. 變量名——保持它們的意義
你的變量名稱應該能夠清楚地解釋其用途。此外，避免混淆首字母縮寫詞和難以發音的單詞。我不知道我該如何強調這一點， 讓我們看看下面的例子：
// Bad
const yyyymmdstr = moment().format("YYYY/MM/DD");
// Good
const currentDate = moment().format("YYYY/MM/DD");
2. 變量名——保持可搜索
盡管有些文章會告訴你在可以使用單態形式時不要創建變量，但不應將其擴展為使用常量，這會使代碼更難閱讀和搜索。 此外，正確的做法是將它們存儲在 const 變量中并使用 CONSTANT_CASE 來命名變量。
例如，查看以下代碼段：
// What the heck is 86400000 for?
setTimeout(blastOff, 86400000);
// Declare them as capitalized named constants.
const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000;
setTimeout(blastOff, MILLISECONDS_PER_DAY);
3. 避免對變量進行心理映射
最好在 array.forEach() 中顯式命名變量，而不是使用以后可能沒有意義的簡寫。
// BAD
const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(l => {
doStuff();
doSomeOtherStuff();
// ...
// ...
// ...
// Wait, what is `l` for again?
dispatch(l);
});
// GOOD
const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(location => {
doStuff();
doSomeOtherStuff();
// ...
// ...
// ...
dispatch(location);
});
4. 避免不必要的上下文
如果類或對象名稱已經告訴你它代表什么，請不要再次將該信息添加到你的變量名稱中。 在下面的示例中，由于我們已經知道，我們談論的是 Car 或 paintCar，因此你無需在變量中再次提及上下文的Car。
// BAD
const Car = {
carMake: "Honda",
carModel: "Accord",
carColor: "Blue"
};
function paintCar(car, color) {
car.carColor = color;
}
// GOOD
const Car = {
make: "Honda",
model: "Accord",
color: "Blue"
};
function paintCar(car, color) {
car.color = color;
}
5. 在你的函數中使用默認參數
避免在你的函數中使用短路或條件來保持更清潔。 更重要的是，請記住，你的函數只會為未定義的參數提供值， 默認值不會替換任何其他虛假值。
// BAD
function createMicrobrewery(name) {
const breweryName = name || "Hipster Brew Co.";
// ...
}
// GOOD
function createMicrobrewery(name = "Hipster Brew Co.") {
// ...
}
6. 明智地使用函數參數
根據經驗，盡量將函數參數的數量限制在 2 個或最多 3 個。如果它需要這么多參數，則可能是你的函數做的太多了。 但是，如果仍然需要它，請使用 JavaScript 對象作為參數。 為了使函數期望的屬性變得明顯，可以使用 ES6 解構語法。
// BAD
function createMenu(title, body, buttonText, cancellable) {
// ...
}
createMenu("Foo", "Bar", "Baz", true);
// GOOD
function createMenu({ title, body, buttonText, cancellable }) {
// ...
}
createMenu({
title: "Foo",
body: "Bar",
buttonText: "Baz",
cancellable: true
});
7. 函數應該做一件事
不要忘記函數的作用——為你的代碼添加模塊化。 每個只執行一項任務的較小函數將確保你的代碼易于編寫、測試和理解。 永遠不要為單個功能設置多個目標。
// BAD
function emailClients(clients) {
clients.forEach(client => {
const clientRecord = database.lookup(client);
if (clientRecord.isActive()) {
email(client);
}
});
}
// GOOD
function emailActiveClients(clients) {
clients.filter(isActiveClient).forEach(email);
}
function isActiveClient(client) {
const clientRecord = database.lookup(client);
return clientRecord.isActive();
}
8. 函數名——讓它們有意義
確保編寫函數的名稱清楚地說明函數的作用。 模棱兩可的函數名稱意味著讀者必須查看函數定義和邏輯才能理解他們的工作。
// BAD
function addToDate(date, month) {
// ...
}
const date = new Date();
// It's hard to tell from the function name what is added
addToDate(date, 1);
// GOOD
function addMonthToDate(month, date) {
// ...
}
const date = new Date();
addMonthToDate(1, date);
9. 避免重復代碼——讓代碼更短更簡潔
最痛苦的是多個代碼部分中的一堆相同或相似的行。 我們都遇到過這樣的場景。 這通常是因為某些邏輯在 2 個或更多地方的實現略有不同。 但是，想想如果有人在邏輯中發現錯誤會做的噩夢的，現在他們必須到處修改它。
10. 不要使用標志作為函數參數
為什么需要標志作為函數參數？ 僅出于一個明顯的原因，你的功能正在做多種事情。 從第 7 點開始，你就知道這是一種不好的做法。 所以，繼續把你的功能一分為二。
// BAD
function createFile(name, temp) {
if (temp) {
fs.create(`./temp/${name}`);
} else {
fs.create(name);
}
}
// GOOD
function createFile(name) {
fs.create(name);
}
function createTempFile(name) {
createFile(`./temp/${name}`);
}
總結
以上就是我跟你分享的關于我編寫干凈代碼的基本技巧，希望這10個基本技巧可以幫助到你，如果你覺得有用的話，請記得點贊我，關注我，并將其分享給你的朋友，也許能夠幫助到他。
