JavaScript代码重构技巧

1. 提炼函数

如果一段代码可以独立来出，那我们最好放进一个独立的函数，这样重构的好处有：

• 避免出现超大函数
• 独立出来的函数有助于代码复用
• 独立出来的函数更容易被重写
• 独立出来的函数如果有一个良好的命名，它本身就起到很好的注释作用

2.合并重复的条件片段

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

// 重构前
var pagin = function(currPage) {
  if (currPage <= 0) {
    currPage = 0;
    jump(currPage);
  } else if (currPage >= totalPage) {
    currPage = totalPage;
    jump(currPage);
  } else {
    jump(currPage);
  }
}
// 重构后
var pagin = function(currPage) {
  if (currPage <= 0) {
    currPage = 0;
  } else if (currPage >= totalPage) {
    currPage = totalPage;
  }
  jump(currPage);
}

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

在程序设计中，复杂的条件分支语句是导致函数难以阅读和理解的重要原因，而且容易导致为一个庞大的函数，下面举个例子：

// 一个夏天打八折的价格计算
var getPrice = function(price) {
  var date = new Date();
  if (date.getMonth() >= 6 && date.getMonth() <= 9) {   // 判断是否为夏天，
    return price * 0.8;
  }
  return price;
}
// 重构代码后
var isSummer = function() {
  var date = new Date();
  return date.getMonth() >= 6 && date.getMonth() <= 9;
}

var getPrice = function(price) {
  if (isSummer()) {
    return price * 0.8;
  } 
  return price;
}

4.合理使用循环

如果一段程序里面有一些重复的工作，那么合理利用循环不仅可以完成同样的功能，还可以使代码量更少，如下代码:

var createXHR = function() {
  var xhr;
  try {
    xhr = new ActionXObject('MSXML2.XMLHttp.6.0');
  } catch(e) {
    try {
      xhr = new ActiveXObject('MSXML2.XMLHttp.3.0');
    } catch(e) {
      xhr = new ActiveXObject('MSXML2.XMLHttp');
    }
  }
  return xhr();
}

var xhr = createXHR();

// 重构后
var createXHR = function() {
  var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
  for (var i = 0, version; version = versions[i++];) {
    try {
      return new ActionXObject(version);
    } catch(e) {

    }
  }
}

var xhr = createXHR();

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

嵌套的条件分支语句绝对是代码维护者的噩梦，对于阅读代码的人来说，嵌套if、else语句相比平铺的if、else，在阅读和理解上更加困难。在实际开发中，如果对函数剩余部分不感兴趣，那就应该立即退出，如下代码：

var del = function(obj) {
  var ret;
  if (!obj.isReadOnly) {
    if (obj.isFolder) {
      ret = deleteFolder(obj);
    } else if (obj.isFile) {
      ret = deleteFile(obj);
    }
  }
  return ret;
}

// 重构后
var del = function(obj) {
  if (obj.isReadOnly) {
    return;
  }
  if (obj.isFolder) {
    return deleteFolder(obj);
  }
  if (obj.isFile) {
    return deleteFolder(obj);
  }
}

6.传递对象参数代替过长的参数列表

有时候一个函数有可能接收多个参数，而参数的数量越多，函数就越难理解和使用。当参数特别多的时候，我们应该用一个对象代替它们，这样就不用关心它们的位置，只要有对应的key就可以。

setUserInfo(1314, 'seven', 'hangzhou', 'male', '1363423423432', 234234234);
// 使用了对象为参数
setUserInfo({
  id: 1314,
  name: 'seven',
  address: 'shangzhou',
  sex: 'male',
  mobile: '1363423423432',
  qq: 234234234
})

7.尽量减少参数的数量

如果调用一个函数时需要传入多个参数，那这个函数就让人望而生畏的，我们必须搞清楚这些参数代表的含义，必须小心翼翼地把它们按照顺序传入该函数。所以在实际开发中应该尽量减少函数接收的参数