高防服务器

JavaScript代码重构的方法有哪些


JavaScript代码重构的方法有哪些

发布时间:2022-02-08 10:10:29 来源:高防服务器网 阅读:50 作者:iii 栏目:开发技术

这篇文章主要介绍了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 成本,提升运维效率,使您更专注于核心业务创新。

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