javascript - 尽量减少js中的重复代码

Question

我在 JavaScript 中有一个计算器功能，使用简单的函数如下:

function add() {
    var a = parseInt(document.getElementById("num1").value);
    var b = parseInt(document.getElementById("num2").value);

    var result = a + b;
    document.getElementById("result").value = result;
}

function subtract() {
    var a = parseInt(document.getElementById("num1").value);
    var b = parseInt(document.getElementById("num2").value);

    var result = a - b;
    document.getElementById("result").value = result;
}

function multiply() {
    var a = parseInt(document.getElementById("num1").value);
    var b = parseInt(document.getElementById("num2").value);

    var result = a * b;
    document.getElementById("result").value = result;
}


function divide() {
    var a = parseInt(document.getElementById("num1").value);
    var b = parseInt(document.getElementById("num2").value);

    var result = a / b;
    document.getElementById("result").value = result;
}

function clearr() {
    document.getElementById("num1").value = "";
    document.getElementById("num2").value = "";
    document.getElementById("result").value = "";
}

<span style="margin-right:1px">Number 1 </span>
 <input id="num1" type="number"  ></br>
 <span style="margin-right:5px" >Number 2</span><input id="num2" type="number" ></br>
<span style="margin-right:29px">Result</span><input id="result" type="number"> </br>


<button id="add" onclick="add()">+</button>
<button id="subtract" onclick="subtract()">-</button>
<button id="multiply" onclick="multiply()">*</button>
<button id="divide" onclick="divide()">/</button>
<button id="clear" onclick="clearr()">clear</button>

但是有很多重复的代码。有没有其他方法可以解决这个问题，而不必每次都重复获取 a 和 b 的值。

Answer 1

您可以按如下方式优化和清理您的代码:

var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
var result = document.getElementById("result");

function add(){
    result.value = parseInt(num1.value) + parseInt(num2.value);
}

function subtract(){
    result.value = parseInt(num1.value) - parseInt(num2.value);
}

function multiply(){
    result.value = parseInt(num1.value) * parseInt(num2.value);
}


 function divide(){
     result.value = parseInt(num1.value) / parseInt(num2.value);
 }

 function clear(){
     num1.value = "";
     num2.value = "";
     result.value = "";
 }

如果你想要一个单一的功能。您可以编写以下函数:

 function PerformCalculation(calType){

     var num1 = document.getElementById("num1");
     var num2 = document.getElementById("num2");
     var result = document.getElementById("result");         

     switch(calType) {
         case 1:
             result.value = parseInt(num1.value) + parseInt(num2.value);
             break;
         case 2:
             result.value = parseInt(num1.value) - parseInt(num2.value);
             break;
         case 3:
             result.value = parseInt(num1.value) * parseInt(num2.value);
             break;
         case 4:
             result.value = parseInt(num1.value) / parseInt(num2.value);
             break;
        default:
            result.value ="";
            num1.value = "";
            num2.value = ""; 
    }  
 }

在单击加法按钮时调用 calType 1 到此函数，在单击减法按钮时调用 2，在乘法按钮时调用 3，在除法按钮时调用 4。传递任何其他数字以清除它。您的 HTML 将如下所示:

<button id="add" onclick="PerformCalculation(1)">+</button>
<button id="subtract" onclick="PerformCalculation(2)">-</button>
<button id="multiply" onclick="PerformCalculation(3">*</button>
<button id="divide" onclick="PerformCalculation(4)">/</button>
<button id="clear" onclick="PerformCalculation(0)">clear</button>