美文网首页
代码重构(一)

代码重构(一)

作者: zhao_ran | 来源:发表于2022-10-30 16:14 被阅读0次

    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 );    // 把jump函数独立出来
            };
    

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

    在程序设计中,复杂的条件分支语句是导致程序难以阅读和理解的重要原因,而且容易导致一个庞大的函数。假设现在有一个需求是编写一个计算商品价格的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;
            };
    

    4.合理使用循环

    在函数体内,如果有些代码实际上负责的是一些重复性的工作,那么合理利用循环不仅可以完成同样的功能,还可以使代码量更少。下面有一段创建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();
    

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

    相关文章

      网友评论

          本文标题:代码重构(一)

          本文链接:https://www.haomeiwen.com/subject/hfrctdtx.html