由于所有 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;
}
嘿，这个应该可以解决问题
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'
})
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
