Ba la la la ~ 讀者朋友們，你們好啊，又到了冷鋒時(shí)間，話不多說，發(fā)車！

一、變量

使用有準(zhǔn)確意義的變量名

不好:

var yyyymmdstr = moment().format('YYYY/MM/DD');

好:

var yearMonthDay = moment().format('YYYY/MM/DD');

在變量的值不會(huì)改變時(shí)使用 ES6 的常量

在不好的示例中，變量可以被改變。如果你申明一個(gè)常量，它會(huì)在整個(gè)程序中始終保持不變。
不好:

var FIRST_US_PRESIDENT = "George Washington";

好:

const FIRST_US_PRESIDENT = "George Washington";

對(duì)同一類型的變量使用相同的詞匯

不好:

getUserInfo();getClientData();getCustomerRecord();

好:

getUser();

使用可檢索的名稱

我們閱讀的代碼永遠(yuǎn)比寫的折。寫可讀性強(qiáng)、易于檢索的的代碼非常重要。在程序中使用無明確意義的變量名會(huì)難以理解，對(duì)讀者造成傷害。所以，把名稱定義成可檢索的。
不好:

// 見鬼，525600 是個(gè)啥？for (var i = 0; i < 525600; i++) { runCronJob();}

好:

// 用 var 申明為大寫的全局變量var MINUTES_IN_A_YEAR = 525600;for (var i = 0; i < MINUTES_IN_A_YEAR; i++) { runCronJob();}

使用解釋性的變量

不好:

const cityStateRegex = /^(.+)[,\s]+(.+?)\s*(\d{5})?$/;saveCityState(cityStateRegex.match(cityStateRegex)[1], cityStateRegex.match(cityStateRegex)[2]);

好:

const cityStateRegex = /^(.+)[,\s]+(.+?)\s*(\d{5})?$/;const match = cityStateRegex.match(cityStateRegex)const city = match[1];const state = match[2];saveCityState(city, state);

避免暗示 顯式優(yōu)于隱式。

不好:

