一、前言
針對目錄結(jié)構(gòu)、CSS規(guī)范、JavaScript規(guī)范、Vue規(guī)范
可參照官方給出的 風(fēng)格指南
這里主要總結(jié)業(yè)務(wù)開發(fā)中常遇到的代碼問題和實(shí)踐，幫助大家后續(xù)各自做好codeReview，一些你遇到的典型問題，也可以在留言區(qū)評論，幫助團(tuán)隊(duì)共同進(jìn)步。

二、實(shí)踐規(guī)范
2.1 防止重復(fù)提交
--表單提交或者編輯新增數(shù)據(jù)時(shí)，按鈕必須加loading，防止重復(fù)提交
<el-button type="primary" :loading="submitLoading" @click="handleSubmit"> 提交 </el-button>

--針對table的操作列中的操作項(xiàng)，沒有二次確認(rèn)的也要注意加loading
[圖片]

 <yun-table
        :pagination="pagination"
        :border="true"
        :columns="columns"
        :loading="loading"
        :data="tableData"
        @update:pagination="handlePageUpdate"
      >
        <template #action="{ row }">
          <yun-rest>
            <el-button
              :loading="row.loadingSync"
              type="action"
              @click="handleAction(row, 'sync')"
            >
              同步
            </el-button>
          </yun-rest>
        </template>
      </yun-table>
      ...
   <script setup>
    const { result } = await fetchApi(data);
    if (result) {
      tableData.value = result.records.map((item) => {
        return {
          ...item,
          loadingSync: false,
        };
      });
      total.value = result.total;
    }
      </script>

2.2 滾動(dòng)到報(bào)錯(cuò)位置
--長表單頁面或抽屜內(nèi)容很長，點(diǎn)擊提交時(shí)，有驗(yàn)證錯(cuò)誤時(shí)，頁面需要做好滾動(dòng)到報(bào)錯(cuò)位置

const handleSubmit = async () => {
    let flag = true;
    formRef.value.elForm.validate((valid, noValidObj) => {
      flag = valid;
      if (!valid) {
        const errorArr = Object.keys(noValidObj).filter(
          (key) => Array.isArray(noValidObj[key]) && noValidObj[key][0]?.field
        );
        contractFormRef.value.elForm.scrollToField(errorArr[0]); // 滾動(dòng)到報(bào)錯(cuò)位置
      }
    });
    if (!flag) {
      ElMessage.warning("表單未填寫完成！");
      return;
    }
    // 走后續(xù)提交請求
    submitLoading.value = true;
    ...

2.3 模板上的多個(gè)判斷條件，寫成方法或者computed

<template>
  // bad
         <el-button
              v-if="
                ['NORMAL', 'UNUSUAL'].includes(row.archiveType) &&
                ['ALREADY_SEND'].includes(row.contractStatus) &&
                ['ENABLED'].includes(row.enabledStatus)
              "
              type="action"
              @click="handleAction(row, 'modify')"
            >
              變更
            </el-button>
            <el-button
              v-if="
                ['NORMAL', 'UNUSUAL'].includes(row.archiveType) &&
                ['ALREADY_SEND'].includes(row.contractStatus) &&
                ['ENABLED'].includes(row.enabledStatus)
              "
              type="action"
              @click="handleAction(row, 'renewal')"
            >
              續(xù)簽
            </el-button>
            <el-button
              v-if="
                ['NORMAL', 'UNUSUAL'].includes(row.archiveType) &&
                ['ALREADY_SEND'].includes(row.contractStatus) &&
                ['ENABLED'].includes(row.enabledStatus)
              "
              type="action"
              @click="handleAction(row, 'rebook')"
            >
              改簽
            </el-button>
// good
           <el-button
            v-if="isChangeAvailiable(row)"
            type="action"
            @click="handleAction(row, 'modify')"
          >
            變更
          </el-button>
          <el-button
            v-if="isChangeAvailiable(row)"
            type="action"
            @click="handleAction(row, 'renewal')"
          >
            續(xù)簽
          </el-button>
          <el-button
            v-if="isChangeAvailiable(row)"
            type="action"
            @click="handleAction(row, 'rebook')"
          >
            改簽
          </el-button>

</template>

<script setup>
// good
const isChangeAvailiable = (row) => {
return (
  ["ALREADY_SEND", "ALREADY_ARCHIVE"].includes(row.contractStatus) &&
  ["ENABLED"].includes(row.enabledStatus)
);
};

</script>

2.4 保持?jǐn)?shù)據(jù)響應(yīng)式

<script setup>
  import { reactive } from "vue";
  let state = reactive({
      loading: false,
      a: true,
    });
    function handleChange(){
       // bad 無法實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式
       state = {...state,b:'test'}
       // bad 無法實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式
       state = reactive({...state,b:'test'})
       
       // correct 數(shù)據(jù)具有響應(yīng)式
       state.b = 'test'；
       // correct 數(shù)據(jù)具有響應(yīng)式
       Object.assign(state,{b:'test'});
    
    }


</script>

2.5 避免使用 delete
delete 操作符并不會(huì)釋放內(nèi)存，而且會(huì)使得附加到對象上的 hidden class 失效，讓對象變成 slow object。（hidden class 是 V8 為了優(yōu)化屬性訪問時(shí)間而創(chuàng)建的隱藏類）

2.6 盡量使用 export 而 不是 export default 來導(dǎo)出
export default 有兩個(gè)問題：1）不利于 tree shaking 2）如果使用了一個(gè)導(dǎo)出對象上不存在的屬性，要運(yùn)行時(shí)才能發(fā)現(xiàn)。

2.7 可選鏈訪問數(shù)組元素

 <template>
     // bad
     <span>{{row[0].contract.name}}<span>
     <span>{{Array.isArray(row) && row[0].contract.name}}<span>
     
    // good
    <span>{{row?.[0]?.contract?.name}}<span>

</template>

2.8 參數(shù)硬編碼

// bad 硬編碼1001
const isActive = this.$route.query.id === '1001'

// good  寫到配置信息中。這樣，id和狀態(tài)的對應(yīng)關(guān)系一目了然，便于管理和維護(hù)。
const idConfig = {
  1001: STATUS.ACTIVE
}
const isActive = idConfig[this.$route.query.id] === STATUS.ACTIVE

2.9 定時(shí)器是否及時(shí)清理

mounted () {
  this.timer = setInterval(() => {
    doSomething();
  }, 300)
}
destroyed () {
  if (this.timer) {
    clearInterval(this.timer)
  }
}

2.10 監(jiān)聽事件是否有解綁
在window/body 上的事件需要解綁：

mounted() {
  window.addEventListener(‘resize’, this.func)
  window.addEventListener(‘scroll’, this.func)
}
beforeDestroy () {
  window.removeEventListener('resize', this.func);
  window.removeEventListener('scroll', this.func);
}

三、總結(jié)

不積跬步，無以至千里?？隙ㄟ€有很多遺漏的點(diǎn)，歡迎補(bǔ)充喲。文章來源地址http://www.zghlxwxcb.cn/news/detail-474214.html

到了這里，關(guān)于一定要看的前端codeReview規(guī)范指南的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！