摘要：
最近，我做了两个vue项目，包括我以前做过的两个项目。我总共有四个vue项目的经验，但代码质量总体上不是很高，这体现在以下几点：1.代码没有得到有效的重用。自从使用vue作为一个项目以来，使用过程导向的习惯已经被对象导向所取代。这是一个很好的改变，使代码看起来不那么混乱，然而，这并不意味着高质量。例如，用于实现函数以验证输入是否有效的代码非常长，并且有许多重复的代码，例如：functioncheckInput｛letisTrue；if（！
最近做了两个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; }
这样子就简化了很多不必要的重复的代码.
未完待续....