Блог

Я искал, гуглил здесь и там, как правильно закодировать очень упрощенный калькулятор. Более конкретно, логический калькулятор с заданными значениями. Если я потерял тебя, потерпи, я попытаюсь объяснить.

Мне нужно использовать флажки для установки a input.value . Это значение будет выбрано в другом месте в апплете Web-Java; отсюда и необходимость 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 символов, чтобы определить их назначение.

Также попробуйте разбить свой код на более мелкие функции. Это увеличит возможности их повторного использования.

Вы можете ссылаться на обновленный код и задавать любые запросы, если они у вас есть.

Надеюсь, это поможет!