JavaScript代码重构的方法有哪些

发布时间:2022-02-08 10:10:29 作者:iii
来源:亿速云 阅读:106

这篇文章主要介绍了JavaScript代码重构的方法有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript代码重构的方法有哪些文章都会有所收获,下面我们一起来看看吧。

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 = totalPage ){
        currPage = totalPage;
        jump( currPage );    // 跳转
    }else{
        jump( currPage );    // 跳转
    }
};

可以看到,负责跳转的代码jump( currPage )在每个条件分支内都出现了,所以完全可以把这句代码独立出来:

var paging = function( currPage ){
    if ( currPage = totalPage ){
        currPage = totalPage;
    }
    jump( currPage );    // 把jump函数独立出来
};

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

在程序设计中,复杂的条件分支语句是导致程序难以阅读和理解的重要原因,而且容易导致一个庞大的函数。假设现在有一个需求是编写一个计算商品价格的getPrice函数,商品的计算只有一个规则:如果当前正处于夏季,那么全部商品将以8折出售。代码如下:

var getPrice = function( price ){
    var date = new Date();
    if ( date.getMonth() >= 6 && date.getMonth() = 6 && date.getMonth() = 6 && date.getMonth() 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();

关于“JavaScript代码重构的方法有哪些”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“JavaScript代码重构的方法有哪些”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. 代码重构规范
  2. JavaScript取整的方法有哪些

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript

上一篇:JavaScript的简写技巧有哪些

下一篇:win7系统怎么关闭兼容性选项

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》