【JS篇】8個JS編程的好習慣

導讀

該篇內容譯自 github clean-code-javascript 項目精選內容，想看具體完整文檔，請跳轉連接 clean-code-javascript

這篇文章列舉了8種平時在js編碼過程當中應該養成的良好習慣。分別以goodCode（好代碼）badcode（壞代碼）區分。但願你們在之後的codeing過程當中，加以注意。由於是意譯，若有不妥 請大佬多加指正。

---

正文

1.使用有意義的變量名稱

壞習慣

const yyyymmdstr = moment().format("YYYY/MM/DD");
複製代碼

好習慣

const currentDate = moment().format("YYYY/MM/DD");
複製代碼

2.避免魔法值

咱們查看以前寫的代碼的時候，取有意義和能夠搜索的變量名稱很重要。這樣能班組我能提升代碼可讀性

壞習慣

//86400000是啥東西
setTimeout(blastOff, 86400000);
複製代碼

好習慣

// 聲明它們爲一個常量
const MILLISECONDS_IN_A_DAY = 86400000;
const currentDate = moment().format("YYYY/MM/DD");
複製代碼

3.合理運用解構傳參

咱們查看以前寫的代碼的時候，取有意義和能夠搜索的變量名稱很重要。這樣能班組我能提升代碼可讀性

壞習慣

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);
複製代碼

4.運用默認傳參而不是條件內判斷

調用帶有默認值得傳參常常比函數內賦值來的簡短，可是要注意的是當你傳入undefined和 '', "", false, null, 0, 和 NaN 將不會被替代爲默認值

壞習慣

function createMicrobrewery(name) {
  const breweryName = name || "Hipster Brew Co.";
  // ...
}
複製代碼

好習慣

function createMicrobrewery(name = "Hipster Brew Co.") {
  // ...
}
複製代碼

5.函數應該只作一件事

這條規則很重要。當函數作了不止一件事時，它們更難組合、測試和推理。當您只需將一個函數隔離爲一個操做時，它們就能夠很容易地重構，而且您的代碼的讀取也會更清晰。

壞習慣

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();
}
複製代碼

6.用Object.assign設置對象默認值

壞習慣

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);
複製代碼

7.封裝條件

壞習慣

if (fsm.state === "fetching" && isEmpty(listNode)) {
  // ...
}
複製代碼

好習慣

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

if (shouldShowSpinner(fsmInstance, listNodeInstance)) {
  // ...
}
複製代碼

8.儘可能避免否認判斷

壞習慣

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

if (!isDOMNodeNotPresent(node)) {
  // ...
}
複製代碼

好習慣

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

if (isDOMNodePresent(node)) {
  // ...
}
複製代碼

---

總結

本文譯至github 精簡代碼項目，後續會陸續補充，但願你們多多關注哦~