如何将多个功能合二为一而不重复?

Question

在prodrender。js中我想将这三个函数合并为一个这样我就不会重复了这应该与proddata。js相匹配因为数据在proddata。js中它通过prodrender。js进行渲染

有人可以建议我如何做到这一点，而不重复任何在prodRender.js的ProdData.js似乎工作得很好，因为我没有重复任何东西，只有prodRender.js是我重复三次。

所以请帮我一下

感谢

//ProdRender.js
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;
}

//ProdData.js
function ProductDataConsolidator() { }
ProductDataConsolidator.get = function (currency) {
var l = new LawnmowerRepository().getAll();
var p = new PhoneCaseRepository().getAll();
var t = new TShirtRepository().getAll();
const arr_names = [
[l, "lawnmower"],
[p, "Phone Case"],
[t, "T-Shirt"],
]
var products = [];

let multiplier = currency == "euro"
? 0.67
: currency == "dollar"
? 0.76
: 1;

for (let [arr,name] of arr_names){
for (var i = 0; i < arr.length; i++) {
products.push({
id: arr[i].id,
name: arr[i].name,
price: (arr[i].price * multiplier).toFixed(2),
type: name
});
}
}

return products;
}
ProductDataConsolidator.getInEuros = function(){
return ProductDataConsolidator.get("euro");
}
ProductDataConsolidator.getInUSDollars = function(){
return ProductDataConsolidator.get("dollar");
}

Answer 1

您需要将其分解为更小的函数并对它们进行参数化

const table = (currency, content) =>
`<table class="table table-striped">
<thead>
<tr><td colspan="3">Products (${currency})</td></tr>
<tr>
<td>Name</td>
<td>Price</td>
<td>Type</td>
</tr>
</thead>
<tbody>
${content}
</tbody>
</table>`
;
const table_content = data => 
data.map(({ name, price, type }) =>
`<tr>
<td>${name}</td>
<td>${price}</td>
<td>${type}</td>
</tr>`)
.join('n')
;
const currencyCode = {
dollar: 'USD',
euro: 'Euro',
newZealand: 'NZD'
};
function ProductDataRenderer() { }
ProductDataRenderer.prototype.render = function (currency, target) {
const productData = ProductDataConsolidator.get(currency);
const html = table(currencyCode[currency], table_content(productData));
document.getElementById(target).innerHTML = html;
}

我没有改变你的代码设计，但是你可以看到render做了3件不同的事情。它应该只呈现，而不是检索数据并在DOM中注入表。

让一个ProductDataConsolidator具有三个具有不同名称的静态方法也没有什么意义。要么你创建ProductDataConsolidator的3个衍生物，每个只有一个方法get，然后你传递一个正确的衍生物的实例给render，这样它只需要知道一个名为get的方法(顺便说一下，如果你有一个对象，只有一个方法，它是一个函数，所以为什么要麻烦使用一个对象)，或者你直接传递产品数据来渲染(首选)