JavaScript代码整洁之道

JavaScript代码整洁之道

整洁的代码不单单是让人看起来舒服，更重要的是遵循一些规范可以让你的代码更容易维护，同时下降bug概率。

原文 clean-code-javascript，这里总结摘录出我的以为有帮助的地方，也加入了一些本身的理解（有些文字我感受保留原文更好，因此直接copy了），其余还有不少点没有列出来，感兴趣能够去看原文。另外这不是强制的代码规范，就像原文中说的， These are guidelines and nothing more。

1. 用命名的变量代替数组下标

// bad
const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(
  // 下标1,2不易于理解
  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);

2. 函数的参数最好<=2个，尽可能避免3个。

若是有不少参数就利用object传递，并使用解构。

注意 object array这些引用类型的值是 mutable的。

3. 一个函数只作一件事。

好处在于compose, test, and reason about。

4. 不要自行扩展原型

若是想扩展原型，能够先继承再添加方法，防止污染。

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

5. 用多态来代替条件语句

// bad
if (type === 'text') {
    // do something
} else if (type === 'select') {
    // do something else
}

我我的写这种代码的一种经常使用方式是：

const control = {
    text: {
        mapper() {},
        restore(){},
        name: 'this is a text field',
    },
    select: {
        mapper() {},
        restore(){},
        name: 'this is a select field',
    }
}

control[type].mapper();

实际上就是多态（polymorphism），也能够考虑用class的方式，大概这样：

class Field {
    ...
}

class TextField extends Field {
    mapper(){}
    restore(){}
    name = 'this is a text field';
}

class SelectField extends Field {
    mapper(){}
    restore(){}
    name = 'this is a select field';
}

6. 使用getter和setter函数。

// bad
function makeBankAccount() {
  // ...

  return {
    balance: 0
    // ...
  };
}

const account = makeBankAccount();
account.balance = 100;

// good
function makeBankAccount() {
  // this one is private
  let balance = 0;

  // a "getter", made public via the returned object below
  function getBalance() {
    return balance;
  }

  // a "setter", made public via the returned object below
  function setBalance(amount) {
    // ... validate before updating the balance
    balance = amount;
  }

  return {
    // ...
    getBalance,
    setBalance
  };
}

const account = makeBankAccount();
account.setBalance(100);

你能够在getter和setter里面作不少事情而不须要修改每个.balance的地方。

7. Prefer composition over inheritance

尽可能用组合来代替继承，什么状况下用继承：

• Your inheritance represents an "is-a" relationship and not a "has-a" relationship (Human->Animal vs. User->UserDetails).
• You can reuse code from the base classes (Humans can move like all animals).
• You want to make global changes to derived classes by changing a base class. (Change the caloric expenditure of all animals when they move).

8. SOLID

Single Responsibility Principle 单一职责原则

There should never be more than one reason for a class to change，一个类被改变的缘由数量应该尽量下降。若是一个类中功能太多，当你修改其中一点时会没法估量任何引用该类的模块所受到的影响。

Open/Closed Principle 开放封闭原则

用户能够在不修改内部实现的前提下自行扩展功能。例若有一个Http模块，内部会根据环境判断用哪一个adaptor。若是用户要添加adaptor就必须修改Http模块。

// bad
class AjaxAdapter extends Adapter {
  constructor() {
    super();
    this.name = "ajaxAdapter";
  }
}

class NodeAdapter extends Adapter {
  constructor() {
    super();
    this.name = "nodeAdapter";
  }
}

class HttpRequester {
  constructor(adapter) {
    this.adapter = adapter;
  }

  fetch(url) {
    if (this.adapter.name === "ajaxAdapter") {
      return makeAjaxCall(url).then(response => {
        // transform response and return
      });
    } else if (this.adapter.name === "nodeAdapter") {
      return makeHttpCall(url).then(response => {
        // transform response and return
      });
    }
  }
}

function makeAjaxCall(url) {
  // request and return promise
}

function makeHttpCall(url) {
  // request and return promise
}

// good
class AjaxAdapter extends Adapter {
  constructor() {
    super();
    this.name = "ajaxAdapter";
  }

  request(url) {
    // request and return promise
  }
}

class NodeAdapter extends Adapter {
  constructor() {
    super();
    this.name = "nodeAdapter";
  }

