使用vue做项目如何提高代码效率
最近做了两个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; }
这样子就简化了很多不必要的重复的代码.
未完待续....