![](/img/trans.png)
[英]What's a good way to refactor a growing number of javascript/jquery functions?
[英]What's a good way to refactor my bloated code?
我做了一个简单的 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;
}
}
}
首先,您应该避免使用内联处理程序,它们有太多值得使用的问题。 使用 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  </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  </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  </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 变得更加 DRY - 不需要所有这些不同的 ID 和属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.