如何写出优雅耐看的JavaScript代码

在 JavaScript 中，永远不要污染全局，会在生产环境中产生难以预料的 bug。举个例子，比如你在 Array.prototype上新增一个 diff方法来判断两个数组的不同。而你同事也打算做类似的事情，不过他的 diff方法是用来判断两个数组首位元素的不同。很明显你们方法会产生冲突，遇到这类问题我们可以用 ES2015/ES6 的语法来对 Array进行扩展。

//bad code 
Array.prototype.diff = function diff(comparisonArray) { 
  const hash = new Set(comparisonArray); 
  return this.filter(elem => !hash.has(elem)); 
}; 
 
//better code 
class SuperArray extends Array { 
  diff(comparisonArray) { 
    const hash = new Set(comparisonArray); 
    return this.filter(elem => !hash.has(elem));         
  } 
} 

6、避免类型检查

JavaScript 是无类型的，意味着你可以传任意类型参数，这种自由度很容易让人困扰，不自觉的就会去检查类型。仔细想想是你真的需要检查类型还是你的 API 设计有问题?

//bad code 
function travelToTexas(vehicle) { 
  if (vehicle instanceof Bicycle) { 
    vehicle.pedal(this.currentLocation, new Location('texas')); 
  } else if (vehicle instanceof Car) { 
    vehicle.drive(this.currentLocation, new Location('texas')); 
  } 
} 
 
//better code 
function travelToTexas(vehicle) { 
  vehicle.move(this.currentLocation, new Location('texas')); 
} 

如果你需要做静态类型检查，比如字符串、整数等，推荐使用 TypeScript，不然你的代码会变得又臭又长。

//bad code 
function combine(val1, val2) { 
  if (typeof val1 === 'number' && typeof val2 === 'number' || 
      typeof val1 === 'string' && typeof val2 === 'string') { 
    return val1 + val2; 
  } 
 
  throw new Error('Must be of type String or Number'); 
} 
 
//better code 
function combine(val1, val2) { 
  return val1 + val2; 
} 

复杂条件判断

我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂，那么如何更优雅的写判断逻辑

1、if/else

点击列表按钮事件

/** 
 * 按钮点击事件 
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消 
 */ 
const onButtonClick = (status)=>{ 
  if(status == 1){ 
    sendLog('processing') 
    jumpTo('IndexPage') 
  }else if(status == 2){ 
    sendLog('fail') 
    jumpTo('FailPage') 
  }else if(status == 3){ 
    sendLog('fail') 
    jumpTo('FailPage') 
  }else if(status == 4){ 
    sendLog('success') 
    jumpTo('SuccessPage') 
  }else if(status == 5){ 
    sendLog('cancel') 
    jumpTo('CancelPage') 
  }else { 
    sendLog('other') 
    jumpTo('Index') 
  } 
} 

从上面我们可以看到的是通过不同的状态来做不同的事情，代码看起来非常不好看，大家可以很轻易的提出这段代码的改写方案，switch出场：

（编辑：常州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!