• 售前

  • 售后

热门帖子
入门百科

了不得的11个JavaScript代码重构最佳实践小结

[复制链接]
千无情实 显示全部楼层 发表于 2021-10-25 19:08:16 |阅读模式 打印 上一主题 下一主题
目次


  • 1.提炼函数
  • 2.归并重复的条件片断
  • 3.把条件分支语句提炼成函数
  • 4.公道利用循环
  • 5.提前让函数退出代替嵌套条件分支
  • 6.传递对象参数代替过长的参数列表
  • 7.只管减少参数数量
  • 8.少用三目运算符
  • 9.公道利用链式调用
  • 10.分解大型类
  • 11.用return退出多重循环
模式和重构之间有着一种与生俱来的关系。从某种角度来看,计划模式的目的就是为许多重构活动提供目的。


1.提炼函数


在JavaScript开发中,我们大部分时间都在与函数打交道,以是我们盼望这些函数有着精良的命名,函数体内包含的逻辑清楚明了。如果一个函数过长,不得不加上多少注释才气让这个函数显得易读一些,那这些函数就很有必要举行重构。
如果在函数中有一段代码可以被独立出来,那我们最好把这些代码放进另外一个独立的函数中。这是一种很常见的优化工作,如许做的长处主要有以下几点。
      
  • 避免出现超大函数。  
  • 独立出来的函数有助于代码复用。  
  • 独立出来的函数更轻易被覆写。  
  • 独立出来的函数如果拥有一个精良的命名,它本身就起到了注释的作用。
好比在一个负责取得用户信息的函数内里,我们还需要打印跟用户信息有关的log,那么打印log的语句就可以被封装在一个独立的函数里:
  1. var getUserInfo = function(){
  2.   ajax( 'http:// xxx.com/userInfo', function( data ){
  3.     console.log( 'userId: ' + data.userId );
  4.     console.log( 'userName: ' + data.userName );
  5.     console.log( 'nickName: ' + data.nickName );
  6.   });
  7. };
复制代码
改成:
  1. var getUserInfo = function(){
  2.   ajax( 'http:// xxx.com/userInfo', function( data ){
  3.     printDetails( data );
  4.   });
  5. };
  6. var printDetails = function( data ){
  7.   console.log( 'userId: ' + data.userId );
  8.   console.log( 'userName: ' + data.userName );
  9.   console.log( 'nickName: ' + data.nickName );
  10. };
复制代码
2.归并重复的条件片断


如果一个函数体内有一些条件分支语句,而这些条件分支语句内部散布了一些重复的代码,那么就有必要举行归并去重工作。如果我们有一个分页函数paging,该函数吸取一个参数currPage,currPage表示即将跳转的页码。在跳转之前,为防止currPage传入过小或者过大的数字,我们要手动对它的值举行修正,详见如下伪代码:
  1. var paging = function( currPage ){
  2.   if ( currPage <= 0 ){
  3.     currPage = 0;
  4.     jump( currPage );  // 跳转
  5.   }else if ( currPage >= totalPage ){
  6.     currPage = totalPage;
  7.     jump( currPage );  // 跳转
  8.   }else{
  9.     jump( currPage );  // 跳转
  10.   }
  11. };
复制代码
可以看到,负责跳转的代码jump( currPage )在每个条件分支内都出现了,以是完全可以把这句代码独立出来:
  1. var paging = function( currPage ){
  2.   if ( currPage <= 0 ){
  3.     currPage = 0;
  4.   }else if ( currPage >= totalPage ){
  5.     currPage = totalPage;
  6.   }
  7.   jump( currPage );  // 把jump函数独立出来
  8. };
复制代码
3.把条件分支语句提炼成函数


在步调计划中,复杂的条件分支语句是导致步调难以阅读和理解的紧张缘故原由,而且轻易导致一个巨大的函数。假设现在有一个需求是编写一个计算商品代价的getPrice函数,商品的计算只有一个规则:如果当前正处于夏季,那么全部商品将以8折出售。代码如下:
  1. var getPrice = function( price ){
  2. var date = new Date();
  3. if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){  // 夏天
  4. return price * 0.8;
  5. }
  6. return price;
  7. };
复制代码
观察这句代码:
  1. if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){
  2. // ...
  3. }
复制代码
这句代码要表达的意思很简单,就是判定当前是否正处于炎天(7~10月)。尽管这句代码很短小,但代码表达的意图和代码自身还存在一些距离,阅读代码的人必须要多花一些精力才气明确它传达的意图。其实可以把这句代码提炼成一个单独的函数,既能更正确地表达代码的意思,函数名本身又能起到注释的作用。代码如下:
  1. var isSummer = function(){
  2.   var date = new Date();
  3.   return date.getMonth() >= 6 && date.getMonth() <= 9;
  4. };
  5. var getPrice = function( price ){
  6.   if ( isSummer() ){  // 夏天
  7.     return price * 0.8;
  8.   }
  9.   return price;
  10. };
复制代码
4.公道利用循环


在函数体内,如果有些代码实际上负责的是一些重复性的工作,那么公道利用循环不仅可以完成同样的功能,还可以使代码量更少。下面有一段创建XHR对象的代码,为了简化示例,我们只考虑版本9以下的IE欣赏器,代码如下:
  1. var createXHR = function(){
  2.   var xhr;
  3.   try{
  4.     xhr = new ActiveXObject( 'MSXML2.XMLHttp.6.0' );
  5.   }catch(e){
  6.     try{
  7.       xhr = new ActiveXObject( 'MSXML2.XMLHttp.3.0' );
  8.     }catch(e){
  9.       xhr = new ActiveXObject( 'MSXML2.XMLHttp' );
  10.     }
  11.   }
  12.   return xhr;
  13. };
  14. var xhr = createXHR();
  15. ``
  16. 下面我们灵活地运用循环,可以得到跟上面代码一样的效果:
  17. ```js
  18. var createXHR = function(){
  19. var versions= [ 'MSXML2.XMLHttp.6.0ddd', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp' ];
  20.   for ( var i = 0, version; version = versions[ i++ ]; ){
  21.     try{
  22.       return new ActiveXObject( version );
  23.     }catch(e){
  24.     }
  25.   }
  26. };
  27. var xhr = createXHR();
复制代码
5.提前让函数退出代替嵌套条件分支


许多步调员都有如许一种观念:“每个函数只能有一个入口和一个出口。”现代编程语言都会限制函数只有一个入口。但关于“函数只有一个出口”,每每会有一些差别的看法。

下面这段伪代码是遵守“函数只有一个出口的”的典范代码:
  1. var del = function( obj ){
  2.   var ret;
  3.   if ( !obj.isReadOnly ){  // 不为只读的才能被删除
  4.     if ( obj.isFolder ){  // 如果是文件夹
  5.       ret = deleteFolder( obj );
  6.     }else if ( obj.isFile ){  // 如果是文件
  7.       ret = deleteFile( obj );
  8.     }
  9.   }
  10.   return ret;
  11. };
复制代码
嵌套的条件分支语句绝对是代码维护者的噩梦,对于阅读代码的人来说,嵌套的if、else语句相比平铺的if、else,在阅读和理解上更加困难,有时间一个外层if分支的左括号和右括号之间相隔500米之远。用《重构》里的话说,嵌套的条件分支每每是由一些深信“每个函数只能有一个出口的”步调员写出的。但实际上,如果对函数的剩余部分不感兴趣,那就应该立即退出。引导阅读者去看一些没有用的else片断,只会妨碍他们对步调的理解。

于是我们可以挑选一些条件分支,在进入这些条件分支之后,就立即让这个函数退出。要做到这一点,有一个常见的本领,即在面对一个嵌套的if分支时,我们可以把外层if表达式举行反转。重构后的del函数如下:
  1. var del = function( obj ){
  2.   if ( obj.isReadOnly ){  // 反转if表达式
  3.     return;
  4.   }
  5.   if ( obj.isFolder ){
  6.     return deleteFolder( obj );
  7.   }
  8.   if ( obj.isFile ){
  9.     return deleteFile( obj );
  10.   }
  11. };
复制代码
6.传递对象参数代替过长的参数列表


有时间一个函数有大概吸取多个参数,而参数的数量越多,函数就越难理解和利用。利用该函数的人首先得搞明确全部参数的含义,在利用的时间,还要警惕翼翼,以免少传了某个参数或者把两个参数搞反了位置。如果我们想在第3个参数和第4个参数之中增长一个新的参数,就会涉及许多代码的修改,代码如下:
  1. var setUserInfo = function( id, name, address, sex, mobile, qq ){
  2.   console.log( 'id= ' + id );
  3.   console.log( 'name= ' +name );
  4.   console.log( 'address= ' + address );
  5.   console.log( 'sex= ' + sex );
  6.   console.log( 'mobile= ' + mobile );
  7.   console.log( 'qq= ' + qq );
  8. };
  9. setUserInfo( 1314, 'sven', 'shenzhen', 'male', '137********', 377876679 );
复制代码
这时我们可以把参数都放入一个对象内,然后把该对象传入setUserInfo 函数,setUserInfo函数需要的数据可以自行从该对象里获取。现在不消再关心参数的数量和次序,只要包管参数对应的key值稳定就可以了:
  1. var setUserInfo = function( obj ){
  2.   console.log( 'id= ' + obj.id );
  3.   console.log( 'name= ' + obj.name );
  4.   console.log( 'address= ' + obj.address );
  5.   console.log( 'sex= ' + obj.sex );
  6.   console.log( 'mobile= ' + obj.mobile );
  7.   console.log( 'qq= ' + obj.qq );
  8. };
  9. setUserInfo({
  10.   id: 1314,
  11.   name: 'sven',
  12.   address: 'shenzhen',
  13.   sex: 'male',
  14.   mobile: '137********',
  15.   qq: 377876679
  16. });
复制代码
7.只管减少参数数量


如果调用一个函数时需要传入多个参数,那这个函数是让人望而生畏的,我们必须搞清楚这些参数代表的含义,必须警惕翼翼地把它们按照次序传入该函数。而如果一个函数不需要传入任何参数就可以利用,这种函数是深受人们喜好的。在实际开发中,向函数传递参数不可避免,但我们应该只管减少函数吸取的参数数量。下面举个非常简单的示例。有一个画图函数draw,它现在只能绘制正方形,吸取了3个参数,分别是图形的width、heigth以及square:
  1. var draw = function( width, height, square ){};
复制代码
但实际上正方形的面积是可以通过width和height计算出来的,于是我们可以把参数square从draw函数中去掉:
  1. var draw = function( width, height ){
  2.   var square = width * height;
  3. };
复制代码
假设以后这个draw函数开始支持绘制圆形,我们需要把参数width和height换成半径radius, 但图形的面积square始终不应该由客户传入,而是应该在draw函数内部,由传入的参数加上一定的规则计算得来。此时,我们可以利用计谋模式,让draw函数成为一个支持绘制多种图形的函数。


8.少用三目运算符


有一些步调员喜欢大规模地利用三目运算符,来代替传统的if、else。来由是三目运算符性能高,代码量少。不过,这两个来由其实都很难站得住脚。

即使我们假设三目运算符的服从真的比if、else高,这点差距也是完全可以忽略不计的。在实际的开发中,即使把一段代码循环一百万次,利用三目运算符和利用if、else的时间开销处在同一个级别里。
同样,相比丧失的代码可读性和可维护性,三目运算符节流的代码量也可以忽略不计。让JS文件加载更快的办法有许多种,如压缩、缓存、利用CDN和分域名等。把留意力只放在利用三目运算符节流的字符数量上,无异于一个300斤重的人把超重的缘故原由归罪于头皮屑。

如果条件分支逻辑简单且清楚,这无碍我们利用三目运算符:
  1. var global = typeof window !== "undefined" ? window : this;
复制代码
但如果条件分支逻辑非常复杂,如下段代码所示,那我们最好的选择还是按部就班地编写if、else。if、else语句的长处许多,一是阅读相对轻易,二是修改的时间比修改三目运算符四周的代码更加方便:
  1. if ( !aup || !bup ) {
  2.   return a === doc ? -1 :
  3.     b === doc ? 1 :
  4.     aup ? -1 :
  5.     bup ? 1 :
  6.     sortInput ?
  7.     ( indexOf.call( sortInput, a ) - indexOf.call( sortInput, b ) ) :
  8.     0;
  9. }
复制代码
9.公道利用链式调用


经常利用jQuery的步调员相称习惯链式调用方法,在JavaScript中,可以很轻易地实现方法的链式调用,即让方法调用竣事后返回对象自身,如下代码所示:
  1. var User = function(){
  2.   this.id = null;
  3.   this.name = null;
  4. };
  5. User.prototype.setId = function( id ){
  6.   this.id = id;
  7.   return this;
  8. };
  9. User.prototype.setName = function( name ){
  10.   this.name = name;
  11.   return this;
  12. };
  13. console.log( new User().setId( 1314 ).setName( 'sven' ) );
复制代码
或者:
  1. var User = {
  2.   id: null,
  3.   name: null,
  4.   setId: function( id ){
  5.     this.id = id;
  6.     return this;
  7.   },
  8.   setName: function( name ){
  9.     this.name = name;
  10.     return this;
  11.   }
  12. };
  13. console.log( User.setId( 1314 ).setName( 'sven' ) );
复制代码
利用链式调用的方式并不会造成太多阅读上的困难,也确实能省下一些字符和中间变量,但节流下来的字符数量同样是微不足道的。链式调用带来的坏处就是在调试的时间非常不方便,如果我们知道一条链中有错误出现,必须得先把这条链拆开才气加上一些调试log或者增长断点,如许才气定位错误出现的地方。

如果该链条的结构相对稳固,后期不易发生修改,那么利用链式调用无可厚非。但如果该链条很轻易发生变化,导致调试和维护困难,那么还是发起利用普通调用的情势:
  1. var user = new User();
  2. user.setId( 1314 );
  3. user.setName( 'sven' );
复制代码
10.分解大型类


在HTML5版“陌头霸王”的第一版代码中,负责创建游戏人物的Spirit 类非常巨大,不仅要负责创建人物精灵,还包罗了人物的攻击、防御等动作方法,代码如下:
  1. var Spirit = function( name ){
  2.   this.name = name;
  3. };
  4. Spirit.prototype.attack = function( type ){  // 攻击
  5.   if ( type === 'waveBoxing' ){
  6.     console.log( this.name + ': 使用波动拳' );
  7.   }else if( type === 'whirlKick' ){
  8.     console.log( this.name + ': 使用旋风腿' );
  9.   }
  10. };
  11. var spirit = new Spirit( 'RYU' );
  12. spirit.attack( 'waveBoxing' );   // 输出:RYU: 使用波动拳
  13. spirit.attack( 'whirlKick' );  // 输出:RYU: 使用旋风腿
复制代码
厥后发现,Spirit.prototype.attack这个方法实现是太巨大了,实际上它完全有必要作为一个单独的类存在。面向对象计划鼓励将活动分布在公道数量的更小对象之中:
  1. var Attack = function( spirit ){
  2.   this.spirit = spirit;
  3. };
  4. Attack.prototype.start = function( type ){
  5.   return this.list[ type ].call( this );
  6. };
  7. Attack.prototype.list = {
  8.   waveBoxing: function(){
  9.     console.log( this.spirit.name + ': 使用波动拳' );
  10.   },
  11.   whirlKick: function(){
  12.     console.log( this.spirit.name + ': 使用旋风腿' );
  13.   }
  14. };
复制代码
现在的Spirit类变得精简了许多,不再包罗各种各样的攻击方法,而是把攻击动作委托给Attack类的对象来实验,这段代码也是计谋模式的运用之一:
  1. var Spirit = function( name ){
  2.   this.name = name;
  3.   this.attackObj = new Attack( this );
  4. };
  5. Spirit.prototype.attack = function( type ){  // 攻击
  6.   this.attackObj.start( type );
  7. };
  8. var spirit = new Spirit( 'RYU' );
  9. spirit.attack( 'waveBoxing' );  // 输出:RYU: 使用波动拳
  10. spirit.attack( 'whirlKick' );  // 输出:RYU: 使用旋风
复制代码
11.用return退出多重循环


假设在函数体内有一个两重循环语句,我们需要在内层循环中判定,当到达某个临界条件时退出外层的循环。我们大多数时间会引入一个控制标记变量:
  1. var func = function(){
  2.   var flag = false;
  3.   for ( var i = 0; i < 10; i++ ){
  4.     for ( var j = 0; j < 10; j++ ){
  5.       if ( i * j >30 ){
  6.         flag = true;
  7.         break;
  8.       }
  9.     }
  10.     if ( flag === true ){
  11.       break;
  12.     }
  13.   }
  14. };
复制代码
第二种做法是设置循环标记:
  1. var func = function(){
  2.   outerloop:
  3.   for ( var i = 0; i < 10; i++ ){
  4.     innerloop:
  5.     for ( var j = 0; j < 10; j++ ){
  6.       if ( i * j >30 ){
  7.         break outerloop;
  8.       }
  9.     }
  10.   }
  11. };
复制代码
这两种做法无疑都让人头晕眼花,更简单的做法是在需要中止循环的时间直接退出整个方法:
  1. var func = function(){
  2.   for ( var i = 0; i < 10; i++ ){
  3.     for ( var j = 0; j < 10; j++ ){
  4.       if ( i * j >30 ){
  5.         return;
  6.       }
  7.     }
  8.   }
  9. };
复制代码
固然用return直接退出方法会带来一个题目,如果在循环之后还有一些将被实验的代码呢?如果我们提前退出了整个方法,这些代码就得不到被实验的机会:
  1. var func = function(){
  2.   for ( var i = 0; i < 10; i++ ){
  3.     for ( var j = 0; j < 10; j++ ){
  4.       if ( i * j >30 ){
  5.         return;
  6.       }
  7.     }
  8.   }
  9.   console.log( i );  // 这句代码没有机会被执行
  10. };
复制代码
为了办理这个题目,我们可以把循环后面的代码放到return后面,如果代码比力多,就应该把它们提炼成一个单独的函数:
  1. var print = function( i ){
  2.   console.log( i );
  3. };
  4. var func = function(){
  5.   for ( var i = 0; i < 10; i++ ){
  6.     for ( var j = 0; j < 10; j++ ){
  7.       if ( i * j >30 ){
  8.         return print( i );
  9.       }
  10.     }
  11.   }
  12. };
  13. func();
复制代码
到此这篇关于了不得的11个JavaScript代码重构最佳实践小结的文章就介绍到这了,更多相关JavaScript 代码重构内容请搜刮脚本之家以前的文章或继承欣赏下面的相关文章盼望大家以后多多支持脚本之家!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作