我一直在四处寻找,到处搜索,如何正确编写一个非常简单的计算器。更具体地说,是具有设定值的 bool 计算器。如果我失去了你,请耐心等待,我会尽力解释。
我需要使用复选框来设置input.value
。该值将在 Web-Java 小程序中的其他位置获取;因此需要 input.value
。
为了节省时间和减少困惑,我使用 JS Fiddle 构建了一个小片段。 ,并意识到我并不真正知道如何在 JS 中使用 Numbers。到目前为止,我所学到的一切都是通过网络和其他各种来源自学的。
我很难理解编写逻辑的有效方法,但可以通过编写非常简单的逻辑勉强度日。我写的和问的问题越多,我学到的就越多。因此,我来这里寻求一些有关如何最小化给定代码片段的建议。
<小时/>It's not robust, It's not elegant; but it's my route in.
function calculate() {
// set the variables
var a = document.getElementById('checkboxopt');
var b = document.getElementById('checkboxopt1');
var c = document.getElementById('pnvar');
var d = document.getElementById('adjvar');
var e = document.getElementById('adjvar2');
var i = 0;
var i2 = 0;
if (a.checked) {
console.log('Arg True')
i = i + 80;
d.value = i;
} else {
console.log('Arg False')
d.value = i;
}
if (b.checked) {
console.log('Arg True')
i2 = i2 + 30;
e.value = i2
} else {
console.log('Arg False')
e.value = i2;
}
console.log(i, i2);
c.value = i + i2;
};
var cbs = document.querySelectorAll('[type="checkbox"]');
[].forEach.call(cbs, function(cb) {
cb.addEventListener("click", function() {
console.log(this.id);
calculate();
});
});
calculate();
.editoropt {
font-family: Calibri, sans-serif;
width: 160px;
background: #f8f8ff;
padding: .5em;
border: solid 1px #ddd;
}
#checkboxopt {
float: left;
margin-right: 1em;
margin-top: 4px;
}
#checkboxopt1 {
float: left;
margin-right: 1em;
margin-top: 4px;
}
.pnvar {
width: 95%;
}
input:-moz-read-only {
/* For Firefox */
background-color: transparent;
border: none;
border-width: 0px;
}
input:read-only {
background-color: transparent;
border: none;
border-width: 0px;
}
<div class="seq-box-form-field editoropt ">
<label for="opt1"><span style="padding-right: 10px; vertical-align: 1px;">Default 80mm </span>
<input type="checkbox" name="checkboxopt" id="checkboxopt" value="true" checked />
<input type="hidden" name="opt1" id="opt1" value="true" />
</label>
</div>
<div class="seq-box-form-field editoropt ">
<label for="opt1"><span style="padding-right: 10px; vertical-align: 1px;">Add 30mm </span>
<input type="checkbox" name="checkboxopt1" id="checkboxopt1" value="true" />
<input type="hidden" name="opt2" id="opt2" value="true" />
</label>
</div>
<div class="editoropt">
<input class="pnvar" id="pnvar" name="pnvar" placeholder="Null" onkeydown="if (event.keyCode == 13) { event.preventDefault(); return false; }" value="" class="required" type="text">
<input name="adjvar" class="pnvar" id="adjvar" readonly value="0">
<input name="adjvar" class="pnvar" id="adjvar2" readonly value="0">
</div>
</div>
My Question
What would be the best way to simplify my given code, and improve it's performance. More Specifically, is there a more simplistic way of working with numbers within JS? Or am I on the right track with my current snippet?
If you are an experienced JS developer how would you tackle the desired result above?
我希望得到一些详细的指导。
最佳答案
首先,尝试使代码尽可能可重用。所以,
if (a.checked) {
console.log('Arg True')
i = i + 80;
d.value = i;
} else {
console.log('Arg False')
d.value = i;
}
if (b.checked) {
console.log('Arg True')
i2 = i2 + 30;
e.value = i2
} else {
console.log('Arg False')
e.value = i2;
}
可以替换为
function dummy(el, val) {
i2 += el.checked ? val : 0;
}
其次,HTML 中不要有内联函数。它会弄脏你的 HTML 并使调试变得困难。您应该将所有监听器包装在包装函数中。这将使您甚至可以将它们全部导出到单独的文件中,并且您将知道在哪里查找。
第三,不要在代码中硬编码值 80
或 30
,而是使用 data-attribute
创建映射或将其绑定(bind)到元素
第四个也是更重要的一点,使用更好的变量名称。 a-e
或 i, i1, i2
是不好的名字。只有您才能理解您的代码(直到您处于上下文中)。始终使用精确且有意义的名称。从长远来看,这将有所帮助。我什至保留了长达 30 多个字符的函数名称,只是为了定义其用途。
还尝试将代码分解为更小的函数。这将增加重用它们的范围。
您可以引用updated code如有任何疑问,请提出。
希望对你有帮助!
关于javascript - 简化/组合 if 语句逻辑(使用数字时),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39897893/