百网思正是上线了。欢迎围观

JavaScript 前端代码优化技巧 一

js admin 714浏览 0评论

前言

代码优化永远是开发的伴随者,不但影响者性能还影响着代码的可读性,毕竟事件长了。自己也不认识了。优化之后或许还可以一读。看书和网络中查找了一些感觉很有用,逐一记录

合并重复的条件片段

场景 和后端开发人员调试某个业务的时候,通常一个字段包含了几个不同的值,比如 checkCode 为0 为1而 前端需要作出相关判断并调用相关方法:

let getData = function (checkCode){
  let  msg= '正在开业。。';
  if (checkCode === '0') {
      msg='准备开业';
      jump(msg);
  }
  if (checkCode === '1') {
      msg='中午休息';
      jump(msg);
  }else {
     jump(msg);
  }
}

可以看到 这些条件分支语句内部散布了一些重复的代码, 那么就有必要进行合并去重工作

let getData = function (checkCode){
  let  msg= '正在开业。。';
  if (checkCode === '1') {
    msg='准备开业';
  }
  if (checkCode === '2') {
    msg='中午休息';
  }
   jump(msg);
  }
}

这样就好看多了。

条件分支语句提炼成函数

场景 条件判断中带有计算的,难以阅读和理解的的复杂的;假设现在有一个需求是编写一个计算商品价格的 getPrice 函数,商品的计算只 有一个规则:如果当前正处于夏季,那么全部商品将以 8 折出售。代码如下:

var getPrice = function( price ){ 
    var date = new Date(); 
    if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ 
       return price * 0.8;
     } 
     return price; 
 };

条件语句中带有拍断看上去很复杂,我们就可以提炼为函数,而且有注释的意思

var isSummer = function () { 
  var date = new Date(); 
  return date.getMonth() >= 6 && date.getMonth() <= 9; 
};

var getPrice = function (price) { 
  if (isSummer()) { // 夏天 
    return price * 0.8; 
  } 
  return price; 
};

舒服多了

用对象参数代替过长的参数列表

场景 参数大于两个以上非常难看

function testfn(a,argb,name,sex){
    ......
}

可以用对象传递

let person={
    a:'',
    argb:'',
    ...
};
function testfn(person){
    ......
}

转载请注明: 百网思 » JavaScript 前端代码优化技巧 一

喜欢 (2012) or 分享 ( 0)

发表我的评论

您尚未登录,请 登录注册 后评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 注册用户头像

    1

    admin「博主」2020-08-15 18:00:20 回复