var locations = ['Austin', 'New York', 'San Francisco'];locations.forEach((l) => { doStuff(); doSomeOtherStuff(); ... ... ... // 等等，l 又是什么？ dispatch(l);});

好:

var locations = ['Austin', 'New York', 'San Francisco'];locations.forEach((location) => { doStuff(); doSomeOtherStuff(); ... ... ... dispatch(location);});

不要添加沒必要的上下文

如果你的類名稱/對(duì)象名稱已經(jīng)說明了它們是什么，不要在(屬性)變量名里重復(fù)。
不好:

var Car = { carMake: 'Honda', carModel: 'Accord', carColor: 'Blue'};function paintCar(car) { car.carColor = 'Red';}

好:

var Car = { make: 'Honda', model: 'Accord', color: 'Blue'};function paintCar(car) { car.color = 'Red';}

短路語法比條件語句更清晰

不好:

function createMicrobrewery(name) { var breweryName; if (name) { breweryName = name; } else { breweryName = 'Hipster Brew Co.'; }}

好:

function createMicrobrewery(name) { var breweryName = name || 'Hipster Brew Co.'}

二、函數(shù)

函數(shù)參數(shù) (理論上少于等于2個(gè))

限制函數(shù)參數(shù)的數(shù)量極為重要，它會(huì)讓你更容易測試函數(shù)。超過3個(gè)參數(shù)會(huì)導(dǎo)致組合膨脹，以致于你必須根據(jù)不同的參數(shù)對(duì)大量不同的情況進(jìn)行測試。
理想情況下是沒有參數(shù)。有一個(gè)或者兩個(gè)參數(shù)也還好，三個(gè)就應(yīng)該避免了。多于那個(gè)數(shù)量就應(yīng)該考慮合并。通常情況下，如果你有多于2個(gè)參數(shù)，你的函數(shù)會(huì)嘗試做太多事情。如果不是這樣，大多數(shù)時(shí)候可以使用一個(gè)高階對(duì)象作為參數(shù)使用。
既然 JavaScript 允許我們?cè)谶\(yùn)行時(shí)隨意創(chuàng)建對(duì)象，而不需要預(yù)先定義樣板，那么你在需要很多參數(shù)的時(shí)候就可以使用一個(gè)對(duì)象來處理。
不好:

function createMenu(title, body, buttonText, cancellable) { ...}

好:

var menuConfig = { title: 'Foo', body: 'Bar', buttonText: 'Baz', cancellable: true}function createMenu(menuConfig) { ...}

一個(gè)函數(shù)只做一件事

目前這是軟件工程中最重要的原則。如果函數(shù)做了較多的事情，它就難以組合、測試和推測。當(dāng)你讓函數(shù)只做一件事情的時(shí)候，它們就很容易重構(gòu)，而且代碼讀起來也會(huì)清晰得多。你只需要遵循本指南的這一條，就能領(lǐng)先于其他很多開發(fā)者。
不好:

function emailClients(clients) { clients.forEach(client => { let clientRecord = database.lookup(client); if (clientRecord.isActive()) { email(client); } });}

好:

function emailClients(clients) { clients.forEach(client => { emailClientIfNeeded(client); });}function emailClientIfNeeded(client) { if (isClientActive(client)) { email(client); }}function isClientActive(client) { let clientRecord = database.lookup(client); return clientRecord.isActive();}

函數(shù)名稱要說明它做的事

不好:

function dateAdd(date, month) { // ...}let date = new Date();// 很難從函數(shù)名了解到加了什么dateAdd(date, 1);

好:

function dateAddMonth(date, month) { // ...}let date = new Date();dateAddMonth(date, 1);

函數(shù)應(yīng)該只抽象一個(gè)層次

如果你有多個(gè)層次的抽象，那么你的函數(shù)通常做了太多事情，此時(shí)應(yīng)該拆分函數(shù)使其易于復(fù)用和易于測試。
不好:

function parseBetterJSAlternative(code) { let REGEXES = [ // ... ]; let statements = code.split(' '); let tokens; REGEXES.forEach((REGEX) => { statements.forEach((statement) => { // ... }) }); let ast; tokens.forEach((token) => { // lex... }); ast.forEach((node) => { // parse... })}

好:

function tokenize(code) { let REGEXES = [ // ... ]; let statements = code.split(' '); let tokens; REGEXES.forEach((REGEX) => { statements.forEach((statement) => { // ... }) }); return tokens;}function lexer(tokens) { let ast; tokens.forEach((token) => { // lex... }); return ast;}function parseBetterJSAlternative(code) { let tokens = tokenize(code); let ast = lexer(tokens); ast.forEach((node) => { // parse... })}

刪除重復(fù)代碼

任何情況下，都不要有重復(fù)的代碼。沒有任何原因，它很可能是阻礙你成為專業(yè)開發(fā)者的最糟糕的一件事。重復(fù)代碼意味著你要修改某些邏輯的時(shí)候要修改不止一個(gè)地方的代碼。JavaScript 是弱類型語句，所以它很容易寫通用性強(qiáng)的函數(shù)。記得利用這一點(diǎn)！
不好:

function showDeveloperList(developers) { developers.forEach(developers => { var expectedSalary = developer.calculateExpectedSalary(); var experience = developer.getExperience(); var githubLink = developer.getGithubLink(); var data = { expectedSalary: expectedSalary, experience: experience, githubLink: githubLink }; render(data); });}function showManagerList(managers) { managers.forEach(manager => { var expectedSalary = manager.calculateExpectedSalary(); var experience = manager.getExperience(); var portfolio = manager.getMBAProjects(); var data = { expectedSalary: expectedSalary, experience: experience, portfolio: portfolio }; render(data); });}

好:

function showList(employees) { employees.forEach(employee => { var expectedSalary = employee.calculateExpectedSalary(); var experience = employee.getExperience(); var portfolio; if (employee.type === 'manager') { portfolio = employee.getMBAProjects(); } else { portfolio = employee.getGithubLink(); } var data = { expectedSalary: expectedSalary, experience: experience, portfolio: portfolio }; render(data); });}

使用默認(rèn)參數(shù)代替短路表達(dá)式

不好:

function writeForumComment(subject, body) { subject = subject || 'No Subject'; body = body || 'No text';}

好:

function writeForumComment(subject = 'No subject', body = 'No text') { ...}

用 Object.assign 設(shè)置默認(rèn)對(duì)象

不好:

var 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);

好:

var 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); // 現(xiàn)在 config 等于: {title: "Foo", body: "Bar", buttonText: "Baz", cancellable: true} // ...}createMenu(menuConfig);

不要把標(biāo)記用作函數(shù)參數(shù)

標(biāo)記告訴你的用戶這個(gè)函數(shù)做的事情不止一件。但是函數(shù)應(yīng)該只做一件事。如果你的函數(shù)中會(huì)根據(jù)某個(gè)布爾參數(shù)產(chǎn)生不同的分支，那就拆分這個(gè)函數(shù)。
不好:

function createFile(name, temp) { if (temp) { fs.create('./temp/' + name); } else { fs.create(name); }}

好:

function createTempFile(name) { fs.create('./temp/' + name);}function createFile(name) { fs.create(name);}

避免副作用

如果一個(gè)函數(shù)不是獲取一個(gè)輸入的值并返回其它值，它就有可能產(chǎn)生副作用。這些副作用可能是寫入文件、修改一些全局變量，或者意外地把你所有錢轉(zhuǎn)給一個(gè)陌生人。
現(xiàn)在你確實(shí)需要在程序中有副作用。像前面提到的那樣，你可能需要寫入文件。現(xiàn)在你需要做的事情是搞清楚在哪里集中完成這件事情。不要使用幾個(gè)函數(shù)或類來完成寫入某個(gè)特定文件的工作。采用一個(gè)，就一個(gè)服務(wù)來完成。
關(guān)鍵點(diǎn)是避免覺的陷阱，比如在沒有結(jié)構(gòu)的對(duì)象間共享狀態(tài)，使用可以被任意修改的易變的數(shù)據(jù)類型，沒有集中處理發(fā)生的副作用等。如果你能做到，你就能比其他大多數(shù)程序員更愉快。
不好:

// 下面的函數(shù)使用了全局變量。// 如果有另一個(gè)函數(shù)在使用 name，現(xiàn)在可能會(huì)因?yàn)?name 變成了數(shù)組而不能正常運(yùn)行。var name = 'Ryan McDermott';function splitIntoFirstAndLastName() { name = name.split(' ');}splitIntoFirstAndLastName();console.log(name); // ['Ryan', 'McDermott'];

好:

function splitIntoFirstAndLastName(name) { return name.split(' ');}var name = 'Ryan McDermott'var newName = splitIntoFirstAndLastName(name);console.log(name); // 'Ryan McDermott';console.log(newName); // ['Ryan', 'McDermott'];

不要寫入全局函數(shù)

JavaScript 中全局污染是一件糟糕的事情，因?yàn)樗赡芎土硗鈳彀l(fā)生沖突，然而使用你 API 的用戶卻不會(huì)知道——直到他們?cè)谏a(chǎn)中遇到一個(gè)異常。來思考一個(gè)例子：你想擴(kuò)展 JavaScript 的原生 Array，使之擁有一個(gè) diff
方法，用來展示兩數(shù)據(jù)之前的區(qū)別，這時(shí)你會(huì)怎么做？你可以給 Array.prototype
添加一個(gè)新的函數(shù)，但它可能會(huì)與其它想做同樣事情的庫發(fā)生沖突。如果那個(gè)庫實(shí)現(xiàn)的 diff
只是比如數(shù)組中第一個(gè)元素和最后一個(gè)元素的異同會(huì)發(fā)生什么事情呢？這就是為什么最好是使用 ES6 的類語法從全局的 Array
派生一個(gè)類來做這件事。
不好:

Array.prototype.diff = function(comparisonArray) { var values = []; var hash = {}; for (var i of comparisonArray) { hash[i] = true; } for (var i of this) { if (!hash[i]) { values.push(i); } } return values;}

好:

class SuperArray extends Array { constructor(...args) { super(...args); } diff(comparisonArray) { var values = []; var hash = {}; for (var i of comparisonArray) { hash[i] = true; } for (var i of this) { if (!hash[i]) { values.push(i); } } return values; }}

喜歡上命令式編程之上的函數(shù)式編程

如果 Haskell 是 IPA 那么 JavaScript 就是 O'Douls。就是說，與 Haskell 不同，JavaScript 不是函數(shù)式編程語言，不過它仍然有一點(diǎn)函數(shù)式的意味。函數(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 }];var totalOutput = 0;for (var 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 }];var totalOutput = programmerOutput .map((programmer) => programmer.linesOfCode) .reduce((acc, linesOfCode) => acc + linesOfCode, 0);

封裝條件

不好:

if (fsm.state === 'fetching' && isEmpty(listNode)) {  /// ...}

好:

function shouldShowSpinner(fsm, listNode) { return fsm.state === 'fetching' && isEmpty(listNode);}if (shouldShowSpinner(fsmInstance, listNodeInstance)) { // ...}

避免否定條件

不好:

function isDOMNodeNotPresent(node) { // ...}if (!isDOMNodeNotPresent(node)) { // ...}

好:

function isDOMNodePresent(node) { // ...}if (isDOMNodePresent(node)) { // ...}

避免條件

這似乎是個(gè)不可能完成的任務(wù)。大多數(shù)人第一次聽到這個(gè)的時(shí)候會(huì)說，“沒有 if
語句我該怎么辦？”回答是在多數(shù)情況下都可以使用多態(tài)來實(shí)現(xiàn)相同的任務(wù)。第二個(gè)問題通常是，“那太好了，不過我為什么要這么做呢？”答案在于我們之前了解過整潔的概念：一個(gè)函數(shù)應(yīng)該只做一件事情。如果你的類和函數(shù)有 if
語句，就意味著你的函數(shù)做了更多的事。記住，只做一件事。
不好:

class Airplane { //... getCruisingAltitude() { switch (this.type) { case '777': return getMaxAltitude() - getPassengerCount(); case 'Air Force One': return getMaxAltitude(); case 'Cessna': return getMaxAltitude() - getFuelExpenditure(); } }}

好:

class Airplane { //...}class Boeing777 extends Airplane { //... getCruisingAltitude() { return getMaxAltitude() - getPassengerCount(); }}class AirForceOne extends Airplane { //... getCruisingAltitude() { return getMaxAltitude(); }}class Cessna extends Airplane { //... getCruisingAltitude() { return getMaxAltitude() - getFuelExpenditure(); }}

避免類型檢查(第1部分)

JavaScript 是無類型的，也就是說函數(shù)可以獲取任意類型的參數(shù)。有時(shí)候你會(huì)覺得這種自由是種折磨，因而會(huì)不由自主地在函數(shù)中使用類型檢查。有很多種方法可以避免類型檢查。首先要考慮的就是 API 的一致性。
不好:

function travelToTexas(vehicle) { if (vehicle instanceof Bicycle) { vehicle.peddle(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'));}

**避免類型檢查(第2部分)

如果你在處理基本類型的數(shù)據(jù)，比如字符串，整數(shù)和數(shù)組，又不能使用多態(tài)，這時(shí)你會(huì)覺得需要使用類型檢查，那么可以考慮 TypeScript。這是普通 JavaScript 的完美替代品，它在標(biāo)準(zhǔn)的 JavaScript 語法之上提供了靜態(tài)類型。普通 JavaScript 手工檢查類型的問題在于這樣會(huì)寫很多廢話，而人為的“類型安全”并不能彌補(bǔ)損失的可讀性。讓你的 JavaScript 保持整潔，寫很好的測試，并保持良好的代碼審查。否則讓 TypeScript (我說過，這是很好的替代品)來做所有事情。
不好:

function combine(val1, val2) { if (typeof val1 == "number" && typeof val2 == "number" || typeof val1 == "string" && typeof val2 == "string") { return val1 + val2; } else { throw new Error('Must be of type String or Number'); }}

好:

function combine(val1, val2) { return val1 + val2;}

不要過度優(yōu)化

現(xiàn)在瀏覽器在運(yùn)行時(shí)悄悄地做了很多優(yōu)化工作。很多時(shí)候你的優(yōu)化都是在浪費(fèi)時(shí)間。這里有很好的資源 可以看看哪些優(yōu)化比較缺乏。把它們作為目標(biāo)，直到他們能固定下來的時(shí)候。
不好:

// 在舊瀏覽器中，每次循環(huán)的成本都比較高，因?yàn)槊看味紩?huì)重算 len。// 現(xiàn)在瀏覽器中，這已經(jīng)被優(yōu)化了。for (var i = 0, len = list.length; i < len; i++) { // ...}

好:

for (var i = 0; i < list.length; i++) {  // ...}

刪除不用的代碼

不用的代碼和重復(fù)的代碼一樣糟糕。在代碼庫中保留無用的代碼是毫無道理的事情。如果某段代碼用不到，那就刪掉它！如果你以后需要它，仍然可以從代碼庫的歷史版本中找出來。
不好:

function oldRequestModule(url) { // ...}function newRequestModule(url) { // ...}var req = newRequestModule;inventoryTracker('apples', req, 'www.inventory-awesome.io');

好:
function newRequestModule(url) { // ...}var req = newRequestModule;inventoryTracker('apples', req, 'www.inventory-awesome.io');

以上為個(gè)人意見，如有雷同，純屬巧合，歡迎大家多提意見！Bey 了 個(gè) Bey ~