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