JavaScript 前端代码优化技巧 一

前言

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

合并重复的条件片段

场景
和后端开发人员调试某个业务的时候，通常一个字段包含了几个不同的值，比如 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){
	......
}