十個(gè)編寫(xiě)更簡(jiǎn)潔的 JavaScript 代碼的技巧
近年來(lái)，隨著許多框架的推出，涵蓋了從后端、Web前端到跨平臺(tái)移動(dòng)應(yīng)用程序，甚至游戲的方方面面，Javascript 的流行度達(dá)到了很高的水平。
編寫(xiě)干凈可讀的代碼是構(gòu)建業(yè)務(wù)邏輯之后最重要的事情之一。根據(jù)我與多個(gè)組織、初創(chuàng)公司和項(xiàng)目合作的經(jīng)驗(yàn)，我可以保證處理糟糕的代碼是一場(chǎng)噩夢(mèng)。它減慢了開(kāi)發(fā)過(guò)程，延遲了發(fā)布，并使用它的開(kāi)發(fā)人員感到沮喪。
因此，我們需要編寫(xiě)一些干凈可讀的代碼，在今天的內(nèi)容中，我將與你分享一些我編程干凈代碼的基本技巧，希望對(duì)你有所幫助?，F(xiàn)在我們開(kāi)始吧。
1. 變量名——保持它們的意義
你的變量名稱(chēng)應(yīng)該能夠清楚地解釋其用途。此外，避免混淆首字母縮寫(xiě)詞和難以發(fā)音的單詞。我不知道我該如何強(qiáng)調(diào)這一點(diǎn)， 讓我們看看下面的例子：
// Bad
const yyyymmdstr = moment().format("YYYY/MM/DD");
// Good
const currentDate = moment().format("YYYY/MM/DD");
2. 變量名——保持可搜索
盡管有些文章會(huì)告訴你在可以使用單態(tài)形式時(shí)不要?jiǎng)?chuàng)建變量，但不應(yīng)將其擴(kuò)展為使用常量，這會(huì)使代碼更難閱讀和搜索。 此外，正確的做法是將它們存儲(chǔ)在 const 變量中并使用 CONSTANT_CASE 來(lái)命名變量。
例如，查看以下代碼段：
// 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. 避免對(duì)變量進(jìn)行心理映射
最好在 array.forEach() 中顯式命名變量，而不是使用以后可能沒(méi)有意義的簡(jiǎn)寫(xiě)。
// 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. 避免不必要的上下文
如果類(lèi)或?qū)ο竺Q(chēng)已經(jīng)告訴你它代表什么，請(qǐng)不要再次將該信息添加到你的變量名稱(chēng)中。 在下面的示例中，由于我們已經(jīng)知道，我們談?wù)摰氖?Car 或 paintCar，因此你無(wú)需在變量中再次提及上下文的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. 在你的函數(shù)中使用默認(rèn)參數(shù)
避免在你的函數(shù)中使用短路或條件來(lái)保持更清潔。 更重要的是，請(qǐng)記住，你的函數(shù)只會(huì)為未定義的參數(shù)提供值， 默認(rèn)值不會(huì)替換任何其他虛假值。
// BAD
function createMicrobrewery(name) {
const breweryName = name || "Hipster Brew Co.";
// ...
}
// GOOD
function createMicrobrewery(name = "Hipster Brew Co.") {
// ...
}
6. 明智地使用函數(shù)參數(shù)
根據(jù)經(jīng)驗(yàn)，盡量將函數(shù)參數(shù)的數(shù)量限制在 2 個(gè)或最多 3 個(gè)。如果它需要這么多參數(shù)，則可能是你的函數(shù)做的太多了。 但是，如果仍然需要它，請(qǐng)使用 JavaScript 對(duì)象作為參數(shù)。 為了使函數(shù)期望的屬性變得明顯，可以使用 ES6 解構(gòu)語(yǔ)法。
// 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. 函數(shù)應(yīng)該做一件事
不要忘記函數(shù)的作用——為你的代碼添加模塊化。 每個(gè)只執(zhí)行一項(xiàng)任務(wù)的較小函數(shù)將確保你的代碼易于編寫(xiě)、測(cè)試和理解。 永遠(yuǎn)不要為單個(gè)功能設(shè)置多個(gè)目標(biāo)。
// 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. 函數(shù)名——讓它們有意義
確保編寫(xiě)函數(shù)的名稱(chēng)清楚地說(shuō)明函數(shù)的作用。 模棱兩可的函數(shù)名稱(chēng)意味著讀者必須查看函數(shù)定義和邏輯才能理解他們的工作。
// 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. 避免重復(fù)代碼——讓代碼更短更簡(jiǎn)潔
最痛苦的是多個(gè)代碼部分中的一堆相同或相似的行。 我們都遇到過(guò)這樣的場(chǎng)景。 這通常是因?yàn)槟承┻壿嬙?2 個(gè)或更多地方的實(shí)現(xiàn)略有不同。 但是，想想如果有人在邏輯中發(fā)現(xiàn)錯(cuò)誤會(huì)做的噩夢(mèng)的，現(xiàn)在他們必須到處修改它。
10. 不要使用標(biāo)志作為函數(shù)參數(shù)
為什么需要標(biāo)志作為函數(shù)參數(shù)？ 僅出于一個(gè)明顯的原因，你的功能正在做多種事情。 從第 7 點(diǎn)開(kāi)始，你就知道這是一種不好的做法。 所以，繼續(xù)把你的功能一分為二。
// 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}`);
}
總結(jié)
以上就是我跟你分享的關(guān)于我編寫(xiě)干凈代碼的基本技巧，希望這10個(gè)基本技巧可以幫助到你，如果你覺(jué)得有用的話(huà)，請(qǐng)記得點(diǎn)贊我，關(guān)注我，并將其分享給你的朋友，也許能夠幫助到他。
