模式与重构之间有着一种与生俱来的关系。从某种角度来说，设计模式的目的就是为了许多重构行为提供目标，此节会提出一些重构的目标和手段，这些都是建议
1、提炼函数
在一个Javascript程序中，程序员大部分时间都在与函数打交道，在编写函数的过程中，希望函数有良好的命名，函数体内包含的逻辑清晰明了。如果一个函数过长，不得不加上若干个注释才能让这个函数显得易读一些，那这些函数就很有必要进行重构
如果一个函数中有一段代码可以被独立出来，那么最好把这些代码放进另外一个独立的函数中，这样做的好处有以下几点：
- 避免出现超大函数
- 独立出来的函数有助于代码复用
- 独立出来的函数更容易被覆写
- 独立出来的函数如果有一个良好的命名，它本身就起到了注释的作用
例子：比如在一个负责取得用户信息的函数里面，还需要打印跟用户信息相关的log，那么打印log的语句就可以背封装在一个独立的函数里
var getUserInfo = function () {
ajax("http://xxx.com/userInfo", function (data) {
console.log("userId: " + data.userId);
console.log("userName: " + data.userName);
console.log("nickName: " + data.nickName);
});
};
// 改成
var getUserInfo = function () {
ajax("http://xxx.com/userInfo", function (data) {
printDetails(data);
});
};
var printDetails = function (data) {
console.log("userId: " + data.userId);
console.log("userName: " + data.userName);
console.log("nickName: " + data.nickName);
};
2、合并重复的条件片段
如果一个函数体内有一些条件分支语句，而这些条件分支语句内部有一些重复的代码，那么就有必要进行合并去重工作
例子：假如有个分页函数paging，该函数接受一个参数currPage，currPage表示即将跳转的页码。在跳转之前，为防止currPage传入过小或者过大的数字，我们要手动的对它的值进行修正，代码如下：
var paging = function (currPage) {
if (currPage <= 0) {
currPage = 0;
jump(currPage);
} else if (currPage >= totalPage) {
currPage = totalPage;
jump(currPage);
} else {
jump(currPage);
}
};
可以看到，负责跳转的代码jump(currPage)在每个条件分支内部都出现了，所以完全可以把这句代码独立出来
var paging = function (currPage) {
if (currPage <= 0) {
currPage = 0;
} else if (currPage >= totalPage) {
currPage = totalPage;
}
jump(currPage);
};
3、把条件分支语句提炼成函数
在程序设计中，复杂的条件分支语句是导致程序难以阅读和理解的重要原因，而且容易导致一个庞大的函数。
例子：假设现在有一个需求是编写一个计算商品价格的getPrice函数，商品的计算只有一个规则：如果当前正处于夏季，那么全部商品将以8折出售。代码如下：
var getPrice = function (price) {
var date = new Date();
if (date.getMonth() >= 6 && date.getMonth() <= 9) {
// 夏天
return price * 0.8;
}
return price;
};
观察判断夏天的代码，尽管这句代码很短小，但代码表达的意图和代码自身还存在一些距离，阅读代码的人必须多花一些精力才能明白它传达的意图。其实可以把这句代码提炼成一个单独的函数，既能更准确的表达代码的意思，函数名本身又能起到注释的作用，如下：
var getPrice = function (price) {
var date = new Date();
if (isSummer()) {
return price * 0.8;
}
return price;
};
var isSummer = function () {
var date = new Date();
return date.getMonth() >= 6 && date.getMonth() <= 9;
};
4、合理使用循环
在函数体内，如果有一些代码实际上负责的是一些重复性的工作，那么合理使用循环不仅可以完成同样的功能，还可以使代码量更少。
例子：有一段创建XHR对象的代码，为了简化示例，代码如下：
var createXHR = function () {
var xhr;
try {
xhr = new ActiveXObject("MSXML2.XMLHttp6.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.0ddd", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
for (var i = 0, version; (version = versions[i++]); ) {
try {
return new ActiveXObject(version);
} catch (e) {}
}
};
var xhr = createXHR();
5、提前让函数退出代替嵌套条件分支
许多程序员都有这样一种观念：每个函数只能有一个入口和一个出口。现代编程语言都会限制函数只有一个入口。但关于函数只有一个出口，往往会有一些不同的看法。
例子：下面这段代码是遵循函数只有一个出口的典型代码：
var del = function (obj) {
var ret;
if (!obj.isReadOnly) {
// 不为只读的才能被删除
if (obj.isFolder) {
// 如果是文件夹
ret = deleteFolder(obj);
} else if (obj.isFile) {
// 如果是文件
ret = deleteFile(obj);
}
}
return ret;
};
嵌套的条件分支语句绝对是代码维护者的噩梦，对于阅读代码的人来说，嵌套的if、else语句相比平铺的if、else语句在阅读和理解上更加困难，有时候一个外层的if分支的左括号和右括号之间相隔500米之远。
于是可以挑选一个条件分支，在进入这些条件分支之后，就立即让这个函数退出。要做到这一点，有一个常见的技巧，即在面对一个嵌套的if分支时，可以把外层的if表达式进行反转。重构后的del函数如下：
var del = function (obj) {
if (obj.isReadOnly) {
// 反转if表达式
return;
}
if (obj.isFolder) {
return deleteFolder(obj);
}
if (obj.isFile) {
return deleteFile(obj);
}
};
6、传递对象参数代替过长的参数列表
有时候一个函数有可能接受多个参数，而参数的数量越多，函数就越难理解和使用。使用该函数的人首先得搞明白全部参数的含义，在使用的时候，还要小心翼翼，以免少传了某个参数或者把两个参数的位置搞反了。
例子：有以下代码，如果我们想在第3个参数和第4个参数之中增加一个新的参数，就会涉及到许多代码的修改，如下：
var setUserInfo = function (id, name, address, sex, mobile, qq) {
console.log("id= ", id);
console.log("name= ", name);
console.log("address= ", address);
console.log("sex= ", sex);
console.log("mobile= ", mobile);
console.log("qq= ", qq);
};
setUserInfo(1, "xiaoxu", "shanghai", "男", 1231221213, "qq.com");
这时候我们可以把参数都放在一个对象内，然后把该对象传入setUserInfo函数，setUserInfo函数需要的数据可以自行从该对象里获取，而且不用关心参数的顺序和数量，只要保证参数对应的key值不变就可以了
var setUserInfo = function (obj) {
console.log("id= ", obj.id);
console.log("name= ", obj.name);
console.log("address= ", obj.address);
console.log("sex= ", obj.sex);
console.log("mobile= ", obj.mobile);
console.log("qq= ", obj.qq);
};
setUserInfo({
id: 1,
name: "xiaoxu",
address: "shanghai",
sex: "male",
mobile: 1234131,
qq: "qq.com",
});
7、尽量减少参数数量
如果调用一个函数时需要传入多个参数，那这个函数时让人望而生畏的，我们必须搞清楚这些参数代表的含义，必须小心翼翼的把它们按照顺序传入该函数。而如果一个函数不需要传入任何参数就可以使用，这种函数是深受喜爱的，但是在实际开发中，向函数传递参数不可避免，但我们应该尽量的减少函数接收的参数数量。
例子：有一个画图函数draw，它现在只能绘制正方形，接收了3个参数，分别是图形的width、height以及square:
var draw = function(width, height, square){};
但实际上正方形的面积是可以通过width和height计算出来的，于是可以把参数square从函数中去掉：
var draw = function(width, height){
var square = width * height;
}
假设以后这个函数draw函数开始支持绘制图形，我们需要把参数width和height换成半径为radius，但图形的面积square始终不应该由客户传入，而是应该在draw函数内部，由传入的参数加一定的规则计算得来的。此时，我们可以使用策略模式，让draw函数称为一个支持绘制多种图形的函数。
var draw = function (type, ...args) {
return calcuateArea[type](...args);
};
var calcuateArea = {
square: function (width, height) {
return width * height;
},
circle: function (radius) {
return radius * radius * Math.PI;
},
};
8、少用三目运算符
有一些程序员喜欢大量使用三目运算符来代替传统的if、else。理由是三目运算符性能高，代码量少。不过这两个理由其实都很难站得住脚跟。
即使我们假设三目运算符的效率真的比if、else高，这点儿差距也是完全可以忽略不计的。在实际的开发中，即使把一段代码循环一百万次，使用三目运算符和使用if、else的时间开销处在同一个级别里
同样，相比损失的代码可读性和可维护性，三目运算符节省的代码量也可以忽略不计。让JS文件加载更快的办法有很多种，如压缩、缓存、使用CDN和分域等。
如果条件分支逻辑简单清晰，这无碍使用三目运算符：
var global = typeof window !== 'undefined' ? window : this;
但如果条件分支逻辑非常复杂，如下段代码所示，那么最好的选择还是按部就班的编写if、else。其语句的好处很多，一是阅读相对容易，二是修改的时候比修改三目运算符周围的代码更加方面：
if (!aup || !bup) {
return a === doc
? -1
: b === doc
? 1
: aup
? -1
: bup
? 1
: sortInput
? indexOf.call(sortInput, a) - indexOf.call(sortInput, b)
: 0;
}
9、合理使用链式调用
经常使用jQuery的程序员相当习惯链式调用方法，在JavaScript中，很容易的实现方法的链式调用，即让方法调用结束后返回对象本身，如下所示：
var User = function () {
this.id = null;
this.name = null;
};
User.prototype.setId = function (id) {
this.id = id;
return this;
};
User.prototype.setName = function (name) {
this.name = name;
return this;
};
new User().setId(1).setName("xiaoxu");
使用链式调用的方式并不会造成太多阅读上的困难，也确实能省下一些字符和中间变量，但节省下来的字符数量同样是微不足道的。链式调用带来的坏处就是在调试的时候非常不方面，如果我们知道一条链中有错误出现，必须得先把这条链拆开才能加上一些调试的log或者增加断点，这样才能定位错误出现的地方
如果链式的结构相对稳定，后期不容易发生修改，那么使用链式调用无可厚非。但如果该链条很容易发生变化，导致调试和维护困难，那么还是建议使用普通调用的形式：
var user = new User();
user.setId(1);
user.setName("xiaoxu");
10、分解大型类
例如某一款游戏中，负责创建游戏人物的Spirit类非常庞大，不仅要负责创建人物精灵，还包括了任务的攻击、防御等动作方法，代码如下：
var Spirit = function (name) {
this.name = name;
};
Spirit.prototype.attack = function (type) {
// 攻击
if (type === "waveBoxing") {
console.log(this.name + "：使用波动拳");
} else if (type === "whirlKick") {
console.log(this.name + "：使用旋风腿");
}
};
var spirit = new Spirit("RYU");
spirit.attack("waveBoxing");
spirit.attack("whirlKick");
后来发现，Spirit.prototype.attack这个方法实在是太庞大了，实际上它完全有必要作为一个单独的类存在。面向对象设计鼓励将行为分布在合理数量的更小的对象之中：
var Attack = function (spirit) {
this.spirit = spirit;
};
Attack.prototype.start = function (type) {
return this.list[type].call(this);
};
Attack.prototype.list = {
waveBoxing: function () {
console.log(this.spirit.name + "：使用波动拳");
},
whirlKick: function () {
console.log(this.spirit.name + "：使用旋风腿");
},
};
现在的Spirit类变得精简了很多，不在包括各种各样的攻击方法，而是把攻击委托给Attack类的攻击对象来执行，这段代码也是策略模式的运用之一：
var Spirit = function (name) {
this.name = name;
this.attackObj = new Attack(this);
};
Spirit.prototype.attack = function (type) {
this.attackObj.start(type);
};
var spirit = new Spirit("RYU");
spirit.attack("waveBoxing");
spirit.attack("whirlKick");
11、用return退出多重循环
假设在函数体内有一个两重循环语句，我们需要在内层循环中判断，当到达某个临界条件时退出外层循环。大多数时候会引入一个控制变量：
var func = function () {
var flag = false;
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
if (i * j > 30) {
flag = true;
break;
}
}
if (flag === true) {
break;
}
}
};
这种做法很让人头晕目眩，更简单的做法是在需要终止循环的时候直接退出整个方法：
var func = function () {
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
if (i * j > 30) {
return;
}
}
}
};
当然使用return直接退出方法会带来一个问题，如果在循环之后还有一些将被执行的代码呢？如果我们直接退出了整个方法，这些代码就不会得到执行的机会：
var func = function () {
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
if (i * j > 30) {
return;
}
}
}
console.log(i) // 这段代码不会被执行
};
为了解决这个问题，可以把循环后面的代码直接放到return语句后面，如果代码比较多，就应该把它们提炼成一个单独的函数：
var func = function () {
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
if (i * j > 30) {
return print(i);
}
}
}
};
var print = function (i) {
console.log(i);
};
至此，一些重构代码的技巧和方法仅供参考，出处来源于《JavaScript设计与模式》一书中。
