26個(gè)寫出簡潔優(yōu)雅JavaScript代碼的技巧

作者：佚名 2024-03-28 14:29:46

在編程世界中，代碼不僅僅是讓事情正常運(yùn)轉(zhuǎn)。它就像一件講述故事的藝術(shù)品。當(dāng)代碼干凈時(shí)，它就像一個(gè)美麗的、精心制作的雕塑，既美觀又運(yùn)行良好。

寫在前面

但在急于按期完成任務(wù)的過程中，有時(shí)團(tuán)隊(duì)不會(huì)太注意保持代碼的整潔。這可能會(huì)導(dǎo)致項(xiàng)目變得混亂、復(fù)雜，變得更加難以開展。隨著情況變得更糟，生產(chǎn)力也會(huì)下降。然后，公司需要引進(jìn)更多的人來提供幫助，這使得一切都變得更加昂貴。

那么，干凈的代碼是什么樣的呢？它的代碼易于理解，沒有多余的部分，簡單，并且可以通過測試。換句話說，它是可讀的、可重用的，并且在需要時(shí)易于更改。

為了幫助你編寫出色的 JavaScript 代碼，我將在今天的內(nèi)容中與你分享 26 個(gè)寫干凈代碼的技巧，這些技巧將指導(dǎo)你編寫既優(yōu)雅又高效的代碼。

一、變量

1.使用有意義且易于發(fā)音的變量名

// Bad
const yyyymmdstr = moment().format("YYYY/MM/DD");


// Good
const currentDate = moment().format("YYYY/MM/DD");

2. 同一類型的變量使用相同的詞匯表

// Bad
getUserInfo();
getClientData();
getCustomerRecord();


// Good
getUser();

3. 使用可搜索的名稱

我們將閱讀比我們編寫的更多的代碼，我們編寫的代碼可讀且可搜索，這一點(diǎn)很重要。

// Bad
// What the heck is 86400000 for?
setTimeout(blastOff, 86400000); 


// Good
// Declare them as capitalized named constants.
const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000;


setTimeout(blastOff, MILLISECONDS_PER_DAY);

4. 使用解釋變量

// Bad
const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(
  address.match(cityZipCodeRegex)[1],
  address.match(cityZipCodeRegex)[2]
);


// Good
const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [_, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);

5. 避免心理映射

顯式的比隱式的好。

// 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);
});

6. 不要添加不需要的上下文

如果您的類/對(duì)象名稱告訴您一些信息，請(qǐng)不要在變量名稱中重復(fù)該信息。

// 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;
}

7. 使用默認(rèn)參數(shù)代替短路或條件

默認(rèn)參數(shù)通常比短路更清晰。請(qǐng)注意，如果您使用它們，您的函數(shù)將只為未定義的參數(shù)提供默認(rèn)值。其他“假”值（例如 ''、""、false、null、0 和 NaN）不會(huì)被默認(rèn)值替換。

// Bad
function createMicrobrewery(name) {
  const breweryName = name || "Hipster Brew Co.";
  // ...
}


// Good
function createMicrobrewery(name = "Hipster Brew Co.") {
  // ...
}

二、功能

8. 函數(shù)參數(shù)（理想情況下為 2 個(gè)或更少）

限制函數(shù)參數(shù)的數(shù)量非常重要，因?yàn)樗箿y試函數(shù)變得更加容易。超過三個(gè)會(huì)導(dǎo)致組合爆炸，您必須使用每個(gè)單獨(dú)的參數(shù)來測試大量不同的情況。

// 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
});

9.函數(shù)應(yīng)該做一件事

這是迄今為止軟件工程中最重要的規(guī)則。當(dāng)函數(shù)做不止一件事時(shí)，它們就更難編寫、測試和推理。當(dāng)您可以將一個(gè)函數(shù)隔離為一個(gè)操作時(shí)，就可以輕松重構(gòu)它，并且您的代碼讀起來會(huì)更清晰。如果您除了本指南之外沒有任何其他內(nèi)容，您將領(lǐng)先于許多開發(fā)人員。

// 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();
}

10.函數(shù)名稱應(yīng)該說明它們的作用

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

11.函數(shù)應(yīng)該只是一層抽象

當(dāng)你有多個(gè)抽象級(jí)別時(shí)，你的函數(shù)通常會(huì)做太多事情。拆分功能可以實(shí)現(xiàn)可重用性和更容易的測試。

// Bad
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...
  });
}


// Good
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;
}

12. 刪除重復(fù)代碼

盡最大努力避免重復(fù)代碼。重復(fù)的代碼是不好的，因?yàn)檫@意味著如果您需要更改某些邏輯，則需要在多個(gè)地方進(jìn)行更改。

// Bad
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);
  });
}


// Good
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);
  });
}

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

// Bad
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);




// Good
const menuConfig = {
  title: "Order",
  // User did not include 'body' key
  buttonText: "Send",
  cancellable: true
};


