Javascript 我想简明扼要地修改代码

var模板

被用作冗余，我想知道如何修复它，以便您只能使用此部分一次

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)
}

函数pluscal（数据）{
var idx=指数++
var form=parseInt（$（“#plusstr1”）.val（））+$（“#plus_op”）.text（）+parseInt（$（“#plusstr2”）.val（））
var cal=parseInt（$（“#plusstr1”）.val（））+parseInt（$（“#plusstr2”）.val（））
var template=“”+
“+idx+”+
“”表格+“”+
“”+data.result+“”+
"" +
""
$（“tbody”）.append（模板）
}

及

函数不稳定（数据）{
var idx=指数++
var form=parseInt（$（“#minsstr1”）.val（））+$（“#minus_op”）.text（）+parseInt（$（“#minsstr2”）.val（））
var cal=parseInt（$（“#minsstr1”）.val（））-parseInt（$（“#minsstr2”）.val（））
var template=“”+
“+idx+”+
“”表格+“”+
“”+data.result+“”+
"" +
""
$（“tbody”）.append（模板）
}

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

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 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>";
}

---

只需分离与模板相关的逻辑。在这里，我把它组织成一个函数。我合并了

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) 
}

函数cal（数据，calType）{
//calType必须为正或负
var idx=索引++
var form=parseInt（$（`${calType}str1`）.val（））+$（`${calType}}u op`）。text（）+parseInt（$（`${calType}str2`）.val（））
var cal=parseInt（$（`calType}str1`）.val（））+parseInt（$（`calType}str2`）.val（））
generateTemplate（idx、表单、cal、数据）；
}
函数generateTemplate（idx、表单、cal、数据）{
变量模板=`
${idx}
${form}
${data.result}
`
$（“tbody”）.append（模板）
}

只需分离与模板相关的逻辑即可。在这里，我把它组织成一个函数。我合并了

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) 
}

函数cal（数据，calType）{
//calType必须为正或负
var idx=索引++
var form=parseInt（$（`${calType}str1`）.val（））+$（`${calType}}u op`）。text（）+parseInt（$（`${calType}str2`）.val（））
var cal=parseInt（$（`calType}str1`）.val（））+parseInt（$（`calType}str2`）.val（））
generateTemplate（idx、表单、cal、数据）；
}
函数generateTemplate（idx、表单、cal、数据）{
变量模板=`
${idx}
${form}
${data.result}
`
$（“tbody”）.append（模板）
}

试试这个

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 
    ...
    ...
    */

希望它有帮助

试试这个

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 
    ...
    ...
    */

---

希望它有助于

将其放在自己的功能中？实际上，整个功能可以轻松实现generalized@ctmong检查我的答案@谢谢你！把它放在它自己的函数中？实际上整个函数可以很容易地generalized@ctmong检查我的答案@谢谢你！