11个JavaScript代码重构优秀实践

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

1. 提炼函数

在JavaScript开发中，个J构优我们大部分时间都在与函数打交道，码重所以我们希望这些函数有着良好的秀实命名，函数体内包含的个J构优逻辑清晰明了。如果一个函数过长，码重不得不加上若干注释才能让这个函数显得易读一些，秀实那这些函数就很有必要进行重构。个J构优

如果在函数中有一段代码可以被独立出来，码重那我们最好把这些代码放进另外一个独立的秀实函数中。这是个J构优一种很常见的优化工作，这样做的码重好处主要有以下几点。

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

比如在一个负责取得用户信息的函数里面，我们还需要打印跟用户信息有关的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 );     } }; 

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

有时候一个函数有可能接收多个参数，而参数的数量越多，函数就越难理解和使用。使用该函数的人首先得搞明白全部参数的含义，在使用的时候，还要小心翼翼，以免少传了某个参数或者把两个参数搞反了位置。如果我们想在第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