function createMenu(config) {
  let finalConfig = Object.assign(
    {
      title: "Foo",
      body: "Bar",
      buttonText: "Baz",
      cancellable: true
    },
    config
  );
  return finalConfig
  // config now equals: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}
  // ...
}


createMenu(menuConfig);

14. 不要使用標(biāo)志作為函數(shù)參數(shù)

標(biāo)志告訴你的用戶這個(gè)函數(shù)不止做一件事。函數(shù)應(yīng)該做一件事。如果函數(shù)遵循基于布爾值的不同代碼路徑，則拆分它們。

// 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}`);
}

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

在 JavaScript 中污染全局變量是一種不好的做法，因?yàn)槟憧赡軙?huì)與另一個(gè)庫發(fā)生沖突，并且 API 的用戶在生產(chǎn)中遇到異常之前不會(huì)意識(shí)到這一點(diǎn)。

// Bad
Array.prototype.diff = function diff(comparisonArray) {
  const hash = new Set(comparisonArray);
  return this.filter(elem => !hash.has(elem));
};


// Good
class SuperArray extends Array {
  diff(comparisonArray) {
    const hash = new Set(comparisonArray);
    return this.filter(elem => !hash.has(elem));
  }
}

16. 優(yōu)先使用函數(shù)式編程而不是命令式編程

JavaScript 不像 Haskell 那樣是一種函數(shù)式語言，但它具有函數(shù)式風(fēng)格。函數(shù)式語言可以更簡潔、更容易測試。盡可能喜歡這種編程風(fēng)格。

// Bad
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;
}


// Good
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
);

17.封裝條件語句

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


// Good
function shouldShowSpinner(fsm, listNode) {
  return fsm.state === "fetching" && isEmpty(listNode);
}


if (shouldShowSpinner(fsmInstance, listNodeInstance)) {
  // ...
}

18.避免否定條件

// Bad
function isDOMNodeNotPresent(node) {
  // ...
}


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


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


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

三、并發(fā)性

19.使用 Promise，而不是回調(diào)

回調(diào)不干凈，并且會(huì)導(dǎo)致過多的嵌套。在 ES2015/ES6 中，Promise 是內(nèi)置的全局類型。使用它們！

// Bad
import { get } from "request";
import { writeFile } from "fs";


get(
  "https://en.wikipedia.org/wiki/Robert_Cecil_Martin",
  (requestErr, response, body) => {
    if (requestErr) {
      console.error(requestErr);
    } else {
      writeFile("article.html", body, writeErr => {
        if (writeErr) {
          console.error(writeErr);
        } else {
          console.log("File written");
        }
      });
    }
  }
);


// Good
import { get } from "request-promise";
import { writeFile } from "fs-extra";


get("https://en.wikipedia.org/wiki/Robert_Cecil_Martin")
  .then(body => {
    return writeFile("article.html", body);
  })
  .then(() => {
    console.log("File written");
  })
  .catch(err => {
    console.error(err);
  });

20. Async/Await 比 Promise 更簡潔

Promise 是回調(diào)的一個(gè)非常干凈的替代方案，但 ES2017/ES8 帶來了 async 和 wait，它提供了更干凈的解決方案。

您所需要的只是一個(gè)以 async 關(guān)鍵字為前綴的函數(shù)，然后您可以命令式地編寫邏輯，而無需 then 函數(shù)鏈。

// Bad
import { get } from "request-promise";
import { writeFile } from "fs-extra";


get("https://en.wikipedia.org/wiki/Robert_Cecil_Martin")
  .then(body => {
    return writeFile("article.html", body);
  })
  .then(() => {
    console.log("File written");
  })
  .catch(err => {
    console.error(err);
  });


// Good
import { get } from "request-promise";
import { writeFile } from "fs-extra";


async function getCleanCodeArticle() {
  try {
    const body = await get(
      "https://en.wikipedia.org/wiki/Robert_Cecil_Martin"
    );
    await writeFile("article.html", body);
    console.log("File written");
  } catch (err) {
    console.error(err);
  }
}


getCleanCodeArticle()

四、錯(cuò)誤處理

拋出錯(cuò)誤是一件好事！它們意味著運(yùn)行時(shí)已成功識(shí)別出程序中的某些問題，并且它會(huì)通過停止當(dāng)前堆棧上的函數(shù)執(zhí)行、終止進(jìn)程（在 Node 中）并通過堆棧跟蹤在控制臺(tái)中通知您來通知您。

21. 不要忽略捕獲的錯(cuò)誤

對(duì)捕獲的錯(cuò)誤不采取任何措施并不能讓您有能力修復(fù)或?qū)λ鲥e(cuò)誤做出反應(yīng)。將錯(cuò)誤記錄到控制臺(tái) (console.log) 也好不了多少，因?yàn)樗３?huì)迷失在打印到控制臺(tái)的大量內(nèi)容中。

如果您將任何代碼包裝在 try/catch 中，則意味著您認(rèn)為那里可能會(huì)發(fā)生錯(cuò)誤，因此您應(yīng)該為錯(cuò)誤發(fā)生時(shí)制定計(jì)劃或創(chuàng)建代碼路徑。

// Bad
try {
  functionThatMightThrow();
} catch (error) {
  console.log(error);
}


// Good
try {
  functionThatMightThrow();
} catch (error) {
  // One option (more noisy than console.log):
  console.error(error);
  // Another option:
  notifyUserOfError(error);
  // Another option:
  reportErrorToService(error);
  // OR do all three!
}

22. 不要忽視被拒絕的承諾

出于同樣的原因，您不應(yīng)該忽略 try/catch 中捕獲的錯(cuò)誤。

// Bad
getdata()
  .then(data => {
    functionThatMightThrow(data);
  })
  .catch(error => {
    console.log(error);
  });


// Good
getdata()
  .then(data => {
    functionThatMightThrow(data);
  })
  .catch(error => {
    // One option (more noisy than console.log):
    console.error(error);
    // Another option:
    notifyUserOfError(error);
    // Another option:
    reportErrorToService(error);
    // OR do all three!
  });

五、評(píng)論

23. 只評(píng)論具有業(yè)務(wù)邏輯復(fù)雜性的事物

評(píng)論是道歉，而不是要求。好的代碼主要是文檔本身。

// Bad
function hashIt(data) {
  // The hash
  let hash = 0;


  // Length of string
  const length = data.length;


  // Loop through every character in data
  for (let i = 0; i < length; i++) {
    // Get character code.
    const char = data.charCodeAt(i);
    // Make the hash
    hash = (hash << 5) - hash + char;
    // Convert to 32-bit integer
    hash &= hash;
  }
}


// Good
function hashIt(data) {
  let hash = 0;
  const length = data.length;


  for (let i = 0; i < length; i++) {
    const char = data.charCodeAt(i);
    hash = (hash << 5) - hash + char;


    // Convert to 32-bit integer
    hash &= hash;
  }
}

24. 不要在代碼庫中留下注釋掉的代碼

版本控制的存在是有原因的。將舊代碼留在您的歷史記錄中。

// Bad
doStuff();
// doOtherStuff();
// doSomeMoreStuff();
// doSoMuchStuff();


// Good
doStuff();

25.沒有期刊評(píng)論

請(qǐng)記住，使用版本控制！不需要死代碼、注釋代碼，尤其是期刊注釋。使用 git log 獲取歷史記錄！

// Bad
/**
 * 2016-12-20: Removed monads, didn't understand them (RM)
 * 2016-10-01: Improved using special monads (JP)
 * 2016-02-03: Removed type-checking (LI)
 * 2015-03-14: Added combine with type-checking (JR)
 */
function combine(a, b) {
  return a + b;
}


// Good
function combine(a, b) {
  return a + b;
}

26. 避免位置標(biāo)記

它們通常只是增加噪音。讓函數(shù)和變量名稱以及正確的縮進(jìn)和格式為代碼提供視覺結(jié)構(gòu)。

// Bad
////////////////////////////////////////////////////////////////////////////////
// Scope Model Instantiation
////////////////////////////////////////////////////////////////////////////////
$scope.model = {
  menu: "foo",
  nav: "bar"
};


////////////////////////////////////////////////////////////////////////////////
// Action setup
////////////////////////////////////////////////////////////////////////////////
const actions = function() {
  // ...
};


// Good
$scope.model = {
  menu: "foo",
  nav: "bar"
};


const actions = function() {
  // ...
};

結(jié)論

從一開始就讓代碼干凈并不總是那么容易。重要的是要記住，沒有必要執(zhí)著于使每條線路都完美，尤其是當(dāng)您的日程安排很緊時(shí)。只是沒有足夠的時(shí)間來一遍又一遍地重寫代碼。

相反，專注于在有限的時(shí)間內(nèi)編寫最好的代碼。當(dāng)下一輪更新到來并且您注意到可以改進(jìn)的內(nèi)容時(shí)，這是進(jìn)行這些更改的好時(shí)機(jī)。

每個(gè)公司和每個(gè)項(xiàng)目都有自己的編碼風(fēng)格，它可能與我分享的技巧不同。如果您加入一個(gè)已經(jīng)啟動(dòng)并運(yùn)行的項(xiàng)目，通常最好堅(jiān)持使用已經(jīng)存在的編碼風(fēng)格（除非您要重構(gòu)它）。這是因?yàn)樵谡麄€(gè)代碼中保持一致的風(fēng)格也是保持代碼整潔的一種形式。

請(qǐng)記住，干凈的代碼是一個(gè)旅程，而不是目的地。這是關(guān)于隨著時(shí)間的推移做出小的改進(jìn)，而不是陷入完美。通過應(yīng)用您所學(xué)到的技巧，您將能夠編寫出更簡潔、更高效的 JavaScript 代碼，未來的您和其他人都會(huì)感謝您。

最后，感謝您的閱讀，也期待你的關(guān)注，祝編程快樂！

責(zé)任編輯：華軒來源： web前端開發(fā)