如何简化JavaScript预订逻辑代码及优化注释术语？

核心优化方向 #

针对你代码里的冗余和可读性问题，主要从消除重复逻辑、简化条件分支、规范命名与注释三个方向优化：

1. 消除重复逻辑 #

• 抽离重复的回调函数：原代码中_handleAdded的调用逻辑完全重复，单独封装成函数
• 统一日期格式化逻辑：避免重复写moment().format()，抽成复用的工具逻辑
• 合并相似的payload生成逻辑：比如单日和多日的预订参数，通过条件判断合并生成

2. 简化条件分支 #

用配置映射表替代嵌套三元判断，把不同rate类型对应的参数（payload类型、接口标识）统一管理，既减少分支嵌套，也方便后续扩展新类型

3. 规范命名与注释 #

• 变量名采用JS通用的小驼峰格式（修正原DayOrMonthPayload的大写开头问题）
• 注释使用简洁明确的业务术语，比如“基础预订数据”“预订类型配置映射”，替代冗余的分割线注释

优化后的完整代码 #

// 提取选中的rate类型值，避免重复访问rateType[1]
const selectedRate = rateType?.[1];
const isSinglePass = passType === 'single';

// 基础预订数据：所有类型共享的字段
const baseBookingData = {
  booking_name: `${username.first_name} ${username.last_name}`, // 模板字符串替代字符串拼接
  number_of_people: numOfPeople,
};

// 统一日期时间格式化逻辑
const formatDate = (date) => moment(date).format('YYYY-MM-DD');
const formatTime = (time) => moment(time).format('hh:mm');

// 生成各类型的预订参数
const bookingPayloads = {
  hourly: {
    ...baseBookingData,
    date: formatDate(mainDate),
    from: formatTime(timeFrom),
    to: formatTime(timeUntil),
  },
  daily: isSinglePass 
    ? { ...baseBookingData, dates: [formatDate(startDate)] }
    : { ...baseBookingData, start_date: formatDate(startDate), end_date: formatDate(endDate) },
  monthly: {
    ...baseBookingData,
    start_date: formatDate(startDate),
    end_date: formatDate(endDate),
  },
};

// 抽离添加购物车后的统一回调逻辑
const handleCartAddCallback = () => {
  _handleAdded(fastCheckout ?? null, cb ? () => cb() : null);
};

// 预订类型配置映射：关联rate类型、接口标识、对应payload
const rateConfigMap = {
  'Hourly': { key: 'hourly', payload: bookingPayloads.hourly },
  'Day Pass': { 
    key: isSinglePass ? 'individual-dates' : 'daily', 
    payload: bookingPayloads.daily 
  },
  'Monthly Pass': { key: 'monthly', payload: bookingPayloads.monthly },
};

// 执行添加购物车逻辑
if (selectedRate) {
  setLoading(true);
  const config = rateConfigMap[selectedRate];
  if (config) {
    await addToCart(
      config.payload,
      config.key,
      id,
      cartItems,
      handleCartAddCallback
    );
  }
  setLoading(false);
} else {
  alert('请选择预订类型');
}

关键改进点说明 #

• 配置映射表：rateConfigMap把rate类型和对应的参数绑定，新增预订类型时只需在映射表中添加条目，无需修改条件分支
• 工具逻辑复用：formatDate和formatTime统一日期时间格式化，减少重复代码
• 回调抽离：handleCartAddCallback消除了三次重复的_handleAdded调用逻辑
• 语法简化：模板字符串、可选链、空值合并让代码更简洁安全

内容的提问来源于stack exchange，提问作者Junaid Razaq