重构：如何将其改进为干净的代码

Question

我目前正在学习 JS。
并制作猪游戏，这是我观看的课程项目。
我一直很好奇如何改进我的代码但是我不知道从哪里开始。
有什么原则可以改进任何代码吗？
如果有办法，可以告诉我吗？
谢谢！
https://github.com/wonkooklee/pig-game
结果：https://wonkooklee.github.io/pig-game/

以下是主要功能

document.querySelector('.btn-roll').addEventListener('click', function() {
  
  if (gamePlaying) {
    
    dice = Math.floor(Math.random() * 6) + 1;
    diceDOM.style.display = 'block';
    diceDOM.src = `dice-${dice}.png`;

    if (dice === 6 && lastDice === 6) {
      // Player looses score
      scores[activePlayer] = 0;
      document.getElementById(`score-${activePlayer}`).textContent = '0';
      nextPlayer();
    } else if (dice !== 1 && dice !== 6) {
      roundScore += dice;
      document.getElementById(`current-${activePlayer}`).textContent = roundScore;
      lastDice = 0;
    } else if (dice === 6) {
      roundScore += dice;
      document.getElementById(`current-${activePlayer}`).textContent = roundScore;
      lastDice = dice;
    } else {
      nextPlayer();
    }


  }

});

document.querySelector('.btn-hold').addEventListener('click', function() {
  if (gamePlaying) {
    scores[activePlayer] += roundScore;
    document.getElementById(`score-${activePlayer}`).textContent = scores[activePlayer];

    let input = document.getElementById('scoreSet').value;
    let winningScore;

    if (isNaN(input) === false) {
      winningScore = input;
    } else {
      document.getElementById('scoreSet').value = '100';
    }

    if (scores[activePlayer] >= winningScore) {

      document.getElementById(`name-${activePlayer}`).textContent = 'WINNER!';
      document.querySelector(`.player-${activePlayer}-panel`).classList.add('winner');
      document.querySelector(`.player-${activePlayer}-panel`).classList.remove('active');
      diceDOM.style.display = 'none';
      gamePlaying = false;
    } else {
      nextPlayer();
    }

  }

});

Answer 1

Martin Fowler 写了一本很棒的书 "Refactoring". Besides, Fowler has a great blog Refactoring.com，您可以在 Javascript 中找到大量关于重构的信息和示例。我不擅长Javascript，但可以给你一些关于你的代码的建议。

1.简化条件逻辑

例如像这样：

if (dice === 6 && lastDice === 6) {
  // Player looses score
  scores[activePlayer] = 0;
  document.getElementById(`score-${activePlayer}`).textContent = '0';
  nextPlayer();
  return;
} 

if (dice !== 1 && dice !== 6) {
  roundScore += dice;
  document.getElementById(`current-${activePlayer}`).textContent = roundScore;
  lastDice = 0;
  return;
} 

if (dice === 6) {
  roundScore += dice;
  document.getElementById(`current-${activePlayer}`).textContent = roundScore;
  lastDice = dice;
  return;
}

nextPlayer();

2.Delete重复代码和提取函数

例如

function someFunctionName(diffRoundScore, lastDiceValue){
  roundScore += diffRoundScore;
  document.getElementById(`current-${activePlayer}`).textContent = roundScore;
  lastDice = lastDiceValue;
}

if (dice !== 1 && dice !== 6) {
  someFunctionName(dice, 0);
  return;
} 

if (dice === 6) {
  someFunctionName(dice, dice);
  return;
}

3.Change 检查“骰子 6”功能

function isDiceEqualsSix { return dice === 6};

if (isDiceEqualsSix && lastDice === 6) {
  // Player looses score
  scores[activePlayer] = 0;
  document.getElementById(`score-${activePlayer}`).textContent = '0';
  nextPlayer();
  return;
} 

if (dice !== 1 && !isDiceEqualsSix) {
  someFunctionName(dice, 0);
  return;
} 

if (isDiceEqualsSix) {
  someFunctionName(dice, dice);
  return;
}

4.Change "6" 到常量变量或函数

const LIMIT_SCORE = 6;

function isDiceEqualsSix { return dice === LIMIT_SCORE};

if (isDiceEqualsSix && lastDice === LIMIT_SCORE) {
  // Player looses score
  scores[activePlayer] = 0;
  document.getElementById(`score-${activePlayer}`).textContent = '0';
  nextPlayer();
  return;
}

希望对你有所帮助。

重构：如何将其改进为干净的代码

refactoring: How can I improve this as a clean code

javascript

refactoring