重构my肿的代码的好方法是什么？

问题描述

我制作了一个简单的D＆D骰子掷骰应用程序进行练习，并注意到其中有很多重复的代码。我自己找不到一个很好的方法来重构它。任何提示表示赞赏。公平的警告，我是菜鸟，所以我已经知道它可能遇到的问题比我知道的要多。随意让我真正拥有它。

https://jsfiddle.net/sakonexus/nd82qjec/

function calcRoll(e) {
  let die = e.target.prevIoUsElementSibling.name;
  let rolls = e.target.prevIoUsElementSibling.value;
  let topRow = {};
  let bottomrow = {};
  let randomroll = 0;
  
  if (rolls == '') {
    rolls = 0;
  }
  
  if (die.includes("d4")) {
    topRow = document.getElementById("d4-roll-results").insertRow(0);
    bottomrow = document.getElementById("d4-roll-results").insertRow(1);
    topRow.insertCell(0).innerHTML = "Roll Count";
    bottomrow.insertCell(0).innerHTML = "Roll Result";
    
    for(i = 0; i < rolls; i++) {
      topRow.insertCell(i + 1).innerHTML = i + 1;
    }
    
    for(j = 0; j < rolls; j++) {
        randomroll = Math.floor(Math.random() * 4) + 1;
        bottomrow.insertCell(j + 1).innerHTML = randomroll;
    }
  } else if (die.includes("d6")) {
    topRow = document.getElementById("d6-roll-results").insertRow(0);
    bottomrow = document.getElementById("d6-roll-results").insertRow(1);
    topRow.insertCell(0).innerHTML = "Roll Count";
    bottomrow.insertCell(0).innerHTML = "Roll Result";
    
    for(i = 0; i < rolls; i++) {
      topRow.insertCell(i + 1).innerHTML = i + 1;
    }
    
    for(j = 0; j < rolls; j++) {
        randomroll = Math.floor(Math.random() * 6) + 1;
        bottomrow.insertCell(j + 1).innerHTML = randomroll;
    }
  } else if (die.includes("d8")) {
    topRow = document.getElementById("d8-roll-results").insertRow(0);
    bottomrow = document.getElementById("d8-roll-results").insertRow(1);
    topRow.insertCell(0).innerHTML = "Roll Count";
    bottomrow.insertCell(0).innerHTML = "Roll Result";
    
    for(i = 0; i < rolls; i++) {
      topRow.insertCell(i + 1).innerHTML = i + 1;
    }
    
    for(j = 0; j < rolls; j++) {
        randomroll = Math.floor(Math.random() * 8) + 1;
        bottomrow.insertCell(j + 1).innerHTML = randomroll;
    }
  } else if (die.includes("d10")) {
    topRow = document.getElementById("d10-roll-results").insertRow(0);
    bottomrow = document.getElementById("d10-roll-results").insertRow(1);
    topRow.insertCell(0).innerHTML = "Roll Count";
    bottomrow.insertCell(0).innerHTML = "Roll Result";
    
    for(i = 0; i < rolls; i++) {
      topRow.insertCell(i + 1).innerHTML = i + 1;
    }
    
    for(j = 0; j < rolls; j++) {
        randomroll = Math.floor(Math.random() * 10);
        bottomrow.insertCell(j + 1).innerHTML = randomroll;
    }
  } else if (die.includes("d12")) {
    topRow = document.getElementById("d12-roll-results").insertRow(0);
    bottomrow = document.getElementById("d12-roll-results").insertRow(1);
    topRow.insertCell(0).innerHTML = "Roll Count";
    bottomrow.insertCell(0).innerHTML = "Roll Result";
    
    for(i = 0; i < rolls; i++) {
      topRow.insertCell(i + 1).innerHTML = i + 1;
    }
    
    for(j = 0; j < rolls; j++) {
        randomroll = Math.floor(Math.random() * 12) + 1;
        bottomrow.insertCell(j + 1).innerHTML = randomroll;
    }
  } else if (die.includes("d20")) {
    topRow = document.getElementById("d20-roll-results").insertRow(0);
    bottomrow = document.getElementById("d20-roll-results").insertRow(1);
    topRow.insertCell(0).innerHTML = "Roll Count";
    bottomrow.insertCell(0).innerHTML = "Roll Result";
    
    for(i = 0; i < rolls; i++) {
      topRow.insertCell(i + 1).innerHTML = i + 1;
    }
    
    for(j = 0; j < rolls; j++) {
        randomroll = Math.floor(Math.random() * 20) + 1;
        bottomrow.insertCell(j + 1).innerHTML = randomroll;
    }
  }
  
  
}

解决方法

首先，您应该avoid inline handlers，它们有太多问题值得使用。正确地使用JavaScript和addEventListener附加侦听器。

单击按钮，导航至其父窗体或div以标识骰子的类型。然后，从父div导航到div的表子并填充它：

document.querySelector('#dice').addEventListener('click',(e) => {
  if (!e.target.matches('button')) {
    return;
  }
  e.preventDefault();
  const { target } = e;
  const div = target.closest('div');
  const dieType = div.dataset.dieType;
  const numDice = target.previousElementSibling.value;
  const table = div.querySelector('table');
  table.innerHTML += `
    <tr>
      <td>Roll Count</td>
      ${Array.from({ length: numDice },(_,i) => `<td>${i + 1}</td>`).join('')}
    </tr>
    <tr>
      <td>Roll Result</td>
      ${Array.from({ length: numDice },() => `<td>${Math.floor(Math.random() * dieType) + 1}</td>`).join('')}
    </tr>
  `;
});

#dice table {
  border-collapse: collapse;
}
#dice td {
  border: 1px solid black;
  padding: 4px;
}

#dice div {
  padding: 10px 0 0;
}

<div>
  <h1>Select the number of rolls for each dice</h1>
  <div id="dice">
    <div data-die-type="4">
      <form>
        <label><span>D4&#160;&#160;</span><input type="number" min="0" max="10"><button>Confirm</button></label>
      </form>
      <div><table></table></div>
    </div>
    <hr />
    <div data-die-type="6">
      <form>
        <label><span>D6&#160;&#160;</span><input type="number" min="0" max="10"><button>Confirm</button></label>
      </form>
      <div><table></table></div>
    </div>
    <hr />
    <div data-die-type="8">
      <form>
        <label><span>D8&#160;&#160;</span><input type="number" min="0" max="10"><button>Confirm</button></label>
      </form>
      <div><table></table></div>
    </div>
    <hr />
    <div data-die-type="10">
      <form>
        <label><span>D10</span><input type="number" min="0" max="10"><button>Confirm</button></label>
      </form>
      <div><table></table></div>
    </div>
    <hr />
    <div data-die-type="12">
      <form>
        <label><span>D12</span><input type="number" min="0" max="10"><button>Confirm</button></label>
      </form>
      <div><table></table></div>
    </div>
    <hr />
    <div data-die-type="20">
      <form>
        <label><span>D20</span><input type="number" min="0" max="10"><button>Confirm</button></label>
      </form>
      <div><table></table></div>
    </div>
  </div>
</div>

了解如何也可以使HTML更加显干-不需要所有这些不同的ID和属性。