英文 | https://medium.com/nerd-for-tech/10-tips-to-write-cleaner-javascript-code-a5209b989f9f
Javascript 是最常用的程式設計語言之一，超過 97% 的網站都在使用它。近年來，随着許多架構的推出，涵蓋了從後端、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個基本技巧可以幫助到你，如果你覺得有用的話，請記得點贊我，關注我，并将其分享給你的朋友，也許能夠幫助到他。
最後，感謝你的閱讀，祝程式設計愉快！
學習更多技能
請點選下方公衆号
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)