🧲 11个JavaScript代码重构最佳实践

模式和重构之间有着一种与生俱来的关系从某种角度来看设计模式的目的就是为许多重构行为提供目标

提炼函数

在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 );
};

合并重复的条件片段

如果一个函数体内有一些条件分支语句而这些条件分支语句内部散布了一些重复的代码那么就有必要进行合并去重工作假如我们有一个分页函数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 );    // 把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~10月）尽管这句代码很短小但代码表达的意图和代码自身还存在一些距离阅读代码的人必须要多花一些精力才能明白它传达的意图其实可以把这句代码提炼成一个单独的函数既能更准确地表达代码的意思函数名本身又能起到注释的作用代码如下

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;
};

合理使用循环

在函数体内如果有些代码实际上负责的是一些重复性的工作那么合理利用循环不仅可以完成同样的功能还可以使代码量更少下面有一段创建XHR对象的代码为了简化示例我们只考虑版本9以下的IE浏览器代码如下

var createXHR = function(){
    var xhr;
    try{
        xhr = new ActiveXObject( '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.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();

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

许多程序员都有这样一种观念 “每个函数只能有一个入口和一个出口 ”现代编程语言都会限制函数只有一个入口但关于“函数只有一个出口” 往往会有一些不同的看法
下面这段伪代码是遵守“函数只有一个出口的”的典型代码

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米之远用《重构》里的话说嵌套的条件分支往往是由一些深信“每个函数只能有一个出口的”程序员写出的但实际上如果对函数的剩余部分不感兴趣那就应该立即退出引导阅读者去看一些没有用的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( 1024, 'xuan', 'shantou', 'boy', '135********', '1024340498' )

这时我们可以把参数都放入一个对象内然后把该对象传入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: 1024,
    name: 'xuan',
    address: 'shantou',
    sex: 'boy',
    mobile: '135********',
    qq: '1024340498'
});

尽量减少参数数量

如果调用一个函数时需要传入多个参数那这个函数是让人望而生畏的我们必须搞清楚这些参数代表的含义必须小心翼翼地把它们按照顺序传入该函数而如果一个函数不需要传入任何参数就可以使用这种函数是深受人们喜爱的在实际开发中向函数传递参数不可避免但我们应该尽量减少函数接收的参数数量下面举个非常简单的示例有一个画图函数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函数内部由传入的参数加上一定的规则计算得来此时我们可以使用策略模式让draw函数成为一个支持绘制多种图形的函数

少用三目运算符

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

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

同样相比损失的代码可读性和可维护性三目运算符节省的代码量也可以忽略不计让JS文件加载更快的办法有很多种如压缩、缓存、使用CDN和分域名等把注意力只放在使用三目运算符节省的字符数量上无异于一个300斤重的人把超重的原因归罪于头皮屑

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

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( 1024 ).setName( 'xuan' ) );

或者

var User = {
    id: null,
    name: null,
    setId: function( id ){
        this.id = id;
        return this;
    },
    setName: function( name ){
        this.name = name;
        return this;
    }
};
console.log( User.setId( 1024 ).setName( 'xuan' ) );

使用链式调用的方式并不会造成太多阅读上的困难也确实能省下一些字符和中间变量但节省下来的字符数量同样是微不足道的链式调用带来的坏处就是在调试的时候非常不方便如果我们知道一条链中有错误出现必须得先把这条链拆开才能加上一些调试log或者增加断点这样才能定位错误出现的地方

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

var user = new User();
user.setId( 1024 );
user.setName( 'xuan' );

分解大型类

在HTML5版“街头霸王”的第一版代码中负责创建游戏人物的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这个方法实现是太庞大了实际上它完全有必要作为一个单独的类存在面向对象设计鼓励将行为分布在合理数量的更小对象之中

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' );    // 输出 RYU: 使用波动拳
spirit.attack( 'whirlKick' );    // 输出 RYU: 使用旋风

用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(){
    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();