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