【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 精简代码项目，后续会陆续补充，希望大家多多关注哦~