简化/组合if语句逻辑(当使用数字时)
Simplifying/Combining if statement logic (When using Numbers)
我一直在四处寻找,谷歌这里和那里,如何正确地编写一个非常简单的计算器。更具体地说,是具有集合值的布尔计算器。如果我失去了你,请耐心听我解释。
我需要使用复选框来设置input.value
。该值将在Web-Java applet的其他地方拾取;因此需要input.value
。
为了节省时间和混乱,我使用JS Fiddle构建了一个小片段,并意识到我不知道如何在JS中使用数字。到目前为止,我学到的一切都是通过网络和各种其他资源自学的。
我努力理解写逻辑的有效方法,但可以勉强通过,通过写真正简单的逻辑。我写得越多,问得越多,我学到的就越多。所以我来这里寻求一些关于如何最小化我的给定代码片段的建议。
它不健壮,不优雅;但这是我的路线。
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>
我的问题
简化给定代码并提高其性能的最佳方法是什么?更具体地说,有没有一种更简单的方法来处理JS中的数字?或者我当前的代码片段是否正确?
如果你是一个经验丰富的JS开发人员,你会如何处理上述期望的结果?
首先,尽量使代码可重用。
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
第四点也是更重要的一点,使用更好的变量名。a-e
或i, i1, i2
是不好的名字。只有你才能理解你的代码(直到你进入上下文)。总是使用精确的有意义的名字。从长远来看,这是有帮助的。我甚至把函数名保持在30个字符以上,只是为了定义它的目的。
也试着把代码分解成更小的函数。这将增加重用它们的范围。
你可以参考更新后的代码,并询问任何查询,如果你有。
希望有帮助!
- 如何在谷歌可视化中组合数字和模式格式化程序
- 将数组中的所有数字组合相加
- 获取对象的所有可能组合,其中值的总和与数字匹配
- 给定一个4位锁,其中每个数字可以是0、1、2、3或4,我如何计算所有加起来为4的组合
- Javascript给定了一个数字,我想要所有可能的组合和元素数组
- 显示给定输入数字的数据集中字母表的所有可能组合
- 当前面的数字或前面字符的组合未知时提取字符串
- 与数字组合的唯一性,与顺序无关
- 从组合框中获取值并向其添加一个数字
- 将 2 个数字组合起来用作对象键的有效方法是什么
- Captcha IMG/数字组合
- 对具有字母和数字组合的数据进行排序,该数据在javascript中的json数组中具有值
- 具有唯一结果的两个数字组合的精简算法
- 用于字母/数字组合的正则表达式
- Knockout:为数字组合2个自定义绑定-金融数据
- JavaScript Tic Tac Toe -查找数组中所有可能的数字组合
- 试图将随机化的数字组合起来
- 将n个数字组合成两个唯一的组
- Javascript - 排序字母数字组合
- 字母和数字组合与正则表达式匹配