简化/组合if语句逻辑(使用数字时)

时间:2016-10-06 13:53:36

标签: javascript calculated-field

我一直在四处寻找,在这里和那里谷歌搜索,如何正确编码一个非常简单的计算器。更具体地说是具有设定值的布尔计算器。如果我失去了你,请耐心等待,我会尝试解释。

我需要使用复选框来设置input.value。该值将在Web-Java applet中的其他位置获取;因此需要input.value

为了节省时间和困惑,我使用JS Fiddle构建了一个小片段,并意识到我不知道如何在JS中使用Numbers。到目前为止,我所学到的一切都是通过网络和各种其他来源自学的。

我很难理解编写逻辑的有效方法,但可以通过编写非常简单的逻辑来勉强。我写的越多,问问我学的越多。所以我来这里寻求一些关于如何最小化我给定的代码片段的建议。

  

它不健壮,不优雅;但这是我的路线。



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>
&#13;
&#13;
&#13;

  

我的问题

     

简化我的代码并提高其性能的最佳方法是什么。更具体地说,在JS中使用数字是否有更简单的方法?或者我使用我当前的片段走在正确的轨道上?

     

如果您是一位经验丰富的JS开发人员,您将如何处理上述所需的结果?

我希望能提供一些详细的指导。

1 个答案:

答案 0 :(得分:1)

首先,尝试使代码尽可能可重用。所以,

#!/bin/bash
startingPort=10
endingPort=40

for (( port=$startingPort; port<=$endingPort; port++ ))
do
ssh admin@localhost -p $port
done

可以替换为

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;
}

其次,HTML中没有内联函数。它会弄脏您的HTML并使调试变得困难。您应该将所有侦听器包装在包装器函数中。这使您甚至可以将所有这些文件导出到单独的文件中,并且您将知道在哪里查看。

第三,不要在代码中使用硬编码值function dummy(el, val) { i2 += el.checked ? val : 0; } 80,而是使用30制作地图或将其绑定到元素

第四个也是更重要的一个,使用更好的变量名。 data-attributea-e是坏名字。只有你会理解你的代码(直到你在上下文中)。始终使用精确有意义的名称这将有助于长远。我甚至保留了30多个字符的函数名称来定义其目的。

还尝试在较小的函数中破坏代码。这将增加重用它们的范围。

如果有,请参考updated code并提出任何疑问。

希望它有所帮助!