Лучший способ использования функции JS - PullRequest
Новая
       0

Лучший способ использования функции JS

0 голосов
/ 14 февраля 2020

Этот код является простым калькулятором. Введите 2 числа и нажмите нужную операцию, чтобы получить вывод, и в этом коде нет ничего плохого. Но я пытаюсь найти возможные пути сокращения кода JavaScript до самого короткого. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function add(){
            var a = parseInt(document.getElementById('no1').value);
            var b = parseInt(document.getElementById('no2').value);
            document.write(a+b);
        }
        function sub(){
            var a = document.getElementById('no1').value;
            var b = document.getElementById('no2').value;
            document.write(a-b);
        }
        function mult(){
            var a = document.getElementById('no1').value;
            var b = document.getElementById('no2').value;
            document.write(a*b);
        }
        function div(){
            var a = document.getElementById('no1').value;
            var b = document.getElementById('no2').value;
            document.write(a/b);
        }
    </script>
</head>
<body>
    <input type="text" id="no1">
    <input type="text" id="no2">
    <input type="button" value="ADD" onclick="add()">
    <input type="button" value="SUB" onclick="sub()"> 
    <input type="button" value="MULT" onclick="mult()">
    <input type="button" value="DIV" onclick="div()">
    </body>
</html>

Ответы [ 2 ]

4 голосов
/ 14 февраля 2020

Вместо этого вы можете использовать делегирование событий на теле. При щелчке проверьте, является ли выбранный элемент входом со значением - если это так, найдите соответствующую функцию для запуска на объекте, индексированном значениями (например, ADD, SUB).

Вы также можете использовать type="number", чтобы побудить пользователя вводить только цифры c значения: 

const fns = {
  ADD: (a, b) => a + b,
  SUB: (a, b) => a - b,
  MULT: (a, b) => a * b,
  DIV: (a, b) => a / b,
}
const [no1, no2] = ['no1', 'no2'].map(id => document.getElementById(id));
document.body.addEventListener('click', (e) => {
  if (!e.target.matches('input[value]')) {
    return;
  }
  const { value } = e.target;
  const fn = fns[value];
  console.log(
    fn(Number(no1.value), Number(no2.value))
  );
});
<input type="number" id="no1">
<input type="number" id="no2">
<input type="button" value="ADD">
<input type="button" value="SUB">
<input type="button" value="MULT">
<input type="button" value="DIV">

Это может быть сделано еще короче (не выбирая элементы заранее, либо полагаясь на идентификаторы в окне, либо не сохраняя временные значения в переменных), но это будет менее эффективно и / или менее читабельно, поэтому я бы не рекомендовал это: 

const fns = {
  ADD: (a, b) => a + b,
  SUB: (a, b) => a - b,
  MULT: (a, b) => a * b,
  DIV: (a, b) => a / b,
}
document.body.addEventListener('click', ({ target }) => {
  if (target.matches('input[value]')) {
    console.log(fns[target.value](Number(no1.value), Number(no2.value)));
  }
});
<input type="number" id="no1">
<input type="number" id="no2">
<input type="button" value="ADD">
<input type="button" value="SUB">
<input type="button" value="MULT">
<input type="button" value="DIV">
1 голос
/ 14 февраля 2020

Вот что я бы сделал. 

const inputX = document.querySelector("#x");
const inputY = document.querySelector("#y");
const output = document.querySelector("#z");
const select = document.querySelector("#op");

const operations = {
    add: (x, y) => x + y,
    sub: (x, y) => x - y,
    mul: (x, y) => x * y,
    div: (x, y) => x / y,
};

const render = (x, y, op) => {
    inputX.value = x;
    inputY.value = y;
    output.value = op(x, y);
    select.value = op.name;

    inputX.onchange = () => render(parseFloat(inputX.value, 10), y, op);
    inputY.onchange = () => render(x, parseFloat(inputY.value, 10), op);
    select.onchange = () => render(x, y, operations[select.value]);
};

render(0, 0, operations.add);
<input id="x" type="number"/>
<select id="op">
  <option value="add">+</option>
  <option value="sub">-</option>
  <option value="mul">*</option>
  <option value="div">/</option>
</select>
<input id="y" type="number"/> =
<output id="z"></output>

Это не так кратко, как ответ CertainPerformance. Однако я чувствую, что это более понятно. Кроме того, это реактивно. Наконец, хотя здесь я не использовал делегирование событий, вы, безусловно, можете использовать делегирование событий.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...