  request(url) {
    // request and return promise
  }
}

class HttpRequester {
  constructor(adapter) {
    this.adapter = adapter;
  }

  fetch(url) {
    return this.adapter.request(url).then(response => {
      // transform response and return
    });
  }
}

Liskov Substitution Principle 里式替换原则

父类和子类应该能够被交换使用而不会出错。

// bad
class Rectangle {
  constructor() {
    this.width = 0;
    this.height = 0;
  }

  setColor(color) {
    // ...
  }

  render(area) {
    // ...
  }

  setWidth(width) {
    this.width = width;
  }

  setHeight(height) {
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

class Square extends Rectangle {
  setWidth(width) {
    this.width = width;
    this.height = width;
  }

  setHeight(height) {
    this.width = height;
    this.height = height;
  }
}

function renderLargeRectangles(rectangles) {
  rectangles.forEach(rectangle => {
    rectangle.setWidth(4);
    rectangle.setHeight(5);
    const area = rectangle.getArea(); // BAD: Returns 25 for Square. Should be 20.
    rectangle.render(area);
  });
}

const rectangles = [new Rectangle(), new Rectangle(), new Square()];
renderLargeRectangles(rectangles);

上面的Rectangle不能直接替换Square，由于会致使计算面积错误，考虑将计算面积的方法抽象出来：

class Shape {
  setColor(color) {
    // ...
  }

  render(area) {
    // ...
  }
}

class Rectangle extends Shape {
  constructor(width, height) {
    super();
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

class Square extends Shape {
  constructor(length) {
    super();
    this.length = length;
  }

  getArea() {
    return this.length * this.length;
  }
}

function renderLargeShapes(shapes) {
  shapes.forEach(shape => {
    const area = shape.getArea();
    shape.render(area);
  });
}

const shapes = [new Rectangle(4, 5), new Rectangle(4, 5), new Square(5)];
renderLargeShapes(shapes);

Interface Segregation Principle 接口隔离原则

Clients should not be forced to depend upon interfaces that they do not use。举例来讲，一个功能模块须要设计必须传的参数和可选参数，不该该强迫用户使用可选参数。

Dependency Inversion Principle 依赖注入原则

原文：

1. High-level modules should not depend on low-level modules. Both should depend on abstractions.
2. Abstractions should not depend upon details. Details should depend on abstractions.

// bad
class InventoryRequester {
  constructor() {
    this.REQ_METHODS = ["HTTP"];
  }

  requestItem(item) {
    // ...
  }
}

class InventoryTracker {
  constructor(items) {
    this.items = items;

    // BAD: We have created a dependency on a specific request implementation.
    // We should just have requestItems depend on a request method: `request`
    this.requester = new InventoryRequester();
  }

  requestItems() {
    this.items.forEach(item => {
      this.requester.requestItem(item);
    });
  }
}

const inventoryTracker = new InventoryTracker(["apples", "bananas"]);
inventoryTracker.requestItems();

上面例子在于，InventoryTracker内部实例化了InventoryRequester，也就意味着high-level的模块须要知道low-level模块的细节（好比实例化InventoryRequester须要知道它的构造参数等，或者说须要import该模块，形成耦合）。

// good
class InventoryTracker {
  constructor(items, requester) {
    this.items = items;
    this.requester = requester;
  }

  requestItems() {
    this.items.forEach(item => {
      this.requester.requestItem(item);
    });
  }
}

class InventoryRequesterV1 {
  constructor() {
    this.REQ_METHODS = ["HTTP"];
  }

  requestItem(item) {
    // ...
  }
}

class InventoryRequesterV2 {
  constructor() {
    this.REQ_METHODS = ["WS"];
  }

  requestItem(item) {
    // ...
  }
}

// By constructing our dependencies externally and injecting them, we can easily
// substitute our request module for a fancy new one that uses WebSockets.
const inventoryTracker = new InventoryTracker(
  ["apples", "bananas"],
  new InventoryRequesterV2()
);
inventoryTracker.requestItems();

直接传入low-level的实例而不须要考虑它是如何被实例化的，high-level只须要依赖抽象的接口就能够完成对子模块的调用。

9. 注释

Comments are an apology, not a requirement. Good code mostly documents itself. 好的代码是自解释的。

参考：clean-code-javascript