浅谈JavaScript 代码整洁之道(6)

日期：2020-05-11 栏目：程序人生浏览：次

喜欢上命令式编程之上的函数式编程

如果 Haskell 是 IPA 那么 JavaScript 就是 O'Douls。就是说，与 Haskell 不同，JavaScript 不是函数式编程语言，不过它仍然有一点函数式的意味。函数式语言更整洁也更容易测试，所以你最好能喜欢上这种编程风格。

不好:

const programmerOutput = [
 {
 name: 'Uncle Bobby',
 linesOfCode: 500
 }, {
 name: 'Suzie Q',
 linesOfCode: 1500
 }, {
 name: 'Jimmy Gosling',
 linesOfCode: 150
 }, {
 name: 'Gracie Hopper',
 linesOfCode: 1000
 }
];

var totalOutput = 0;

for (var i = 0; i < programmerOutput.length; i++) {
 totalOutput += programmerOutput[i].linesOfCode;
}

好:

const programmerOutput = [
 {
 name: 'Uncle Bobby',
 linesOfCode: 500
 }, {
 name: 'Suzie Q',
 linesOfCode: 1500
 }, {
 name: 'Jimmy Gosling',
 linesOfCode: 150
 }, {
 name: 'Gracie Hopper',
 linesOfCode: 1000
 }
];

var totalOutput = programmerOutput
 .map((programmer) => programmer.linesOfCode)
 .reduce((acc, linesOfCode) => acc + linesOfCode, 0);

封装条件

不好:

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

好:

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

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

避免否定条件

不好:

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

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

好:

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

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

避免条件

这似乎是个不可能完成的任务。大多数人第一次听到这个的时候会说，“没有 if 语句我该怎么办？”回答是在多数情况下都可以使用多态来实现相同的任务。第二个问题通常是，“那太好了，不过我为什么要这么做呢？”答案在于我们之前了解过整洁的概念：一个函数应该只做一件事情。如果你的类和函数有 if 语句，就意味着你的函数做了更多的事。记住，只做一件事。

不好:

class Airplane {
 //...
 getCruisingAltitude() {
 switch (this.type) {
  case '777':
  return getMaxAltitude() - getPassengerCount();
  case 'Air Force One':
  return getMaxAltitude();
  case 'Cessna':
  return getMaxAltitude() - getFuelExpenditure();
 }
 }
}

好:

class Airplane {
 //...
}

class Boeing777 extends Airplane {
 //...
 getCruisingAltitude() {
 return getMaxAltitude() - getPassengerCount();
 }
}

class AirForceOne extends Airplane {
 //...
 getCruisingAltitude() {
 return getMaxAltitude();
 }
}

class Cessna extends Airplane {
 //...
 getCruisingAltitude() {
 return getMaxAltitude() - getFuelExpenditure();
 }
}

转载注明出处：http://www.heiqu.com/417.html

浅谈JavaScript 代码整洁之道(6)

相关推荐