Javascript 如何在不重复的情况下将多个功能组合成一个？

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

//ProdRender.js
函数ProductDataRenderer（）{}
ProductDataRenderer.prototype.render=函数（）{
var nzd=
''
+'  '
+“产品（新西兰元）”
+'      '
+“姓名”
+“价格”
+“类型”
+'      '
+'  '
+ ' ';
var n=ProductDataConsolidator.get（）；
对于（变量i=0；i

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

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

const表=（货币、内容）=>
`
产品（${currency}）
名称
价格
类型
${content}
`
;
const table_content=数据=>
data.map（{name，price，type}）=>
`
${name}
${price}
${type}
`)
.join（“\n”）
;
常量货币代码={
美元：“美元”，
欧元：“欧元”，
新西兰：“新西兰元”
};
函数ProductDataRenderer（）{}
ProductDataRenderer.prototype.render=函数（货币、目标）{
const productData=ProductDataConsolidator.get（货币）；
const html=表格（currencyCode[currency]，表格内容（productData））；
document.getElementById（target.innerHTML=html；
}

我没有更改代码的设计，但是您可以看到

render

做了3件不同的事情。它应该只呈现数据，而不是检索数据并将表注入DOM中

---

让一个

ProductDataConsolidator

与三个具有不同名称的静态方法结合使用也没有什么意义。您可以创建3个

ProductDataConsolidator

的派生，每个派生只使用一个方法

get

，然后将右派生的实例传递给

render

，这样它只需要知道一个名为

get

（顺便说一句，如果一个对象只有一种方法，那么它是一个函数，为什么还要麻烦使用对象），或者直接将产品数据传递给渲染（首选）

不相关：您可以使用多行字符串和变量替换，而不是使用大量的

+

。这是否回答了您的问题？