前端代码重构技巧（上）

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

参考javascript设计模式与开发实践

总述

• 提炼函数
• 合并重复的条件片段
• 把条件分支语句提炼成函数
• 合理使用循环
• 提前让函数退出代替嵌套条件分支
• 传递对象代替过长的参数列表
• 尽量减少参数数量
• 少用三目运算符
• 合理使用链式调用
• 利用return退出多重循环

提炼函数

如果函数中有一段代码可以被独立出来，那最好把这些代码放进另外一个独立函数中

let getUserInfo = function(){
    ajax('http://xx.com/getUserInfo',function(data){
        console.log(data.id)
        console.log(data.userName)
        console.log(data.name)
    })
}
// 改造后：
let getUserInfo = function(){
    ajax('http://xx.com/getUserInfo',function( data ){
        printDetail(data)
    })
}
let printDetail = function ( data ){
    console.log(data.id)
    console.log(data.userName)
    console.log(data.name)
}

这样做的好处：

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

合并重复的条件片段

如果在一些条件分支语句中分布着一些重复的代码，那就有必要进行合并去重工作

let paging = function ( currPage ){
    if( currPage <= 0){
        currPage = 0
        jump(currPage)
    }else if( currPage >= totalPage ){
        currPage = totalPage
        jump(currPage)
    }else{
        jump(currPage)
    }
}
//改造后
let paging = function ( currPage ){
    if( currPage <= 0){
        currPage = 0
    }else if( currPage >= totalPage ){
        currPage = totalPage
    }
    jump(currPage) //把jump函数独立出来
}

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

可以把条件分支语句提炼成函数，更易读，函数名本身也起到注释的作用

//在程序设计中，复杂的条件分支语句时导致程序难以理解和阅读的重要原因，而且容易导致一个庞大的函数。下面需求是如果处于夏季，商品价格8折
let getPrice = function ( price ){
    let date = new Date()
    if( date.getMonth() >= 6 && date.getMonth() <= 9){
        return price * 0.8
    }
    return price
}
//改造后
let getPrice = function ( price ){
    if( isSummer()){ //提炼成函数更易读，函数名本身就起到了注释的作用
        return price * 0.8
    }
    return price
}
let isSummer = function (){
    let date = new Date()
    return date.getMonth() >= 6 && date.getMonth() <= 9
}

合理使用循环

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

let createXHR = function(){
    let 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
}
//改造后
let createXHR = function (){
    let versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp']
    for(let i=0,version;version = versions[i++]){
        try{
            return new ActiveXObject(version)
        }catch (e){

        }
    }
}

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

如果对函数的剩余部分不敢兴趣，就应该立即退出，引导阅读者去看没有用的else片段，只会妨碍他们对程序的理解。挑选一些条件分支，在进入这些条件分支后，就立即让函数退出，有一个技巧，面对嵌套的if分支时，可以把外层if表达式反转

let del = function ( obj ){
    let ret;
    if( !obj.isReadOnly){ //不为只读的才能被删除
        if(obj.isFolder){ // 如果为文件夹
            ret = deleteFolder(obj)
        }else if(obj.isFile){ //如果是文件
            ret = deleteFile(obj)
        }
    }
    return ret;
}
//改造后
let del = function ( obj ){
    if(obj.isReadOnly){ //反转if表达式
        return;
    }
    if(obj.isFolder){
        return deleteFolder(obj)
    }
    if(obj.isFile){
        return deleteFile(obj)
    }
}

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

参数越多，函数就越难理解和使用，使用的时候要小心注意参数的数量和位置

let setUserInfo = function ( id,name,age,sex,mobil ){

}
//改造后
let setUserInfo = function ( userInfo ){

}

尽量减少参数数量

//例如下面画正方形函数，其中square面积可以根绝width height计算出来，所以就不必有这个square参数
let draw = function ( width,height,square ){
    //
}

未完待续~