JavaScript代码重构的方法有哪些

JavaScript代码重构的方法有哪些

这篇文章主要介绍了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代码重构的方法有哪些”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注高防服务器网行业资讯频道。

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[