如何重构函数 vanilla js

Question

我正在尝试重构一个函数，但无法找出最佳方法

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 函数中使用 getFinalPrice 函数。

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";
}

如何重构函数 vanilla js

How refactor a function vanilla js

javascript

refactoring

function