記平時工做中的一代碼規範(Vue項目，純記錄)

近期翻了翻本身在羣裏提交的review代碼，發現一些小問題，還有一些問題犯了不止一次，仍是老老實實記錄一波，以避免記性很差又忘記就怪很差意思的。
我在團隊中主要負責前臺項目，框架是vue，如下是咱們工做中團隊裏定的一些代碼規範。

Vue 代碼規範

約定

• 如無特殊狀況，禁用 v-bind 、v-on、v-text 這些有縮寫的指令
• 組件屬性之間必須有空行
• 事件綁定方法爲: handle[description]，好比：handleSubmit、handleButtonClick
• v-text 格式爲 {{ someVar }}，兩邊有空格
• 必須使用絕對路徑引用，以@開頭，css 文件除外

template 格式

屬性個數大於等於 3 時，換行

<el-button
  size="small"
  icon="plus"
  class="ACompnent-button"
>
  編輯
<el-button>

屬性順序

建議每種屬性，都按照 a-z 進行排列，不強制

• 指令屬性，好比 v-if v-for v-model
• 綁定屬性，好比 :label="labelWidth"
• 事件屬性，好比 @click="handleButtonClick"
• 普通屬性，好比 size="small"

自閉合組件

<el-button
  size="small"
  icon="plus"
  class="ACompnent-button"
/>

正常組件

<el-button
  size="small"
  icon="plus"
  class="ACompnent-button"
>
  刪除
</el-button>

<el-button size="small" icon="plus">
  刪除
</el-button>

<el-button size="small" icon="plus">刪除</el-button>

component 屬性順序

組件外部聲明

• components
• props
• exports

組件內部數據相關

• data
• computed
• mapState
• other

組件內部生命週期

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• activated
• deactivated
• beforeDestroy
• destroyed

組件內部監聽聲明

• watch

組件內部自定義方法

• methods
• mapActions
• mapGetters
• mapMutations
• handleAClick
• handleBClick
• handleBKeyup
• customMethod

svg 座標簡化的正則

replace (\.\d{2})\d+ with $1

如下都是我寫代碼時遇到的一些問題，如今統一整理出來（後面可能還有，粗心～～），至少是我須要注意的一些小事項，方便團隊協做寫出統一優美的代碼

1. slot標籤注意自閉合： <slot :name="slotName" />，其餘標籤也同樣，內部無內容或無其餘子標籤統一自閉合
2. 模版裏面不要有邏輯，只用來展現，放在methods or computed中
3. css 有透明度，顏色用rgba組合寫

// 例如
background: rgba(0, 0, 0, .8);

1. 老代碼slot最好用v-slot代替: https://cn.vuejs.org/v2/api/#...

<template v-slot:left>
  <go-back />
</template>

5.常犯的錯誤： ==class單個名稱，不須要引號==

<div
    :class="{
      Order: true,  // Order不須要引號
      'Order-mask-open': serviceMaskShown,
      'Order-fringe': iOSWithFringe,
    }"
  >

6.若是代碼邏輯裏面有常量記得提早抽離出來，單個文件裏面用到放在該文件下便可，多個地方用到放在外部統一import引入

7.代碼記得考慮一下如何提交健壯性

//例如：以下的改爲>=
this.data.noticeDatas.length === this.maxLength

8.不要用all 指明屬性

// all 改爲transform/scale/opacity等具體的屬性
transition: all .3s ease;

9.代碼優化之判斷對象裏的屬性返回Boolean值

return this.paymentInfo && this.paymentInfo.settlementSheetUrl;
// 能夠優化成
return Boolean(this.paymentInfo?.settlementSheetUrl);
或者改爲
return  !this.paymentInfo?.settlementSheetUrl

10.代碼寫法之子組件傳給父組件，派發事件用'-'，不要駝峯

// 子組件
handleChange(v) {
  this.$emit('address-changed', v);
},

11.函數參數較多時 or 或者還有未知參數時傳入對象形式比較好

// 例如當前的業務函數，傳入四個參數，host多是未知的
export const isSelfProposal = (sourceId, sourceId, shopAddress, host) => {
  if (!sourceId || !shopAddress) return false;
  const shopIds = getEnvByHost(host) === 'release' ? releaseSelfProposalShopIds : testSelfProposalShopIds;
  if (selfProposalSoureIds.includes(sourceId) && shopIds.includes(shopId)) {
    return true;
  }
  return false;
};
// 能夠改爲
export const isSelfProposal = ({
    sourceId,
    sourceId,
    shopAddress,
    host,
}) => {

12.子組件能夠經過vuex拿到的數據，不用從父組件取vuex中的數據再經過props傳入

暫時這些，後面及時更新