今天將繼上一篇提到的原則，實際挑選專案中幾個範例給大家參考。

範例 1 ：功能模組化。

多次出現的 DataTable 初始化邏輯，可以考慮進行模組化或提高重用性。

原始程式碼：

// initial DataTable 出現 1 次 : upApplyRecordTable
if ($.fn.DataTable.isDataTable('#upApplyRecordTable')) {
    $('#upApplyRecordTableFee').DataTable().destroy();
    }
    upApplyRecordTableFee = $('#upApplyRecordTable').DataTable({
        data: obj,
        order: [[0, 'asc']],
        columns: [{...},{...},{...}],
                autoWidth: false,
                responsive: {
                    details: {
                        renderer: $.fn.dataTable.Responsive.renderer.listHiddenNodes()
                    }
                },
                searching: false,
                "bLengthChange": false,
                paging: false
      });
 
 // initial DataTable 出現 2 次 : upApplyRecordTableFee
 if ($.fn.DataTable.isDataTable('#upApplyRecordTableFee')) {
    $('#upApplyRecordTableFee').DataTable().destroy();
    }
    upApplyRecordTableFee = $('#upApplyRecordTableFee').DataTable({
        data: obj,
        order: [[0, 'asc']],
        columns: [{...},{...},{...}],
                autoWidth: false,
                responsive: {
                    details: {
                        renderer: $.fn.dataTable.Responsive.renderer.listHiddenNodes()
                    }
                },
                searching: false,
                "bLengthChange": false,
                paging: false
      });
  
  // initial DataTable 出現 3 次 : upManageRecordTable
  ...
  
  // initial DataTable 出現 4 次 : upManageRecordTableFee
  ...

模組化程式碼：

function initializeDataTable(tableId, data, columns, options = {}) {
  if ($.fn.DataTable.isDataTable(`#${tableId}`)) {
    $(`#${tableId}`).DataTable().destroy();
  }
  
  return $(`#${tableId}`).DataTable({
    data: data,
    columns: columns,
    order: [[0, 'asc']],
    autoWidth: false,
    responsive: {
      details: {
        renderer: $.fn.dataTable.Responsive.renderer.listHiddenNodes()
      }
    },
    searching: false,
    bLengthChange: false,
    pageLength: options.pageLength || 12,
    ...options
  });
}

// 使用模組化後的 Function
upApplyRecordTable = initializeDataTable('upApplyRecordTable', obj, [
  // ... 你的定義
], { pageLength: 12 });

範例 2 ：Function 重用性。

將要渲染資料的邏輯獨立出來，除了可以提升重用性以外，在維護程式碼時，也易於維護修改。

原始程式碼：

async function getUpApplyFormList(apply_id, startDate, endDate, apply_status) {
    let url = `${_apiHLMARSUrl}/UpApply/GetUpApplyFormList`;
    let objData = {
        apply_id: apply_id,
        startDate_apply: convertRocDateToISO(startDate),
        endDate_apply: convertRocDateToISO(endDate),
        apply_status: apply_status,
        page_name: "upApplyRecord"
    }
    try {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + token 
            },
            body: JSON.stringify(objData)
        });
        
        // 處理 response 的數據（...略） 
        // 很長導致該 Function 不好維護。
        
    } catch (err) {
        console.log('錯誤:', err);
    }
}

更新過後的程式碼：

function renderTable(data) {
    // 渲染表格邏輯
}

async function updateTable() {
    const data = await getUpApplyFormList(apply_id, startDate, endDate, apply_status);
    renderTable(data);
}

Summary

在今天的 Code Review 中，針對重用性與模組化的討論，建議將程式碼清楚地分為不同 Module，每個 Module 負責特定的功能，例如：API請求、數據處理及 UI 更新，三者可分開處理，藉此提高可維護性和可測試性。此外，將重複出現的邏輯設計成共用 Function，助於減少程式碼重複並提高效率。

同時，提醒 Reviewer 若能深入了解整個專案的架構與功能，可以提供較具針對性本篇文章原則的建議。建議至少完整閱讀該 PR 相關的功能文件，以便能夠理解各個模組之間的關聯。