第二十二章代码重构

22.1 提炼函数

在 JavaScript 中，我们大部分都在跟函数打交道，所以我们希望这些函数有着良好的命名，函数体内包含的逻辑清晰明了，如果一个函数过长，不得不加上若干注释才能让这个函数显得容易读一点，那这些函数就很有必要进行重构。

如果在函数中有一段代码可以被独立出来，那我们最好把这些代码放进另外一个独立的函数中。这是很常见的优化工作，这样做的好处有：

避免出现超大函数
独立出来的函数有利用复用
独立出来的函数更容易被覆写
独立出来的函数如果有良好的命名，那么它本身起到了注释的作用

比如一个负责取得用户信息的函数里面，我们还需要打印跟用户信息相关的 log，那么打印 log 的语句就可以被封装在独立的函数中。

js
1var getUserInfo = function () {
2  ajax('http://xxx.com/userInfo', function (data) {
3    console.log('userId: ' + data.userId)
4    console.log('userName: ' + data.userName)
5    console.log('nickName: ' + data.nickName)
6  })
7}

改成：

js
1var getUserInfo = function () {
2  ajax('http://xxx.com/userInfo', function (data) {
3    printDetails(data)
4  })
5}
6
7var printDetails = function (data) {
8  console.log('userId: ' + data.userId)
9  console.log('userName: ' + data.userName)
10  console.log('nickName: ' + data.nickName)
11}

22.2 合并重复的条件片段

如果一个函数体内有一些条件分支语句，而这些条件分支语句内部散布了一些重复的代码，那么就有必要进行合并去重工作。

js
1var paging = function (currPage) {
2  if (currPage <= 0) {
3    currPage = 0
4    jump(currPage) // 跳转
5  } else if (currPage >= totalPage) {
6    currPage = totalPage
7    jump(currPage) // 跳转
8  } else {
9    jump(currPage) // 跳转
10  }
11}

上面的函数中的每一条都会执行 jump( currPage )，所以完全可以独立出来

js
1var paging = function (currPage) {
2  if (currPage <= 0) {
3    currPage = 0
4  } else if (currPage >= totalPage) {
5    currPage = totalPage
6  }
7  jump(currPage) // 把jump函数独立出来
8}

22.3 把条件分支语句提炼成函数

复杂的条件语句是导致程序难以阅读和理解的重要原因，而且容易导致一个庞大的函数。

假设现在有一个需求是编写一个计算商品价格的 getPrice 函数，商品的计算只有一个规则：如果当前正处于夏季，那么商品可以以 8 折出售。

代码如下：

js
1        var getPrice = function( price ){
2            var date = new Date();
3            if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){    // 夏天
4              return price * 0.8;
5            }
6            return price;
7        };
8        观察这句代码：
9        if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){
10            // ...
11        }

这句代码要表达的意思很简单，就是判断当前是否处于夏天（7-9 月）。尽管这句代码很短，但代码要表达的意图和代码自身还存在很大的距离，阅读代码的人可能要多花一点时间才能明白它要传达的意图。其实可以把这句代码提炼成一个单独的函数，既能更准确表达代码的意思，函数名还可以起到注释的作用。

js
1var isSummer = function () {
2  var date = new Date()
3  return date.getMonth() >= 6 && date.getMonth() <= 9
4}
5
6var getPrice = function (price) {
7  if (isSummer()) {
8    // 夏天
9    return price * 0.8
10  }
11  return price
12}

22.4 合理使用循环

在函数体内，如果有些代码实际上负责的是重复性的工作，那么合理利用循环不仅可以完成同样的功能，还可以让代码更少。

js
1var createXHR = function () {
2  var xhr
3  try {
4    xhr = new Object('MSXML2.XMLHttp.6.0')
5  } catch (e) {
6    try {
7      xhr = new Object('MSXML2.XMLHttp.3.0')
8    } catch (e) {
9      xhr = new Object('MSXML2.XMLHttp')
10    }
11  }
12  return xhr
13}
14
15var xhr = createXHR()

上面的一段 try…catch 可以灵活运用循环，达到一样的效果

