Блог

Главная - Вопросы по программированию - Как рефакторинг функции vanilla js

Как рефакторинг функции vanilla js

#javascript #function #refactoring

Вопрос:

Я пытаюсь реорганизовать функцию, но не могу понять, какой подход может быть лучшим для нее

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

Спасибо

Комментарии:

1. Вы хотите провести его рефакторинг…с какой целью?

2. просто чтобы понять, как я мог бы использовать вместо этого тернарный оператор

3. Я полагаю, что это нормально, если вы пытаетесь выучить тернарные операторы, но обычно лучше избегать их, когда вам нужно вложить. Как будто это нормально для быстрого случая, если/иначе, но не для нескольких, если/elseif/elseif/еще. В любом случае, троичные операторы работают просто так: condition ? true : false . Так numberSelected <= 3 ? document... : numberSelected <= 6 ? document... : numberSelected > 6 ? document... : return false; что просто возвращайте ложь в конце, так как это все равно никогда не произойдет.

Ответ №1:

Если вы хотите использовать тернарный оператор, вы можете использовать этот код. Я добавляю дополнительную переменную, чтобы уменьшить дублирование кода.

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

Ответ №2:

Вы можете начать с разделения кода на более мелкие функции

 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)}`);

Вы можете использовать эту getFinalPrice функцию в своей start функции.

Ответ №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";
}
Метки: