最近做了兩個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;
}

這樣子就簡化了很多不必要的重復的代碼.

未完待續....

使用vue做項目如何提高代碼效率