整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
1、在使用javaScript的時(shí)候，遵循以下命名規(guī)范
2、必須以字母或下劃線開頭，中間可以是數(shù)字、字符或下劃線
，也能以 $ 和 _ 符號(hào)開頭（不過我們不推薦這么做）
3、變量名不能包含空格等符號(hào)，嚴(yán)格區(qū)分大小寫
4、不能使用javaScript關(guān)鍵字作為變量名，如：function
1、變量是用于存儲(chǔ)信息的"容器"
2、在 JavaScript 中創(chuàng)建變量通常稱為"聲明"變量
3、我們使用 var 關(guān)鍵詞來聲明變量
4、變量聲明之后，該變量是空的（它沒有值）如需向變量賦值，請使用等號(hào)
5、不過，您也可以在聲明變量時(shí)對其賦值
1、可以在一條語句中聲明很多變量。該語句以 var 開頭，并使用逗號(hào)分隔變量即可
1、如果重新聲明 JavaScript 變量，該變量的值不會(huì)丟失：
2、在以下兩條語句執(zhí)行后，變量 carname 的值依然是 "Volvo"：
文已經(jīng)原作者Shadeed 授權(quán)翻譯。
變量無處不在，即使我們在寫一個(gè)小的函數(shù)，或者一個(gè)應(yīng)用程序:我們總是先聲明，分配和使用變量。編寫好的變量可提高代碼的可讀性和易維護(hù)性。
在本文中，主要介紹 5種有關(guān)在 JavaScript 中聲明和使用變量的最佳做法。
我使用const或let聲明變量，兩者之間的主要區(qū)別是const變量需要一個(gè)初始值，并且一旦初始化就無法重新分配其值。
另一方面，let聲明不需要初始值，我們可以多次重新分配其值。
// const 需要初始化
const pi = 3.14;
// 不能重新分配const
pi = 4.89; // throws "TypeError: Assignment to constant variable"
另一方面，let聲明不需要初始值，我們可以多次重新分配其值。
// let 初始化是可選的
let result;
// let can be reassigned
result = 14;
result = result * 2;
選擇變量的聲明類型時(shí)的一個(gè)好習(xí)慣是首選const，否則使用let。
function myBigFunction(param1, param2) {
/* lots of stuff... */
const result = otherFunction(param1);
/* lots of stuff... */
return something;
}
例如，如果我們正在查看函數(shù)體，并看到const result = ...聲明：
function myBigFunction(param1, param2) {
/* lots of stuff... */
const result = otherFunction(param1);
/* lots of stuff... */
return something;
}
不知道myBigFunction()內(nèi)部會(huì)發(fā)生什么， 我們可以得出結(jié)論，result 變量只分配了一次，聲明之后是只讀的。
在其他情況下，如果必須在執(zhí)行過程中多次重新分配變量，則可以使用let聲明。
變量存在于它們所創(chuàng)建的作用域內(nèi)。代碼塊和函數(shù)體為const和let變量創(chuàng)建一個(gè)作用域。提高變量可讀性的一個(gè)好習(xí)慣是將變量保持在最小作用域內(nèi)。
例如，以下函數(shù)是二進(jìn)制搜索算法的實(shí)現(xiàn)：
function binarySearch(array, search) {
let middle;
let middleItem;
let left = 0;
let right = array.length - 1;
while(left <= right) {
middle = Math.floor((left + right) / 2);
middleItem = array[middle];
if (middleItem === search) {
return true;
}
if (middleItem < search) {
left = middle + 1;
} else {
right = middle - 1;
}
}
return false;
}
binarySearch([2, 5, 7, 9], 7); // => true
binarySearch([2, 5, 7, 9], 1); // => false
middle和middleItem變量在函數(shù)體的開頭聲明。因此，這些變量在binarySearch()函數(shù)體創(chuàng)建的整個(gè)作用域內(nèi)都是可用的。
middle變量保留二進(jìn)制搜索的中間索引，而middleItem變量保留二進(jìn)制搜索的中間索引。
但是，middle和middleItem變量只在while循環(huán)代碼塊中使用。所以為什么不直接在while代碼塊中聲明這些變量呢?
function binarySearch(array, search) {
let left = 0;
let right = array.length - 1;
while(left <= right) {
const middle = Math.floor((left + right) / 2);
const middleItem = array[middle];
if (middleItem === search) {
return true;
}
if (middleItem < search) {
left = middle + 1;
} else {
right = middle - 1;
}
}
return false;
}
現(xiàn)在，middle和middleItem變量僅存在于使用變量的作用域。他們的生命周期和生命周期極短，因此更容易推斷其作用。
我強(qiáng)烈希望在函數(shù)主體的頂部聲明所有變量，尤其是在函數(shù)較大的情況下。不幸的是，這種做法的缺點(diǎn)是使我在函數(shù)中使用的意圖變量變得混亂。
盡量在接近使用位置的地方聲明變量。這樣，我們就不用猜了:嘿，我看到了這里聲明的變量，但是它在哪里被使用了。
假設(shè)我們有一個(gè)函數(shù)，該函數(shù)的主體中包含很多語句。我們可以在函數(shù)的開頭聲明并初始化變量結(jié)果，但是只能在return語句中使用result：
function myBigFunction(param1, param2) {
const result = otherFunction(param1);
let something;
/*
* calculate something...
*/
return something + result;
}
問題在于result 變量在開頭聲明，但僅在結(jié)尾使用，沒有足夠的理由在開始時(shí)聲明該變量。
讓我們通過將result 變量聲明移到return語句之前來改進(jìn)這個(gè)函數(shù)
function myBigFunction(param1, param2) {
let something;
/*
* calculate something...
*/
const result = otherFunction(param1);
return something + result;
}
現(xiàn)在，result變量在函數(shù)中有了它的正確位置。
從良好的變量命名的眾多規(guī)則中，我區(qū)分出兩個(gè)重要的規(guī)則。
第一個(gè)很簡單：使用駝峰命名為變量取名，并且在命名所有變量時(shí)保持一致。
const message = 'Hello';
const isLoading = true;
let count
有特殊含義的數(shù)字或字符串，變量命名通常是大寫的，在單詞之間加下劃線，以區(qū)別于常規(guī)變量
const SECONDS_IN_MINUTE = 60;
const GRAPHQL_URI = 'http://site.com/graphql';
第二條規(guī)則，在變量命名中，我認(rèn)為這是最重要的：變量名稱應(yīng)明確無歧義地指出哪些數(shù)據(jù)保存了該變量。
以下是一些很好的變量命名示例：
let message = 'Hello';
let isLoading = true;
let count;
message 名稱表示此變量包含某種消息，很可能是字符串。
isLoading相同，布爾值指示加載是否在進(jìn)行中。
count變量表示保存一些計(jì)數(shù)結(jié)果的數(shù)字類型變量。
選擇一個(gè)明確表明其角色的變量名。
舉個(gè)例子，這樣就能看出區(qū)別了。假設(shè)看到了這樣一個(gè)函數(shù):
function salary(ws, r) {
let t = 0;
for (w of ws) {
t += w * r;
}
return t;
}
你能總結(jié)出這個(gè)函數(shù)的作用嗎?像ws、r、t、w這樣的變量名幾乎沒有說明它們的意圖。
相反，相同的函數(shù)，但使用了解釋性變量命名
function calculateTotalSalary(weeksHours, ratePerHour) {
let totalSalary = 0;
for (const weekHours of weeksHours) {
const weeklySalary = weekHours * ratePerHour;
totalSalary += weeklySalary;
}
return totalSalary;
}
該代碼清楚地說明了它的作用。這就是良好命名的力量。
我比較少注釋代碼。我更喜歡編寫代碼即解釋的風(fēng)格，通過對變量、屬性、函數(shù)和類的良好命名來表達(dá)意圖。
編寫自文檔代碼的一個(gè)好習(xí)慣是引入中間變量。在處理長表達(dá)式時(shí)很有用。
考慮以下表達(dá)式：
const sum = val1 * val2 + val3 / val4;
我們引入兩個(gè)中間變量，增強(qiáng)長表達(dá)式的可讀性:
const multiplication = val1 * val2;
const division = val3 / val4;
const sum = multiplication + division;
另外，讓我們回顧一下二進(jìn)制搜索實(shí)現(xiàn)算法：
function binarySearch(array, search) {
let left = 0;
let right = array.length - 1;
while(left <= right) {
const middle = Math.floor((left + right) / 2);
const middleItem = array[middle];
if (middleItem === search) {
return true;
}
if (middleItem < search) {
left = middle + 1;
} else {
right = middle - 1;
}
}
return false;
}
這里middleItem是一個(gè)保存中間項(xiàng)目的中間變量。使用中間變量MiddleItem而不是直接使用項(xiàng)目訪問器array [middle]可讀性更好。
與缺少middleItem解釋變量的函數(shù)版本進(jìn)行比較:
function binarySearch(array, search) {
let left = 0;
let right = array.length - 1;
while(left <= right) {
const middle = Math.floor((left + right) / 2);
if (array[middle] === search) {
return true;
}
if (array[middle] < search) {
left = middle + 1;
} else {
right = middle - 1;
}
}
return false;
}
這個(gè)版本，沒有解釋變量，可讀性就比較差。
變量無處不在，我們總是先聲明，分配和使用變量。
在 JS 中使用變量時(shí)，第一個(gè)好的做法是使用const，否則使用let
試著保持變量的作用域盡可能小。同樣，將變量聲明往盡可能靠近使用位置。
不要低估好的命名的重要性。始終遵循這樣的規(guī)則:變量名應(yīng)該清晰而明確地表示保存變量的數(shù)據(jù)。不要害怕使用較長的名字:最好是清晰而不是簡潔。
最后，少使用注釋，多寫寫代碼即的效果 。在高度復(fù)雜的地方，我更喜歡引入中間變量。
作者：Shadeed 譯者：前端小智 來源：dmitripavlutin
原文：https://dmitripavlutin.com/javascript-variables-practices/
者：ryanmcdermott
翻譯：前端小智
鏈接：（英文）https://github.com/ryanmcdermott/clean-code-javascript#table-of-contents
在開發(fā)中，變量名，函數(shù)名一般要做到清晰明了，盡量做到看名字就能讓人知道你的意圖，所以變量和函數(shù)命名是挺重要，今天來看看如果較優(yōu)雅的方式給變量和函數(shù)命名。
// 不好的寫法
const yyyymmdstr = moment().format("YYYY/MM/DD");
// 好的寫法
const currentDate = moment().format("YYYY/MM/DD");// 不好的寫法
getUserInfo();
getClientData();
getCustomerRecord();
// 好的寫法
getUser();我們讀的會(huì)比我們寫的多得多，所以如果命名太過隨意不僅會(huì)給后續(xù)的維護(hù)帶來困難，也會(huì)傷害了讀我們代碼的開發(fā)者。讓你的變量名可被讀取，像 buddy.js 和 ESLint 這樣的工具可以幫助識(shí)別未命名的常量。
// 不好的寫法
// 86400000 的用途是什么？
setTimeout(blastOff, 86400000);
// 好的寫法
const MILLISECONDS_IN_A_DAY = 86_400_000;
setTimeout(blastOff, MILLISECONDS_IN_A_DAY);// 不好的寫法
const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(
address.match(cityZipCodeRegex)[1],
address.match(cityZipCodeRegex)[2]
);
// 好的寫法
const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [_, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);顯式用于隱式
// 不好的寫法
const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(l => {
doStuff();
doSomeOtherStuff();
// ...
// ...
// ...
// 等等，“l(fā)”又是什么？
dispatch(l);
// 好的寫法
const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(location => {
doStuff();
doSomeOtherStuff();
// ...
// ...
// ...
dispatch(location);
});大家都說簡歷沒項(xiàng)目寫，我就幫大家找了一個(gè)項(xiàng)目，還附贈(zèng)【搭建教程】。
如果類名/對象名已經(jīng)說明了，就無需在變量名中重復(fù)。
// 不好的寫法
const Car = {
carMake: "Honda",
carModel: "Accord",
carColor: "Blue"
};
function paintCar(car) {
car.carColor = "Red";
}
// 好的寫法
const Car = {
make: "Honda",
model: "Accord",
color: "Blue"
};
function paintCar(car) {
car.color = "Red";
}
// 不好的寫法
function createMicrobrewery(name) {
const breweryName = name || "Hipster Brew Co.";
// ...
}
// 好的寫法
function createMicrobrewery(name = "Hipster Brew Co.") {
// ...
}限制函數(shù)參數(shù)的數(shù)量是非常重要的，因?yàn)樗箿y試函數(shù)變得更容易。如果有三個(gè)以上的參數(shù)，就會(huì)導(dǎo)致組合爆炸，必須用每個(gè)單獨(dú)的參數(shù)測試大量不同的情況。
一個(gè)或兩個(gè)參數(shù)是理想的情況，如果可能，應(yīng)避免三個(gè)參數(shù)。 除此之外，還應(yīng)該合并。大多數(shù)情況下，大于三個(gè)參數(shù)可以用對象來代替。
// 不好的寫法
function createMenu(title, body, buttonText, cancellable) {
// ...
}
createMenu("Foo", "Bar", "Baz", true);
// 好的寫法
function createMenu({ title, body, buttonText, cancellable }) {
// ...
}
createMenu({
title: "Foo",
body: "Bar",
buttonText: "Baz",
cancellable: true
});這是目前為止軟件工程中最重要的規(guī)則。當(dāng)函數(shù)做不止一件事時(shí)，它們就更難組合、測試和推理。可以將一個(gè)函數(shù)隔離為一個(gè)操作時(shí)，就可以很容易地重構(gòu)它，代碼也會(huì)讀起來更清晰。
// 不好的寫法
function emailClients(clients) {
clients.forEach(client => {
const clientRecord = database.lookup(client);
if (clientRecord.isActive()) {
email(client);
}
});
}
// 好的寫法
function emailActiveClients(clients) {
clients.filter(isActiveClient).forEach(email);
}
function isActiveClient(client) {
const clientRecord = database.lookup(client);
return clientRecord.isActive();
}// 不好的寫法
function addToDate(date, month) {
// ...
}
const date = new Date();
// 從函數(shù)名稱很難知道添加什么
addToDate(date, 1);
// 好的寫法
function addMonthToDate(month, date) {
// ...
}
const date = new Date();
addMonthToDate(1, date);當(dāng)有一個(gè)以上的抽象層次函數(shù)，意味該函數(shù)做得太多了，需要將函數(shù)拆分可以實(shí)現(xiàn)可重用性和更簡單的測試。
// 不好的寫法
function parseBetterJSAlternative(code) {
const REGEXES = [
// ...
];
const statements = code.split(" ");
const tokens = [];
REGEXES.forEach(REGEX => {
statements.forEach(statement => {
// ...
});
});
const ast = [];
tokens.forEach(token => {
// lex...
});
ast.forEach(node => {
// parse...
});
}
// 好的寫法
function parseBetterJSAlternative(code) {
const tokens = tokenize(code);
const syntaxTree = parse(tokens);
syntaxTree.forEach(node => {
// parse...
});
}
function tokenize(code) {
const REGEXES = [
// ...
];
const statements = code.split(" ");
const tokens = [];
REGEXES.forEach(REGEX => {
statements.forEach(statement => {
tokens.push(/* ... */);
});
});
return tokens;
}
function parse(tokens) {
const syntaxTree = [];
tokens.forEach(token => {
syntaxTree.push(/* ... */);
});
return syntaxTree;
}大家都說簡歷沒項(xiàng)目寫，我就幫大家找了一個(gè)項(xiàng)目，還附贈(zèng)【搭建教程】。
盡量避免重復(fù)的代碼，重復(fù)的代碼是不好的，它意味著如果我們需要更改某些邏輯，要改很多地方。
通常，有重復(fù)的代碼，是因?yàn)橛袃蓚€(gè)或多個(gè)稍有不同的事物，它們有很多共同點(diǎn)，但是它們之間的差異迫使我們編寫兩個(gè)或多個(gè)獨(dú)立的函數(shù)來完成許多相同的事情。 刪除重復(fù)的代碼意味著創(chuàng)建一個(gè)僅用一個(gè)函數(shù)/模塊/類就可以處理這組不同事物的抽象。
獲得正確的抽象是至關(guān)重要的，這就是為什么我們應(yīng)該遵循類部分中列出的 SOLID原則。糟糕的抽象可能比重復(fù)的代碼更糟糕，所以要小心!說了這么多，如果你能做一個(gè)好的抽象，那就去做吧!不要重復(fù)你自己，否則你會(huì)發(fā)現(xiàn)自己在任何時(shí)候想要改變一件事的時(shí)候都要更新多個(gè)地方。
設(shè)計(jì)模式的六大原則有：
把這六個(gè)原則的首字母聯(lián)合起來（兩個(gè) L 算做一個(gè)）就是 SOLID （solid，穩(wěn)定的），其代表的含義就是這六個(gè)原則結(jié)合使用的好處：建立穩(wěn)定、靈活、健壯的設(shè)計(jì)。下面我們來分別看一下這六大設(shè)計(jì)原則。
不好的寫法
function showDeveloperList(developers) {
developers.forEach(developer => {
const expectedSalary = developer.calculateExpectedSalary();
const experience = developer.getExperience();
const githubLink = developer.getGithubLink();
const data = {
expectedSalary,
experience,
githubLink
};
render(data);
});
}
function showManagerList(managers) {
managers.forEach(manager => {
const expectedSalary = manager.calculateExpectedSalary();
const experience = manager.getExperience();
const portfolio = manager.getMBAProjects();
const data = {
expectedSalary,
experience,
portfolio
};
render(data);
});
}好的寫法
function showEmployeeList(employees) {
employees.forEach(employee => {
const expectedSalary = employee.calculateExpectedSalary();
const experience = employee.getExperience();
const data = {
expectedSalary,
experience
};
switch (employee.type) {
case "manager":
data.portfolio = employee.getMBAProjects();
break;
case "developer":
data.githubLink = employee.getGithubLink();
break;
}
render(data);
});
}不好的寫法
const menuConfig = {
title: null,
body: "Bar",
buttonText: null,
cancellable: true
};
function createMenu(config) {
config.title = config.title || "Foo";
config.body = config.body || "Bar";
config.buttonText = config.buttonText || "Baz";
config.cancellable =
config.cancellable !== undefined ? config.cancellable : true;
}
createMenu(menuConfig);好的寫法
const menuConfig = {
title: "Order",
// User did not include 'body' key
buttonText: "Send",
cancellable: true
};
function createMenu(config) {
config = Object.assign(
{
title: "Foo",
body: "Bar",
buttonText: "Baz",
cancellable: true
},
config
);
// config now equals: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}
// ...
}
createMenu(menuConfig);大家都說簡歷沒項(xiàng)目寫，我就幫大家找了一個(gè)項(xiàng)目，還附贈(zèng)【搭建教程】。
標(biāo)志告訴使用者，此函數(shù)可以完成多項(xiàng)任務(wù)，函數(shù)應(yīng)該做一件事。 如果函數(shù)遵循基于布爾的不同代碼路徑，請拆分它們。
// 不好的寫法
function createFile(name, temp) {
if (temp) {
fs.create(`./temp/${name}`);
} else {
fs.create(name);
}
}
// 好的寫法
function createFile(name) {
fs.create(name);
}
function createTempFile(name) {
createFile(`./temp/${name}`);
}如果函數(shù)除了接受一個(gè)值并返回另一個(gè)值或多個(gè)值以外，不執(zhí)行任何其他操作，都會(huì)產(chǎn)生副作用。 副作用可能是寫入文件，修改某些全局變量，或者不小心將你的所有資金都匯給了陌生人。
不好的寫法
let name = "Ryan McDermott";
function splitIntoFirstAndLastName() {
name = name.split(" ");
}
splitIntoFirstAndLastName();
console.log(name); // ['Ryan', 'McDermott'];好的寫法
function splitIntoFirstAndLastName(name) {
return name.split(" ");
}
const name = "Ryan McDermott";
const newName = splitIntoFirstAndLastName(name);
console.log(name); // 'Ryan McDermott';
console.log(newName); // ['Ryan', 'McDermott'];在JavaScript中，原始類型值是按值傳遞，而對象/數(shù)組按引用傳遞。 對于對象和數(shù)組，如果有函數(shù)在購物車數(shù)組中進(jìn)行了更改（例如，通過添加要購買的商品），則使用該購物車數(shù)組的任何其他函數(shù)都將受到此添加的影響。 那可能很棒，但是也可能不好。 來想象一個(gè)糟糕的情況：
用戶單擊“購買”按鈕，該按鈕調(diào)用一個(gè)purchase 函數(shù)，接著，該函數(shù)發(fā)出一個(gè)網(wǎng)絡(luò)請求并將cart數(shù)組發(fā)送到服務(wù)器。由于網(wǎng)絡(luò)連接不好，purchase函數(shù)必須不斷重試請求。現(xiàn)在，如果在網(wǎng)絡(luò)請求開始之前，用戶不小心點(diǎn)擊了他們實(shí)際上不需要的項(xiàng)目上的“添加到購物車”按鈕，該怎么辦?如果發(fā)生這種情況，并且網(wǎng)絡(luò)請求開始，那么購買函數(shù)將發(fā)送意外添加的商品，因?yàn)樗幸粋€(gè)對購物車數(shù)組的引用，addItemToCart函數(shù)通過添加修改了這個(gè)購物車數(shù)組。
一個(gè)很好的解決方案是addItemToCart總是克隆cart數(shù)組，編輯它，然后返回克隆。這可以確保購物車引用的其他函數(shù)不會(huì)受到任何更改的影響。
關(guān)于這種方法有兩點(diǎn)需要注意：
1.可能在某些情況下，我們確實(shí)需要修改輸入對象，但是當(dāng)我們采用這種編程實(shí)踐時(shí)，會(huì)發(fā)現(xiàn)這種情況非常少見，大多數(shù)東西都可以被改造成沒有副作用。
2.就性能而言，克隆大對象可能會(huì)非常昂貴。 幸運(yùn)的是，在實(shí)踐中這并不是一個(gè)大問題，因?yàn)橛泻芏嗪馨舻膸焓惯@種編程方法能夠快速進(jìn)行，并且不像手動(dòng)克隆對象和數(shù)組那樣占用大量內(nèi)存。
// 不好的寫法
const addItemToCart = (cart, item) => {
cart.push({ item, date: Date.now() });
};
// 好的寫法
const addItemToCart = (cart, item) => {
return [...cart, { item, date: Date.now() }];
};污染全局變量在 JS 中是一種不好的做法，因?yàn)榭赡軙?huì)與另一個(gè)庫發(fā)生沖突，并且在他們的生產(chǎn)中遇到異常之前，API 的用戶將毫無用處。 讓我們考慮一個(gè)示例：如果想擴(kuò)展 JS 的原生Array方法以具有可以顯示兩個(gè)數(shù)組之間差異的diff方法，該怎么辦？ 可以將新函數(shù)寫入Array.prototype，但它可能與另一個(gè)嘗試執(zhí)行相同操作的庫發(fā)生沖突。 如果其他庫僅使用diff來查找數(shù)組的第一個(gè)元素和最后一個(gè)元素之間的區(qū)別怎么辦？ 這就是為什么只使用 ES6 類并簡單地?cái)U(kuò)展Array全局會(huì)更好的原因。
// 不好的寫法
Array.prototype.diff = function diff(comparisonArray) {
const hash = new Set(comparisonArray);
return this.filter(elem => !hash.has(elem));
};
// 好的寫法
class SuperArray extends Array {
diff(comparisonArray) {
const hash = new Set(comparisonArray);
return this.filter(elem => !hash.has(elem));
}
}JavaScript不像Haskell那樣是一種函數(shù)式語言，但它具有函數(shù)式的風(fēng)格。函數(shù)式語言可以更簡潔、更容易測試。如果可以的話，盡量喜歡這種編程風(fēng)格。
不好的寫法
const programmerOutput = [
{
name: "Uncle Bobby",
linesOfCode: 500
},
{
name: "Suzie Q",
linesOfCode: 1500
},
{
name: "Jimmy Gosling",
linesOfCode: 150
},
{
name: "Gracie Hopper",
linesOfCode: 1000
}
];
let totalOutput = 0;
for (let i = 0; i < programmerOutput.length; i++) {
totalOutput += programmerOutput[i].linesOfCode;
}好的寫法
const programmerOutput = [
{
name: "Uncle Bobby",
linesOfCode: 500
},
{
name: "Suzie Q",
linesOfCode: 1500
},
{
name: "Jimmy Gosling",
linesOfCode: 150
},
{
name: "Gracie Hopper",
linesOfCode: 1000
}
];
const totalOutput = programmerOutput.reduce(
(totalLines, output) => totalLines + output.linesOfCode,
0
);// 不好的寫法
if (fsm.state === "fetching" && isEmpty(listNode)) {
// ...
}
// 好的寫法
function shouldShowSpinner(fsm, listNode) {
return fsm.state === "fetching" && isEmpty(listNode);
}
if (shouldShowSpinner(fsmInstance, listNodeInstance)) {
// ...
}大家都說簡歷沒項(xiàng)目寫，我就幫大家找了一個(gè)項(xiàng)目，還附贈(zèng)【搭建教程】。
// 不好的寫法
function isDOMNodeNotPresent(node) {
// ...
}
if (!isDOMNodeNotPresent(node)) {
// ...
}
// 好的寫法
function isDOMNodePresent(node) {
// ...
}
if (isDOMNodePresent(node)) {
// ...
}這似乎是一個(gè)不可能完成的任務(wù)。一聽到這個(gè)，大多數(shù)人會(huì)說，“沒有if語句，我怎么能做任何事情呢?”答案是，你可以在許多情況下使用多態(tài)性來實(shí)現(xiàn)相同的任務(wù)。
第二個(gè)問題通常是，“那很好，但是我為什么要那樣做呢?”答案是上面講過一個(gè)概念:一個(gè)函數(shù)應(yīng)該只做一件事。當(dāng)具有if語句的類和函數(shù)時(shí)，這是在告訴你的使用者該函數(shù)執(zhí)行不止一件事情。
不好的寫法
class Airplane {
// ...
getCruisingAltitude() {
switch (this.type) {
case "777":
return this.getMaxAltitude() - this.getPassengerCount();
case "Air Force One":
return this.getMaxAltitude();
case "Cessna":
return this.getMaxAltitude() - this.getFuelExpenditure();
}
}
}好的寫法
class Airplane {
// ...
}
class Boeing777 extends Airplane {
// ...
getCruisingAltitude() {
return this.getMaxAltitude() - this.getPassengerCount();
}
}
class AirForceOne extends Airplane {
// ...
getCruisingAltitude() {
return this.getMaxAltitude();
}
}
class Cessna extends Airplane {
// ...
getCruisingAltitude() {
return this.getMaxAltitude() - this.getFuelExpenditure();
}
}JavaScript 是無類型的，這意味著函數(shù)可以接受任何類型的參數(shù)。 有時(shí)q我們會(huì)被這種自由所困擾，并且很想在函數(shù)中進(jìn)行類型檢查。 有很多方法可以避免這樣做。 首先要考慮的是一致的API。
// 不好的寫法
function travelToTexas(vehicle) {
if (vehicle instanceof Bicycle) {
vehicle.pedal(this.currentLocation, new Location("texas"));
} else if (vehicle instanceof Car) {
vehicle.drive(this.currentLocation, new Location("texas"));
}
}
// 好的寫法
function travelToTexas(vehicle) {
vehicle.move(this.currentLocation, new Location("texas"));
}現(xiàn)代瀏覽器在運(yùn)行時(shí)做了大量的優(yōu)化工作。很多時(shí)候，如果你在優(yōu)化，那么你只是在浪費(fèi)時(shí)間。有很好的資源可以查看哪里缺乏優(yōu)化，我們只需要針對需要優(yōu)化的地方就行了。
// 不好的寫法
// 在舊的瀏覽器上，每一次使用無緩存“l(fā)ist.length”的迭代都是很昂貴的
// 會(huì)為“l(fā)ist.length”重新計(jì)算。在現(xiàn)代瀏覽器中，這是經(jīng)過優(yōu)化的
for (let i = 0, len = list.length; i < len; i++) {
// ...
}
// 好的寫法
for (let i = 0; i < list.length; i++) {
// ...
}
代碼部署后可能存在的BUG沒法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
