JavaScript 多輸入框聯動計算：事件委託、數據驅動與代碼復用

問題現狀

大量重複 if-else 判斷利率、期限、幣種，代碼超過 500 行，維護極其困難。NaN 因未解析數值直接運算。

重構核心思想

1. 配置數據化：利率、期限天數、幣種符號全部提取為 JSON 配置。
2. 事件統一委託：單一 change 處理器，根據 e.target.id 分發。
3. 純函數計算：calculate(input) 無副作用，易測試。

關鍵配置結構

const CONFIG = {
  currencies: [
    {id:1, name:'人民幣', symbol:'元', rates:{1:0.55, 2:1.1, 3:1.1, 4:1.35, 5:1.55, 6:1.75, 7:2.25, 63:2.75, 8:2.75}},
    {id:2, name:'美元', symbol:'美元', rates:{9:0.05, 10:0.2, 11:0.3, 12:0.5, 13:0.8, 14:0.8}},
    // ... 其他幣種
  ],
  terms: {
    'd1':1, 'd7':7, 'm1':30, 'm3':90, 'm6':180, 'y1':360, 'y2':720, 'y3':1080, 'y5':1800
  }
};

統一計算函數

function calculate(principal, rate, days) {
  if (!principal || !rate || !days) return {interest:0, total:0, tax:0};
  const interest = principal * (days/360) * (rate/100);
  return {
    interest: interest.toFixed(2),
    total: (principal + interest).toFixed(2),
    tax: '0.00'  // 利息稅暫為0
  };
}

事件委託實現

$(document).on('change', '#sel1, #sel2, #input1, #nl4, #nl3', function(e) {
  const $target = $(e.target);
  // 1. 幣種變更 → 更新利率下拉、符號
  if ($target.is('#sel1')) updateCurrency($target.val());
  // 2. 期限變更 → 重新計算
  if ($target.is('#sel2')) recalc();
  // 3. 本金/利率/天數變更 → 重新計算
  if ($target.is('#input1, #nl3, #nl4')) recalc();
});

function recalc() {
  const currency = CONFIG.currencies.find(c => c.id == $('#sel1').val());
  const termId = $('#sel2').val();
  const rate = currency.rates[termId];
  const days = CONFIG.terms[$('#sel2').find('option:selected').attr('name')];
  const principal = parseFloat($('#input1').val()) || 0;
  const result = calculate(principal, rate, days);
  $('#lj').val(result.interest);
  $('#lj1').val(result.total);
  $('#lj2').val(result.tax);
  $('#dw, #dw1, #dw2').val(currency.symbol);
}

優化效果對比

總結

將**業務規則外部化為配置**，用**事件委託+純函數計算**替換硬編碼 if-else，是前端複雜表單重構的黃金模式。代碼從「寫給機器看」變為「寫給人看、配置給機器用」。