js
1var createXHR = function () {
2  var versions = ['MSXML2.XMLHttp.6.0ddd', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp']
3  for (let version of versions) {
4    try {
5      return new Object(version)
6    } catch (e) {}
7  }
8}
9
10var xhr = createXHR()
11console.log(xhr) //"MSXML2.XMLHttp.6.0ddd"

22.5 提前让函数退出代替嵌套条件分支

js
1var del = function (obj) {
2  var ret
3  if (!obj.isReadOnly) {
4    // 不为只读的才能被删除
5    if (obj.isFolder) {
6      // 如果是文件夹
7      ret = deleteFolder(obj)
8    } else if (obj.isFile) {
9      // 如果是文件
10      ret = deleteFile(obj)
11    }
12  }
13  return ret
14}

嵌套的条件分支语句是代码维护的噩梦，对于阅读代码的人来说，嵌套的 if、else 语句比平铺的 if、else 更加难理解。用《重构》里的话说，嵌套的条件分支往往是深信“每个函数都只能有一个出口的”程序员写的，实际上，如果对函数的剩余部分不感兴趣，那就应该立即退出。引导阅读者去看没用的 else 片段，只会妨碍他们对程序的理解。

于是我们可以挑选一些条件分支，在进入这些条件分支之后，就立即让这个函数退出。要做到这一点，有一个常见的技巧，即在面对一个嵌套的 if 分支时，我们可以把外层 if 表达式进行反转。重构后的 del 函数如下：

js
1var del = function (obj) {
2  if (obj.isReadOnly) {
3    // 反转if表达式
4    return
5  }
6  if (obj.isFolder) {
7    return deleteFolder(obj)
8  }
9  if (obj.isFile) {
10    return deleteFile(obj)
11  }
12}

22.6 使用对象参数替代过长的参数列表

有时候一个函数可能接收多个参数，而参数的数量越多，函数就越难理解和使用。使用函数的人首先要搞明白全部参数的含义，在使用中还需要小心翼翼以免传错位置或者传少了。

如果我们想在第 3 个参数和第 4 个参数之中增加一个新的参数，就会涉及许多代码的修改，代码如下：

js
1var setUserInfo = function (id, name, address, sex, mobile, qq) {
2  console.log('id= ' + id)
3  console.log('name= ' + name)
4  console.log('address= ' + address)
5  console.log('sex= ' + sex)
6  console.log('mobile= ' + mobile)
7  console.log('qq= ' + qq)
8}
9
10setUserInfo(1314, 'sven', 'shenzhen', 'male', '137********', 377876679)

这时我们可以把参数都放入一个对象内，然后把该对象传入 setUserInfo 函数，setUserInfo 函数需要的数据可以自行从该对象里获取。现在不用再关心参数的数量和顺序，只要保证参数对应的 key 值不变就可以了：

js
1var setUserInfo = function (obj) {
2  const { id, name, address, sex, mobile, qq } = obj
3  console.log('id= ' + id)
4  console.log('name= ' + name)
5  console.log('address= ' + address)
6  console.log('sex= ' + sex)
7  console.log('mobile= ' + mobile)
8  console.log('qq= ' + qq)
9}
10
11setUserInfo({
12  id: 1314,
13  name: 'sven',
14  address: 'shenzhen',
15  sex: 'male',
16  mobile: '137********',
17  qq: 377876679,
18})

22.7 尽量减少参数数量

如果调用一个函数时需要传入多个参数，那这个函数是让人望而生畏的，而如果一个函数不需要传入任何参数就可以使用，这种函数是深受人们喜爱的。

在实际开发中，向函数传递参数不可避免，但我们应该尽量减少函数接收的参数数量。下面举个非常简单的示例。有一个画图函数 draw，它现在只能绘制正方形，接收了 3 个参数，分别是图形的 width、heigth 以及 square。

js
1var draw = function (width, height, square) {}

但实际上正方形的面积是可以通过 width 和 height 计算出来的，于是我们可以把参数 square 从 draw 函数中去掉：

js
1var draw = function (width, height) {
2  var square = width * height
3}

假设以后这个 draw 函数开始支持绘制圆形，我们需要把参数 width 和 height 换成半径 radius，但图形的面积 square 始终不应该由客户传入，而是应该在 draw 函数内部，由传入的参数加上一定的规则计算得来。

22.8 少用三目运算符

有一些程序员喜欢大规模地使用三目运算符，来代替传统的 if、else。理由是三目运算符性能高，代码量少。不过，这两个理由其实都很难站得住脚。

即使我们假设三目运算符的效率真的比 if、else 高，这点差距也是完全可以忽略不计的。在实际的开发中，即使把一段代码循环一百万次，使用三目运算符和使用 if、else 的时间开销处在同一个级别里。

同样，相比损失的代码可读性和可维护性，三目运算符节省的代码量也可以忽略不计。

如果条件分支逻辑简单且清晰，这无碍我们使用三目运算符

js
1        var global = typeof window ! == "undefined" ? window : this;

但如果条件分支逻辑非常复杂，如下段代码所示，那我们最好的选择还是按部就班地编写 if、else。if、else 语句的好处很多，一是阅读相对容易，二是修改的时候比修改三目运算符周围的代码更加方便：

js
1if (!aup || !bup) {
2  return a === doc
3    ? -1
4    : b === doc
5    ? 1
6    : aup
7    ? -1
8    : bup
9    ? 1
10    : sortInput
11    ? indexOf.call(sortInput, a) - indexOf.call(sortInput, b)
12    : 0
13}

22.9 合理使用链式调用

经常使用 jQuery 的程序员相当习惯链式调用方法，在 JavaScript 中，可以很容易地实现方法的链式调用，即让方法调用结束后返回对象自身。

js
1var User = function () {
2  this.id = null
3  this.name = null
4}
5
6User.prototype.setId = function (id) {
7  this.id = id
8  return this
9}
10
11User.prototype.setName = function (name) {
12  this.name = name
13  return this
14}
15
16console.log(new User().setId(1314).setName('sven'))

使用链式调用的方式并不会造成太多阅读上的困难，也确实能省下一些字符和中间变量，但节省下来的字符数量同样是微不足道的。

链式调用带来的坏处就是在调试的时候非常不方便，如果我们知道一条链中有错误出现，必须得先把这条链拆开才能加上一些调试 log 或者增加断点，这样才能定位错误出现的地方。

如果该链条的结构相对稳定，后期不易发生修改，那么使用链式调用无可厚非。但如果该链条很容易发生变化，导致调试和维护困难，那么还是建议使用普通调用的形式：

js
1var user = new User()
2
3user.setId(1314)
4user.setName('sven')

22.10 分解大型类

下面是一段模拟游戏的代码，负责创建游戏人物的 Spirit 类非常庞大，不仅要负责创建人物精灵，还包括了人物的攻击、防御等动作方法，代码如下：

js
1        var Spirit = function( name ){
2            this.name = name;
3        };
4
5        Spirit.prototype.attack = function( type ){    // 攻击
6            if ( type === 'waveBoxing' ){
7              console.log( this.name + '：使用波动拳’ );
8            }else if( type === 'whirlKick' ){
9                console.log( this.name + '：使用旋风腿’ );
10            }
11        };
12
13        var spirit = new Spirit( 'RYU' );
14
15        spirit.attack( 'waveBoxing' );      // 输出：RYU：使用波动拳
16        spirit.attack( 'whirlKick' );    // 输出：RYU：使用旋风腿

Spirit.prototype.attack 这个方法实现是太庞大了，实际上它完全有必要作为一个单独的类存在。面向对象设计鼓励将行为分布在合理数量的更小对象之中：

js
1const attack = {
2  waveBoxing: function (name) {
3    console.log(this.name + '：使用波动拳')
4  },
5  whirlKick: function (name) {
6    console.log(this.name + '：使用旋风腿')
7  },
8}
9
10var Spirit = function (name) {
11  this.name = name
12}
13
14Spirit.prototype.attack = function (type) {
15  // 攻击
16  attack[type](this.name)
17}
18
19var spirit = new Spirit('RYU')
20
21spirit.attack('waveBoxing') // 输出：RYU：使用波动拳
22spirit.attack('whirlKick')

现在的 Spirit 类变得精简了很多，不再包括各种各样的攻击方法，而是把攻击动作委托给 attack 对象来执行，这段代码也是策略模式的运用之一。

22.11 用 return 退出多重循环

假设在函数体内有一个两重循环语句，我们需要在内层循环中判断，当达到某个临界条件时退出外层的循环。我们大多数时候会引入一个控制标记变量。

js
1var func = function () {
2  var flag = false
3  for (var i = 0; i < 10; i++) {
4    for (var j = 0; j < 10; j++) {
5      if (i * j > 30) {
6        flag = true
7        break
8      }
9    }
10    if (flag === true) {
11      break
12    }
13  }
14}

第二种做法是设置循环标记：

js
1var func = function () {
2  outerloop: for (var i = 0; i < 10; i++) {
3    innerloop: for (var j = 0; j < 10; j++) {
4      if (i * j > 30) {
5        break outerloop
6      }
7    }
8  }
9}

这两种做法无疑都让人头晕目眩，更简单的做法是在需要中止循环的时候直接退出整个方法：

js
1var func = function () {
2  for (var i = 0; i < 10; i++) {
3    for (var j = 0; j < 10; j++) {
4      if (i * j > 30) {
5        return
6      }
7    }
8  }
9}

当然用 return 直接退出方法会带来一个问题，如果在循环之后还有一些将被执行的代码呢？如果我们提前退出了整个方法，这些代码就得不到被执行的机会：

js
1var func = function () {
2  for (var i = 0; i < 10; i++) {
3    for (var j = 0; j < 10; j++) {
4      if (i * j > 30) {
5        return
6      }
7    }
8  }
9  console.log(i) // 这句代码没有机会被执行
10}

为了解决这个问题，我们可以把循环后面的代码放到 return 后面，如果代码比较多，就应该把它们提炼成一个单独的函数

js
1var print = function (i) {
2  console.log(i)
3}
4
5var func = function () {
6  for (var i = 0; i < 10; i++) {
7    for (var j = 0; j < 10; j++) {
8      if (i * j > 30) {
9        return print(i)
10      }
11    }
12  }
13}
14func()

第二十二章 代码重构

第二十二章代码重构