js基石之---易读、易复用、易重构的 JavaScript 代码规范

易读、易复用、易重构的 JavaScript 代码规范

1.变量命名规范有意义

Bad:

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

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

2. 给变量定义名字

Bad:

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

// Declare them as capitalized named constants.
const MILLISECONDS_IN_A_DAY = 86_400_000;

setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

3.函数的变量定义初始值

Bad:

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

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

4.函数的形参过多时候，用对象代替多个参数

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

5.函数应该只做一件事情

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

6.函数名称应该说明其作用

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)

7.使用Object.assign拷贝对象

Good:

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

8.开闭原则

对扩展开放，对修改关闭；

面向对象开发

9.函数的继承

class Animal {
  constructor(age) {
    this.age = age;
  }

  move() {
    /* ... */
  }
}

class Mammal extends Animal {
  constructor(age, furColor) {
    super(age);
    this.furColor = furColor;
  }

  liveBirth() {
    /* ... */
  }
}

class Human extends Mammal {
  constructor(age, furColor, languageSpoken) {
    super(age, furColor);
    this.languageSpoken = languageSpoken;
  }

  speak() {
    /* ... */
  }
}

 10  链式编程 在每个函数的结尾返回this即可 

（这种模式在JavaScript中非常有用，您可以在jQuery和Lodash等许多库中看到它。它使您的代码更具表现力，并且不再那么冗长。出于这个原因，我说，使用方法链接并查看代码的干净程度。在类函数中，只需this在每个函数的末尾返回即可，然后可以将更多的类方法链接到该函数上。）

class Car {
  constructor(make, model, color) {
    this.make = make;
    this.model = model;
    this.color = color;
  }

  setMake(make) {
    this.make = make;
    // NOTE: Returning this for chaining
    return this;
  }

  setModel(model) {
    this.model = model;
    // NOTE: Returning this for chaining
    return this;
  }

  setColor(color) {
    this.color = color;
    // NOTE: Returning this for chaining
    return this;
  }

  save() {
    console.log(this.make, this.model, this.color);
    // NOTE: Returning this for chaining
    return this;
  }
}

const car = new Car("Ford", "F-150", "red").setColor("pink").save();

11.async/await 来处理异步编程

参考地址来源 ：https://github.com/ryanmcdermott/clean-code-javascript