每次代碼 review 之後，對 review 的情況進行總結記錄，產出實際經驗，方便組內學習、分享。

1、提取公共內容

公共內容要提取，避免重複編寫；

2、css 色值使用變量

css 中的色值、字體，都換成組件庫中的變量、class；

3、v-if、v-show要用對時機

如果就是不加載對應組件可以用 v-if，否則，儘量用 v-show。比如多tab切換的時候，可以保存客户的使用狀態；

4、無用代碼去除

無用代碼、註釋掉的代碼，記得刪除，否則後期改造或者進行邏輯梳理的時候會造成干擾。

5、解構賦值

善用解構賦值，優化代碼， 避免重複長鏈路獲取

反面示例：

const isEmbed = this.$route.query.isEmbed 
const isEmbed2 = this.$route.query.isEmbed2

期望示例

const {isEmbed,isEmbed2} = this.$route.query

6、加好註釋

業務邏輯類的判斷，要加註釋，否則別人不知道是什麼意思。

7、善用三元表達式

用三元表達式來寫，簡化代碼，避免大片的 if-else

反面示例：

if (this.loginType === 'certLoginProcess') {    
   this.$Message.error(loginErrorMessage || '登錄認證失敗！') 
} else {    
   this.$Message.error(loginErrorMessage || '無感登錄失敗！') 
} 

期望示例

this.$Message.error(loginErrorMessage || （this.loginType === 'certLoginProcess' ? '登錄認證失敗！' :  '無感登錄失敗！'）)

8、善用 Array.includes()

同字段多個邏輯或（ || ）判斷，可以改為使用 includes

反面示例：

if (result.dictCode === 'STAR' || result.dictCode === 'SPACE') {}

期望示例

['STAR','SPACE'].includes(result.dictCode)

9、善用邏輯或 || 

善用邏輯或（||）運算符處理，避免大片if else

反面示例：

if (this.formData.affiliatedBusiness === '10') {    
   return true 
} if (this.formData.affiliatedBusiness.includes('10')) {    
   return true 
}

期望示例

let { affiliatedBusiness } = this.formData 
if(affiliatedBusiness === '10' || affiliatedBusiness.includes('10')){     
    return true 
}

10、駝峯命名

反面示例：

const testTel = utilFun.is_valid_phone_number(taxTel)

期望示例

const testTel = utilFun.isValidPhoneNumber(taxTel)