Question

var template用作冗余，我想知道如何解决它，因此您只能使用此部分一次

function pluscal(data) {
  var idx = index++
    var form = parseInt($("#plusstr1").val()) + $("#plus_op").text() + parseInt($("#plusstr2").val())
  var cal = parseInt($("#plusstr1").val()) + parseInt($("#plusstr2").val())
  var template = "<tr>" +
    "<td>" + idx + "</td>" +
    "<td>" + form + "</td>" +
    "<td>" + data.result + "</td>" +
    "<td><button class='ul icon button' id='remove_btn'><i class='trash alternate icon'></i></button></td>" +
    "</tr>"
  $("tbody").append(template)
}

和

function minuscal(data) {
  var idx = index++
    var form = parseInt($("#minusstr1").val()) + $("#minus_op").text() + parseInt($("#minusstr2").val())
  var cal = parseInt($("#minusstr1").val()) - parseInt($("#minusstr2").val())

  var template = "<tr>" +
    "<td>" + idx + "</td>" +
    "<td>" + form + "</td>" +
    "<td>" + data.result + "</td>" +
    "<td><button class='ul icon button' id='remove_btn'><i class='trash alternate icon'></i></button></td>" +
    "</tr>"
  $("tbody").append(template)
}

Answer 1

仅将与模板相关的逻辑分开。在这里，我将其组织为一个功能。而且我合并了pluscal和minuscal函数。

function cal(data, calType) { 
   // calType need to be either plus or minus
   var idx = index++ 
   var form = parseInt($(`#${calType}str1`).val()) + $(`#${calType}_op`).text() + parseInt($(`#${calType}str2`).val()) 
   var cal = parseInt($(`#${calType}str1`).val()) + parseInt($(`#${calType}str2`).val()) 
   generateTemplate(idx, form, cal, data);
}

function generateTemplate(idx, form, cal, data) {
   var template = `<tr>
   <td> ${idx} </td>
   <td> ${form} </td>
   <td> ${data.result} </td>
   <td><button class='ul icon button' id='remove_btn'><i class='trash alternate icon'></i></button></td>
   </tr>`
   $("tbody").append(template) 
}

Answer 2

创建另一个返回模板的函数

function getTemplate(idx, form, result) {
    return "<tr>" +
               "<td>" + idx + "</td>" +
               "<td>" + form + "</td>" +
               "<td>" + result + "</td>" +
               "<td><button class='ul icon button' id='remove_btn'><i class='trash alternate icon'></i></button></td>" +
           "</tr>";
}

所以您可以这样使用

function pluscal(data) {
    var idx = index++ 
    var form = parseInt($("#plusstr1").val()) + $("#plus_op").text() + parseInt($("#plusstr2").val()) 
    var cal = parseInt($("#plusstr1").val()) + parseInt($("#plusstr2").val()) 
    var template = getTemplate(idx, form, data.result);
    $("tbody").append(template)
}

Answer 3

尝试

function multiCase(caseType, data) {
    if (caseType === 'Maj') {
        str1 = "#plusstr1",
        str2 = "#plusstr2",
        op = "#plus_op"
    } else {
        str1 = "#minusstr1",
        str2 = "#minusstr2",
        op = "#minus_op"
    }
    var idx = index++ 
    var form = parseInt($(str1).val()) + $(op).text() + parseInt($(str2).val()) 
    var cal = parseInt($(str1).val()) + parseInt($(str2).val()) 
    /* And other part of your function 
    ...
    ...
    */

希望有帮助

我想简洁地修复代码

3 个答案: