Question

由于所有 3 个产品功能都具有相同的产品列表，我如何将这些多个功能合二为一，以免我在这里重复自己。

如何将这三个功能合二为一，因为所有功能都有产品列表，只是货币不同？有人可以建议我。谢谢

function ProductDataRenderer() { }
    
    ProductDataRenderer.prototype.render = function () {
        var nzd = 
            '<table class="table table-striped">'
            +'  <thead>'
            +'      <tr><td colspan="3">Products (NZD)</td></tr>'
            +'      <tr>'
            +'          <td>Name</td>'
            +'          <td>Price</td>'
            +'          <td>Type</td>'
            +'      </tr>'
            +'  </thead>'
            + ' <tbody>';
    
        var n = ProductDataConsolidator.get();
        for (var i = 0; i < n.length; i++) {
            nzd +=
                '<tr>'
            +       '<td>' + n[i].name +'</td>'
            +       '<td>' + n[i].price + '</td>'
            +       '<td>' + n[i].type + '</td>'
            +   '</tr>';
        }
        nzd += '</tbody></table>';
        document.getElementById("nzdProducts").innerHTML = nzd;
    
        var usd =
            '<table class="table table-striped">'
            + ' <thead>'
            + '     <tr><td colspan="3">Products (USD)</td></tr>'
            + '     <tr>'
            + '         <td>Name</td>'
            + '         <td>Price</td>'
            + '         <td>Type</td>'
            + '     </tr>'
            + ' </thead>'
            + ' <tbody>';
    
        var u = ProductDataConsolidator.getInUSDollars();
        for (var i = 0; i < u.length; i++) {
            usd +=
                '<tr>'
            +       '<td>' + u[i].name + '</td>'
            +       '<td>' + u[i].price + '</td>'
            +       '<td>' + u[i].type + '</td>'
            + '</tr>';
        }
        usd += '</tbody></table>';
        document.getElementById("usdProducts").innerHTML = usd;
    
        var euro =
            '<table class="table table-striped">'
            + ' <thead>'
            + '     <tr><td colspan="3">Products (Euro)</td></tr>'
            + '     <tr>'
            + '         <td>Name</td>'
            + '         <td>Price</td>'
            + '         <td>Type</td>'
            + '     </tr>'
            + ' </thead>'
            + ' <tbody>';
    
        var e = ProductDataConsolidator.getInEuros();
        for (var i = 0; i < e.length; i++) {
            euro +=
                '<tr>'
            +       '<td>' + e[i].name + '</td>'
            +       '<td>' + e[i].price + '</td>'
            +       '<td>' + e[i].type + '</td>'
            + '</tr>';
        }
        euro += '</tbody></table>';
        document.getElementById("euProducts").innerHTML = euro;
    }

Answer 1

嘿，这个应该可以解决问题

const renderTable = ({ items, title, containerId }) => {
  let tableTemplate =
    '<table class="table table-striped">' +
    '  <thead>' +
    `      <tr><td colspan="3">${title}</td></tr>` +
    '      <tr>' +
    '          <td>Name</td>' +
    '          <td>Price</td>' +
    '          <td>Type</td>' +
    '      </tr>' +
    '  </thead>' +
    ' <tbody>'

  for (let i = 0; i < items.length; i++) {
    tableTemplate +=
      '<tr>' +
      `<td>${items[i].name}</td>` +
      `<td>${items[i].price}</td>` +
      `<td>${items[i].type}</td>` +
      `</tr>`
  }

  tableTemplate += '</tbody></table>'
  document.getElementById(containerId).innerHTML = tableTemplate
}

renderTable({
  items: ProductDataConsolidator.get(),
  title: 'Products (NZD)',
  containerId: 'nzdProducts'
})
renderTable({
  items: ProductDataConsolidator.getInUSDollars(),
  title: 'Products (USD)',
  containerId: 'usdProducts'
})
renderTable({
  items: ProductDataConsolidator.getInEuros(),
  title: 'Products (Euro)',
  containerId: 'euProducts'
})

如何组合这些功能而不重复？

1 个答案: