一定要看的前端codeReview規范指南

一、前言
針對目錄結構、CSS規范、JavaScript規范、Vue規范
可參照官方給出的 風格指南
這里主要總結業務開發中常遇到的代碼問題和實踐，幫助大家后續各自做好codeReview，一些你遇到的典型問題，也可以在留言區評論，幫助團隊共同進步，

二、實踐規范
2.1 防止重復提交
--表單提交或者編輯新增資料時，按鈕必須加loading，防止重復提交
<el-button type="primary" :loading="submitLoading" @click="handleSubmit"> 提交 </el-button>

--針對table的操作列中的操作項，沒有二次確認的也要注意加loading
[圖片]

 <yun-table
        :pagination="pagination"
        :border="true"
        :columns="columns"
        :loading="loading"
        :data="https://www.cnblogs.com/mrwh/archive/2023/06/07/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 = https://www.cnblogs.com/mrwh/archive/2023/06/07/result.records.map((item) => {
        return {
          ...item,
          loadingSync: false,
        };
      });
      total.value = result.total;
    }
      </script>

2.2 滾動到報錯位置
--長表單頁面或抽屜內容很長，點擊提交時，有驗證錯誤時，頁面需要做好滾動到報錯位置

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]); // 滾動到報錯位置
      }
    });
    if (!flag) {
      ElMessage.warning("表單未填寫完成！");
      return;
    }
    // 走后續提交請求
    submitLoading.value = https://www.cnblogs.com/mrwh/archive/2023/06/07/true;
    ...

2.3 模板上的多個判斷條件，寫成方法或者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')"
            >
              續簽
            </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')"
          >
            續簽
          </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 保持資料回應式

<script setup>
  import { reactive } from "vue";
  let state = reactive({
      loading: false,
      a: true,
    });
    function handleChange(){
       // bad 無法實作資料回應式
       state = {...state,b:'test'}
       // bad 無法實作資料回應式
       state = reactive({...state,b:'test'})
       
       // correct 資料具有回應式
       state.b = 'test'；
       // correct 資料具有回應式
       Object.assign(state,{b:'test'});
    
    }


</script>

2.5 避免使用 delete
delete 運算子并不會釋放記憶體，而且會使得附加到物件上的 hidden class 失效，讓物件變成 slow object，（hidden class 是 V8 為了優化屬性訪問時間而創建的隱藏類）

2.6 盡量使用 export 而 不是 export default 來匯出
export default 有兩個問題：1）不利于 tree shaking 2）如果使用了一個匯出物件上不存在的屬性，要運行時才能發現，

2.7 可選鏈訪問陣列元素

 <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 引數硬編碼

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

// good  寫到配置資訊中，這樣，id和狀態的對應關系一目了然，便于管理和維護，
const idConfig = {
  1001: STATUS.ACTIVE
}
const isActive = idConfig[this.$route.query.id] === STATUS.ACTIVE

2.9 定時器是否及時清理

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

2.10 監聽事件是否有解綁
在window/body 上的事件需要解綁：

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

三、總結

不積跬步，無以至千里，肯定還有很多遺漏的點，歡迎補充喲，

標籤：其他

上一篇：h5移動端頁面除錯工具Chii與 weinre 一樣的遠程除錯工具

下一篇：返回列表