在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 );
};
如果一个函数体内有一些条件分支语句,而这些条件分支语句内部散布了一些重复的代码,那么就有必要进行合并去重工作。
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 ); // 把jump函数独立出来
};
复杂的条件语句是导致程序难以阅读和理解的重要原因,而且容易导致一个庞大的函数。
假设现在有一个需求是编写一个计算商品价格的getPrice函数,商品的计算只有一个规则:如果当前正处于夏季,那么商品可以以8折出售。
代码如下:
var getPrice = function( price ){
var date = new Date();
if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ // 夏天
return price * 0.8;
}
return price;
};
观察这句代码:
if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){
// ...
}
这句代码要表达的意思很简单,就是判断当前是否处于夏天(7-9月)。尽管这句代码很短,但代码要表达的意图和代码自身还存在很大的距离,阅读代码的人可能要多花一点时间才能明白它要传达的意图。其实可以把这句代码提炼成一个单独的函数,既能更准确表达代码的意思,函数名还可以起到注释的作用。
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;
};
在函数体内,如果有些代码实际上负责的是重复性的工作,那么合理利用循环不仅可以完成同样的功能,还可以让代码更少。
var createXHR = function(){
var xhr;
try{
xhr = new Object( 'MSXML2.XMLHttp.6.0' );
}catch(e){
try{
xhr = new Object( 'MSXML2.XMLHttp.3.0' );
}catch(e){
xhr = new Object( 'MSXML2.XMLHttp' );
}
}
return xhr;
};
var xhr = createXHR();
上面的一段try…catch可以灵活运用循环,达到一样的效果
var createXHR = function() {
var versions = ['MSXML2.XMLHttp.6.0ddd', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
for (let version of versions) {
try {
return new Object(version);
} catch (e) {}
}
};
var xhr = createXHR();
console.log(xhr) //"MSXML2.XMLHttp.6.0ddd"
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更加难理解。用《重构》里的话说,嵌套的条件分支往往是深信“每个函数都只能有一个出口的”程序员写的,实际上,如果对函数的剩余部分不感兴趣,那就应该立即退出。引导阅读者去看没用的else片段,只会妨碍他们对程序的理解。
于是我们可以挑选一些条件分支,在进入这些条件分支之后,就立即让这个函数退出。要做到这一点,有一个常见的技巧,即在面对一个嵌套的if分支时,我们可以把外层if表达式进行反转。重构后的del函数如下:
var del = function( obj ){
if ( obj.isReadOnly ){ // 反转if表达式
return;
}
if ( obj.isFolder ){
return deleteFolder( obj );
}
if ( obj.isFile ){
return deleteFile( obj );
}
};
有时候一个函数可能接收多个参数,而参数的数量越多,函数就越难理解和使用。使用函数的人首先要搞明白全部参数的含义,在使用中还需要小心翼翼以免传错位置或者传少了。
如果我们想在第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( 1314, 'sven', 'shenzhen', 'male', '137********', 377876679 );
这时我们可以把参数都放入一个对象内,然后把该对象传入setUserInfo函数,setUserInfo函数需要的数据可以自行从该对象里获取。现在不用再关心参数的数量和顺序,只要保证参数对应的key值不变就可以了:
var setUserInfo = function (obj) {
const { id, name, address, sex, mobile, qq } = obj;
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({
id: 1314,
name: "sven",
address: "shenzhen",
sex: "male",
mobile: "137********",
qq: 377876679
});
如果调用一个函数时需要传入多个参数,那这个函数是让人望而生畏的,而如果一个函数不需要传入任何参数就可以使用,这种函数是深受人们喜爱的。
在实际开发中,向函数传递参数不可避免,但我们应该尽量减少函数接收的参数数量。下面举个非常简单的示例。有一个画图函数draw,它现在只能绘制正方形,接收了3个参数,分别是图形的width、heigth以及square。
var draw = function( width, height, square ){};
但实际上正方形的面积是可以通过width和height计算出来的,于是我们可以把参数square从draw函数中去掉:
var draw = function( width, height ){
var square = width * height;
};
假设以后这个draw函数开始支持绘制圆形,我们需要把参数width和height换成半径radius,但图形的面积square始终不应该由客户传入,而是应该在draw函数内部,由传入的参数加上一定的规则计算得来。
有一些程序员喜欢大规模地使用三目运算符,来代替传统的if、else。理由是三目运算符性能高,代码量少。不过,这两个理由其实都很难站得住脚。
即使我们假设三目运算符的效率真的比if、else高,这点差距也是完全可以忽略不计的。在实际的开发中,即使把一段代码循环一百万次,使用三目运算符和使用if、else的时间开销处在同一个级别里。
同样,相比损失的代码可读性和可维护性,三目运算符节省的代码量也可以忽略不计。
如果条件分支逻辑简单且清晰,这无碍我们使用三目运算符
var global = typeof window ! == "undefined" ? window : this;
但如果条件分支逻辑非常复杂,如下段代码所示,那我们最好的选择还是按部就班地编写if、else。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;
}
经常使用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;
};
console.log( new User().setId( 1314 ).setName( 'sven' ) );
使用链式调用的方式并不会造成太多阅读上的困难,也确实能省下一些字符和中间变量,但节省下来的字符数量同样是微不足道的。
链式调用带来的坏处就是在调试的时候非常不方便,如果我们知道一条链中有错误出现,必须得先把这条链拆开才能加上一些调试log或者增加断点,这样才能定位错误出现的地方。
如果该链条的结构相对稳定,后期不易发生修改,那么使用链式调用无可厚非。但如果该链条很容易发生变化,导致调试和维护困难,那么还是建议使用普通调用的形式:
var user = new User();
user.setId( 1314 );
user.setName( 'sven' );
下面是一段模拟游戏的代码,负责创建游戏人物的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' ); // 输出:RYU:使用波动拳
spirit.attack( 'whirlKick' ); // 输出:RYU:使用旋风腿
Spirit.prototype.attack这个方法实现是太庞大了,实际上它完全有必要作为一个单独的类存在。面向对象设计鼓励将行为分布在合理数量的更小对象之中:
const attack = {
waveBoxing: function (name) {
console.log(this.name + ":使用波动拳");
},
whirlKick: function (name) {
console.log(this.name + ":使用旋风腿");
}
};
var Spirit = function (name) {
this.name = name;
};
Spirit.prototype.attack = function (type) {
// 攻击
attack[type](this.name);
};
var spirit = new Spirit("RYU");
spirit.attack("waveBoxing"); // 输出:RYU:使用波动拳
spirit.attack("whirlKick");
现在的Spirit类变得精简了很多,不再包括各种各样的攻击方法,而是把攻击动作委托给attack对象来执行,这段代码也是策略模式的运用之一。
假设在函数体内有一个两重循环语句,我们需要在内层循环中判断,当达到某个临界条件时退出外层的循环。我们大多数时候会引入一个控制标记变量。
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(){
outerloop:
for ( var i = 0; i < 10; i++ ){
innerloop:
for ( var j = 0; j < 10; j++ ){
if ( i * j >30 ){
break outerloop;
}
}
}
};
这两种做法无疑都让人头晕目眩,更简单的做法是在需要中止循环的时候直接退出整个方法:
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 print = function( i ){
console.log( i );
};
var func = function(){
for ( var i = 0; i < 10; i++ ){
for ( var j = 0; j < 10; j++ ){
if ( i * j >30 ){
return print( i );
}
}
}
};
func();