如何在Vanilla JS中重构现有价格计算函数

重构后的最优实现方案 #

// 价格档位配置，按阈值升序排列，后续新增档位直接插入对应位置即可
const PRICE_TIERS = [
  { maxCount: 3, unitPrice: 50 },
  { maxCount: 6, unitPrice: 40 },
  { maxCount: Infinity, unitPrice: 35 }
]
const CURRENCY_SYMBOL = '£'

// 独立价格计算逻辑，无DOM依赖，方便单独测试
function calculateTotalPrice(selectedCount) {
  const matchedTier = PRICE_TIERS.find(tier => selectedCount <= tier.maxCount)
  return (matchedTier.unitPrice * selectedCount).toFixed(2)
}

// 视图更新逻辑
function updatePriceView(numberSelected) {
  const totalEl = document.getElementById("total")
  totalEl.innerHTML = `${CURRENCY_SYMBOL}${calculateTotalPrice(numberSelected)}`
  totalEl.style.display = "block"
  document.getElementById("button").style.display = "block"
}

核心优化点 #

• 消除重复逻辑：原代码三个分支重复的DOM赋值、金额格式化逻辑全部抽离统一处理，后续修改格式仅需调整一处
• 配置与逻辑分离：档位阈值、单价、货币符号全部抽为独立配置，调整定价规则不需要修改业务逻辑，降低出错概率，新增档位仅需在PRICE_TIERS数组中增加对应配置项即可
• 职责拆分：计算总价和更新视图的逻辑拆分为两个独立函数，价格计算逻辑无DOM依赖，单元测试成本大幅降低
• 消除隐式全局依赖：把原函数隐式依赖的全局变量、DOM元素改为显式获取/传入，避免全局变量污染导致的异常问题

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