1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

浅谈JS函数优化

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

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

  1、避免出现超大函数

  2、独立出来的函数有助于代码复用

  3、独立出来的函数更容易被覆写

  4、独立出来的函数如果拥有一个良好的命名,它本身就起到了注释的作用

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

【尽量减少参数数量】

  如果调用一个函数时需要传入多个参数,那这个函数是让人望而生畏的,必须搞清楚这些参数代表的含义,必须小心翼翼地把它们按照顺序传入该函数。在实际开发中,向函数传递参数不可避免,但应该尽量减少函数接收的参数数量。下面举个非常简单的示例。有一个画图函数draw,它现在只能绘制正方形,接收了3个参数,分别是图形的width、heigth以及square:

var draw = function(width,height,square){};

但实际上正方形的面积是可以通过width和height计算出来的,于是我们可以把参数square从draw函数中去掉:

var draw = function( width, height ){      var square = width * height;  };

  假设以后这个draw函数开始支持绘制圆形,需要把参数width和height换成半径radius,但图形的面积square始终不应该由客户传入,而是应该在draw函数内部,由传入的参数加上一定的规则计算得来。此时,可以使用策略模式,让draw函数成为一个支持绘制多种图形的函数

【传递对象参数代替过长的参数列表】 

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

这时可以把参数都放入一个对象内,然后把该对象传入setUserInfo函数,setUserInfo函数需要的数据可以自行从该对象里获取。现在不用再关心参数的数量和顺序,只要保证参数对应的key值不变就可以了:

var setUserInfo = function( obj ){          console.log( 'id= ' + obj.id );          console.log( 'name= ' + obj.name );          console.log( 'address= ' + obj.address );          console.log( 'sex= ' + obj.sex );          console.log( 'mobile= ' + obj.mobile );          console.log( 'qq= ' + obj.qq );      };      setUserInfo({          id: 1314,          name: 'xiaohuochai',          address: 'beijing',          sex: 'male',          mobile: '150********',          qq: 121631835      });

原文链接:https://www.qiquanji.com/post/7066.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: