如何制定 DRY 来避免重复代码。请不要连接

Question

我有 2 块 'for' 代码，它们非常相似，除了 Object.values(feelings) 和 Object.values(feelings2) 部分。我正在尝试创建一个包含以下代码的新 'const allFeelings' 以执行 DRY(Don't Repeat Yourself):

tbody += '<tr>';
  tbody += `<td class="menuItem">${menuItem}</td>`;
  tbody += `<div class="hide description">${description}</div>`;
  tbody += `<td>${value}</td>`;
  tbody += '</tr>';

请不要将其误认为是连接，因为我不想连接这些数组。他们将保持独立。

    let tbody = '<tbody>';

for (const { menuItem, description, value } of Object.values(feelings)) {
    tbody += '<tr>';
    tbody += `<td class="menuItem">${menuItem}</td>`;
    tbody += `<div class="hide description">${description}</div>`;
    tbody += `<td>${value}</td>`;
    tbody += '</tr>';
}
for (const { menuItem, description, value } of Object.values(feelings2)) {
    tbody += '<tr>';
    tbody += `<td class="menuItem">${menuItem}</td>`;
    tbody += `<div class="hide description">${description}</div>`;
    tbody += `<td>${value}</td>`;
    tbody += '</tr>';
}

tbody += '</tbody>';
document.getElementById('tableData').innerHTML = tbody;

Answer 1

创建函数。例如，

let tbody = '<tbody>';

function addToTableBody(feeling) {
  let returnVal = "";
  for (const {
      menuItem,
      description,
      value
    } of Object.values(feeling)) {
    returnVal += `
      <tr>
        <td class="menuItem">${menuItem}</td>
        <div class="hide description">${description}</div>
        <td>${value}</td>
      </tr>
    `
  }
  return returnVal;
}

tbody += addToTableBody(feelings)
tbody += addToTableBody(feelings2);

tbody += '</tbody>';
document.getElementById('tableData').innerHTML = tbody;

Answer 2

concat 不会改变现有数组 - 它会创建一个新数组。创建这样一个组合数组 只是为了渲染 并且之后不使用它似乎是可行的。您的 feelings 和 feelings2 将保持分开。

将所有内容嵌入到模板文字中也能很好地工作。

const tbody = `
    <tbody>
        ${Object.values(feelings).concat(Object.values(feelings2)).map(({ menuItem, description, value }) => `
            <tr>
                <td class="menuItem">${menuItem}</td>
                <div class="hide description">${description}</div>
                <td>${value}</td>
            </tr>
        `)}
    </tbody>
`;

如何制定 DRY 来避免重复代码。请不要连接

How to enact DRY to refrain from repeating code. NO concat please

javascript

dry

for-of-loop