使用vue做项目如何提高代码效率

Posted 2020-10-23 林子lxl

最近做了两个vue项目,算上之前做的两个项目,总共有四个vue项目的经验了,但是总体来说写的代码质量不是很高,体现在以下几点

1.代码没有高效的复用

　　自从使用vue做项目之后,以前使用面向过程变成的习惯随之被面向对象取代了,这是一个很好的转变,让代码看起来不是那么混乱了,但是不混乱并不代表质量高,比如实现一个检验输入是否有效的功能写的代码很长,而且重复代码很多例如:

　　

function checkInput(data) {
let isTrue;
if(!data.date) {
  this.$message.error("请选择日期!");
  return isTrue = false;
  return;
}
if(!data.url) {
  this.$message.error("请选择链接!");
  return isTrue = false;
  return;
}
if(!data.imgUrl) {
  this.$message.error("请选择图片!");
  return isTrue = false;
  return;
}
return isTrue=true;
}

然后判断该函数返回的值是否为true,使用了太多的判断,现在是三个输入框还行,如果说十个输入框的话那代码就太长了,而且有很多重复的代码,这个时候就必须考虑如何将代码简化,

否则自己看着就很low,更不用说给别人看了.

分析一下代码,判断很多都是重复的,那么我们使用一个for in循环就好了,因为提示信息和输入的字段是不一样的,那么就单独提出来放入一个数组内.例如

function checkInput(data) {
  let isTrue=true;
  let count=0;
  let errorInfo = ["请选择日期","请选择链接","请选择图片"];
  for(let item in data) {
    if(!data[item]){
      alert(errorInfo[count]);
      return isTrue=false;
      break;
    }
    count++;
  }
  return isTrue;
}

这样子就简化了很多不必要的重复的代码.

未完待续....