浙江铃声推荐联盟

编写精炼的JavaScript代码:避免多余的Else, 尽早Return

京程一灯2018-12-07 09:02:04

如果你懒得读全文,看这些就够了

  • 一旦发现方法(或函数)无法继续执行则立即返回。

  • 通过用 if/return 替换 if/else来减少过多的缩进

  • 尽量减少方法(或函数)中“干或”代码的缩进。

  • 错误处理是“噪音”。(译者:会影响代码的易读性)


程序员一直被教导:“每个函数只能有一个退出点” 比如,“只从一个地方return”:

  1. function () {

  2.  var result;

  3.  if () {

  4.    result = x

  5.  } else {

  6.    if () {

  7.      result = y

  8.    } else {

  9.      result = z

  10.    }

  11.  }

  12.  return result // this return is single and lonely

  13. }

我认为这个编程指导意见不够详尽:

  • “给同一个result变量赋值”无法说名你的应真正的意图其实是:“这是最后要返回的变量,到此为止,后面不再做其他处理了”

  • 没有回答这个问题:“对这个result对象的处理结束了么?以后还能修改么?谁会修改?”

  • (result变量)可能会被错误地修改

  • (间接)鼓励了一个或多个if/else

示例: if/else 重构

我们来看一下下面这段典型的node回调代码:

  1. function(err, results) {

  2.  if (!err) {

  3.    doOtherStuff()

  4.    doMoreStuff()

  5.    // ... etc

  6.    // ... etc

  7.  } else {

  8.    handleError(err)

  9.  }

  10. }

第一个问题:错误处理被放在 else里,并放还在方法的最后面。当 if后面的"happy path"(代码)很长的时候,读者就不知道到底处理的是什么错误了。

那我们尝试重构一下:将函数要做的“正经”事情放在后面。将处理各种特殊情况的代码集中放在最前面:

  1. function(err, results) {

  2.  if (err) {

  3.    handleError(err)

  4.  } else {

  5.    doOtherStuff()

  6.    doMoreStuff()

  7.    // ... etc

  8.    // ... etc

  9.  }

  10. }

写JavaScript代码很容出现过多的缩进,我们应该极力避免。 像上面这种情况就可以重构为如下代码:去掉 else, 减少一层缩进。在 if里直接 return

  1. function(err, results) {

  2.  if (err) {

  3.    handleError(err)

  4.    return

  5.  }

  6.  doOtherStuff()

  7.  doMoreStuff()

  8.  // ... etc

  9.  // ... etc

  10. }

这样做不仅仅是将一坨代码向前缩进。更重要的是,函数的主要功能被提到了level 0。(这一点很重要)

在JavaScript中我们不太关心方法(或函数)返回值。所以我们可以将 if部分代码缩减为一行,从而移除多余的花括号: (译者:由于浏览器已经支持一行代码中的多步调试,这样做不会给代码调试带来不便)

  1. function(err, results) {

  2.  if (err) return handleError(err)

  3.  doOtherStuff()

  4.  doMoreStuff()

  5.  // ... etc

  6.  // ... etc

  7. }

通过将错误处理放在一行,同样遵守“每行一个逻辑语句”的编程指导原则。

这样写的另一个好处是: return关键字会被高亮。与多个 result=something相比,这样做 return一目了然。

综上,最终代码:

  • 方法(或函数)处于最低的缩进等级

  • 没有不必要的缩进

  • 代码更短小精炼

以上


往期精选文章
使用虚拟dom和JavaScript构建完全响应式的UI框架
扩展 Vue 组件
使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包


小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。