JS函数，从多个输入中计数

Question

我制作了一个简单的计算器，它接收用户输入的信息，然后使用两个const执行一个操作，并在一个选定的。

总共有5个输入和5个输出。对于每个输入和输出，我有2个const。

代码如下:

const suprqMean = 3.93;
const usabilityMean = 4.06;
const suprqSD = 0.29;
const usabilitySD = 0.29; 
{
const input = document.querySelector("#formGroupExampleInput");
const log = document.getElementById("#suprq");
input.addEventListener("change", updateValue);
function updateValue(e) {
suprq.textContent = (e.target.value - suprqMean) / suprqSD;
}
}
{
const input = document.querySelector("#formGroupExampleInput1");
const log = document.getElementById("#usability");
input.addEventListener("change", updateValue);
function updateValue(e) {
usability.textContent = (e.target.value - usabilityMean) / usabilitySD;
}
}

<form class="leftForm container">
<div class="form-group">
<label for="formGroupExampleInput">SUPR-Q raw</label>
<input type="number" class="form-control" id="formGroupExampleInput" placeholder="SUPR-Q raw">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Usability raw</label>
<input type="number" class="form-control" id="formGroupExampleInput1" placeholder="Usability raw">
</div>
</form>
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">Z-Score</th>
<th scope="col">Result</th>
</tr>
</thead>
<tbody>
<tr>
<td>SUPR-Q:</td>
<td id="suprq"></td>
</tr>
<tr>
<td>Usability:</td>
<td id="usability"></td>
</tr>
</tbody>
</table>

它可以工作，但是JS代码看起来很糟糕。有什么方法来优化JS代码?我想要的结果是在实时输入，因为它现在的工作。

Answer 1

这是一个'浓缩'版本

const values = {
suprqMean: 3.93,
usabilityMean: 4.06,
suprqSD: .29,
usabilitySD: .29
};
["suprq", "usability"].map((slug => {
document.querySelector(`#${slug}Input`).addEventListener("change", (clicked => {
document.getElementById(`${slug}`).textContent = (clicked.target.value - values[`${slug}Mean`]) / values[`${slug}SD`]
}))
}));

<form class="leftForm container">
<div class="form-group">
<label for="formGroupExampleInput">SUPR-Q raw</label>
<input type="number" class="form-control" id="suprqInput" placeholder="SUPR-Q raw">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Usability raw</label>
<input type="number" class="form-control" id="usabilityInput" placeholder="Usability raw">
</div>
</form>
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">Z-Score</th>
<th scope="col">Result</th>
</tr>
</thead>
<tbody>
<tr>
<td>SUPR-Q:</td>
<td id="suprq"></td>
</tr>
<tr>
<td>Usability:</td>
<td id="usability"></td>
</tr>
</tbody>
</table>

Answer 2

您可以通过检查里面的e.target.id将这两个函数合并为一个，并一次选择两个输入值进行循环并添加事件侦听器:

const suprqMean = 3.93;
const usabilityMean = 4.06;
const suprqSD = 0.29;
const usabilitySD = 0.29;
document.querySelectorAll("[id^=formGroupExampleInput").forEach(el => {
el.addEventListener("change", updateValue);
});
function updateValue(e) {
inpVer = e.target.id === "formGroupExampleInput" ? true : false;
outEl = inpVer ? suprq : usability;
outVal = inpVer ? (e.target.value - suprqMean) / suprqSD : (e.target.value - usabilityMean) / usabilitySD;
outEl.textContent = outVal;
}

<form class="leftForm container">
<div class="form-group">
<label for="formGroupExampleInput">SUPR-Q raw</label>
<input type="number" class="form-control" id="formGroupExampleInput" placeholder="SUPR-Q raw">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Usability raw</label>
<input type="number" class="form-control" id="formGroupExampleInput1" placeholder="Usability raw">
</div>
</form>
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">Z-Score</th>
<th scope="col">Result</th>
</tr>
</thead>
<tbody>
<tr>
<td>SUPR-Q:</td>
<td id="suprq"></td>
</tr>
<tr>
<td>Usability:</td>
<td id="usability"></td>
</tr>
</tbody>
</table>

Answer 3

看起来你在JS代码中有点重复自己。

通常的补救方法是将重复的代码重构为可重用的函数:

const suprqMean = 3.93;
const usabilityMean = 4.06;
const suprqSD = 0.29;
const usabilitySD = 0.29;

function listenForChanges (inputId, logId, output, mean, SD) {
const input = document.querySelector(inputId);
const log = document.querySelector(logId);
input.addEventListener("change", updateValue);
function updateValue(e) {
output.textContent = (e.target.value - mean) / SD;
}
}
listenForChanges("#formGroupExampleInput", "#suprq", suprq, suprqMean, suprqSD)
listenForChanges("#formGroupExampleInput1", "#usability", usability, usabilityMean, usabilitySD)

还有一些感觉很奇怪。在你的原始代码片段中(在我的代码片段中也是如此)有两个从未声明过的变量的引用:suprq和usability。

但除此之外，你是否喜欢使用函数作为使代码不那么"糟糕"的第一步?

如果你有很多这样的，下一步可能是为所有输入对创建一个数据结构，并在每个输入对上循环调用这个函数:

const all = [{
inputId: "#formGroupExampleInput",
logId: "#suprq",
output: suprq,
mean: 3.93,
SD: 0.29
}, {
inputId: "#formGroupExampleInput1",
logId: "#usability",
output: usability,
mean: 4.06,
SD: 0.29
}]
all.forEach(listenForChanges)
function listenForChanges ({inputId, logId, output, mean, SD}) {
const input = document.querySelector(inputId);
const log = document.querySelector(logId);
input.addEventListener("change", updateValue);
function updateValue(e) {
output.textContent = (e.target.value - mean) / SD;
}
}

注意，我在这里稍微改变了函数，让它接受单个对象参数而不是一系列参数。这只是为了更容易地将所有内容与forEach粘合在一起。

Answer 4

其他人已经展示了使用配置数组生成处理程序的方法。

您也可以从相同的配置生成HTML，这意味着添加新类型只是多一个配置条目的问题:

const config = [
{title: 'SUPR-Q', mean: 3.93, sd: 0.29, input: 'formGroupExampleInput', log: 'suprq'},
{title: 'Usability', mean: 4.06, sd: 0.29, input: 'formGroupExampleInput1', log: 'usability'}
]
document.getElementById('main').innerHTML = `
<form class="leftForm container">
${config .map (({title, input}) => `  <div class="form-group">
<label for="${input}">${title} raw</label>
<input type="number" class="form-control" id="${input}" placeholder="${title} raw">
</div>`) .join ('n'  )}
</form>
<table class="table table-striped table-dark">
<thead><tr><th scope="col">Z-Score</th><th scope="col">Result</th></tr></thead>
<tbody>${config .map (({title, output}) => 
`<tr><td>${title}</td><td id="${output}"></td></tr>`).join('n    ')
}</tbody>
</table>`
config .forEach (({title, mean, sd, input, log}) => {
const inputElt = document.getElementById(input);
const logElt = document.getElementById(log);
inputElt.addEventListener("change", function (e) {
logElt.textContent = (e.target.value - mean) / sd;
})
})

<div id="main"></div>

我也切换到一致的getElementById。我们可以很容易地在这里使用querySelector，但是当我们总是得到id时，将它们混合在一起感觉很奇怪。