Как оптимизировать код JavaScript?

104

20 мая 2021, 09:50

Недавно начал изучать JS, для практики решил написать небольшой калькулятор. Все в нем более-менее работает, но интересует вопрос, как оптимизировать код, т.к. во всех функциях 90% повторябщейся информации.

Создавал отдельную функцию Init() и выносил туда всю инициализацию переменных, вызывая ее в коде остальных функций. Однако, выдавало ошибки, что переменные не определены.

Помогите оптимизировать данный код.

    function sum(){
    let num1 = document.querySelector('#n1').value;
    let num2 = document.querySelector('#n2').value;
    let result;
    num1 = parseInt(num1);
    num2 = parseInt(num2);
    result = num1 + num2;
    document.querySelector('#out').innerHTML += result + ' ';
}
function dif(){
    let num1 = document.querySelector('#n1').value;
    let num2 = document.querySelector('#n2').value;
    let result;
    num1 = parseInt(num1);
    num2 = parseInt(num2);
    result = num1 - num2;
    document.querySelector('#out').innerHTML += result;
}
function dvs() {
    let num1 = document.querySelector('#n1').value;
    let num2 = document.querySelector('#n2').value;
    let result;
    num1 = parseInt(num1);
    num2 = parseInt(num2);
   if (num1 <= 0 || num2 <=0){
       alert('Числа должны быть больше 0');
   }
   else {
       result = num1 / num2;
       document.getElementById('out').innerHTML += result + ' ';
   }
}

Answer 1

Можно сразу вынести поиск элементов по дереву DOM и потом использовать их в остальных частях программы. Поскольку значения будут меняться, то их сразу получать смысла нет и лучше делать это в процессе. В общем можно как-то так сделать.

(_ => { 
    let n1 = document.querySelector('#n1'); 
    let n2 = document.querySelector('#n2'); 
    let out = document.querySelector('#out'); 
     
    document.querySelector('#sum').onclick = () => { 
        out.innerHTML += `${parseInt(n1.value) + parseInt(n2.value)} `; 
    } 
 
    document.querySelector('#dif').onclick = () => { 
        out.innerHTML += `${parseInt(n1.value) - parseInt(n2.value)} `; 
    } 
 
    document.querySelector('#dvs').onclick = () => { 
        let [v1, v2] = [parseInt(n1.value), parseInt(n2.value)]; 
        if (v1 <= 0 || v2 <=0) 
            alert('Числа должны быть больше 0'); 
        else  
            out.innerHTML += `${v1 / v2} `;; 
    } 
     
})();

<div> 
  <input id="n1" type="text" /> 
</div> 
<div> 
  <input id="n2" type="text" /> 
</div> 
<div> 
  <label id="out" /> 
</div> 
<br /> 
<button id="sum"> + </button> 
<button id="dif"> - </button> 
<button id="dvs"> / </button>

P.S. Обертку (_ => { /* код */ })(); из кода можно удалить, она нужна только для того, чтобы не захломлять глобальное пространство и переменные n1, n2, out не были видны за пределами этой обертки.