如何重构 function vanilla js

Question

我正在尝试重构 function 但不知道什么是最好的方法

let smallNumber = 50;
let mediumNumber = 40;
let groupNumber = 35;

function price() {
  if (numberSelected <= 3) {
    document.getElementById("total").innerHTML = "£"+(smallNumber * numberSelected).toFixed(2);
  } else if (numberSelected <= 6) {
    document.getElementById("total").innerHTML = "£"+(mediumNumber * numberSelected).toFixed(2);
  } else if (numberSelected > 6) {
    document.getElementById("total").innerHTML = "£"+(groupNumber * numberSelected).toFixed(2);
  }
  total.style.display = "block";
  button.style.display = "block";
}

谢谢

Answer 1

您可以从将代码分成更小的函数开始

 const convertToPounds = (num) => "£" + num.toFixed(2); const getNumToAdd = (input) => input <= 3? 50: (input > 6? 35: 40); const getFinalPrice = (input) => convertToPounds(getNumToAdd(input) + input); console.log(`Input: 2 Output: ${getFinalPrice(2)}`); console.log(`Input: 10 Output: ${getFinalPrice(10)}`); console.log(`Input: 5 Output: ${getFinalPrice(5)}`);

您可以在start function 中使用getFinalPrice function。

Answer 2

如果要使用三元运算符，可以使用此代码。 我添加了额外的变量以减少代码重复。

function price() {
  let total = document.getElementById("total");
  total.style.display = "block";
  button.style.display = "block";
  let text;

  text = numberSelected <= 3 ? smallNumber :
         numberSelected <= 6 ? mediumNumber : groupNumber;

  total.innerHTML = "£" + (text * numberSelected).toFixed(2);
}

Answer 3

由于重构涉及更改代码的实现，因此在开始重构之前进行测试是个好主意。 测试将让您知道重构是否改变了您正在重构的代码的行为。 也就是说，您可以执行以下操作：

 function price() { let selectedNumber; if (numberSelected <= 3) { selectedNumber = smallNumber; } else if (numberSelected <= 6) { selectedNumber = mediumNumber; } else if (numberSelected > 6) { selectedNumber = groupNumber; } document.getElementById("total").innerHTML = "£" + (selectedNumber * numberSelected).toFixed(2); total.style.display = "block"; button.style.display = "block"; }