如何编写简洁JS代码实现餐食营养总求和与同类型餐食分项求和

核心优化方向 #

针对你现有代码冗余、可读性差、且缺少单餐类型统计功能的问题，优化方案从HTML结构规范和JS逻辑复用两个维度调整，同时覆盖你需要的两个核心功能：

• 全局所有餐食的营养总和统计
• 指定类型餐食的营养总和统计

一、HTML结构优化 #

1. 废弃非标准的<c>、<d>自定义标签，统一用标准标签展示内容，新增data-*自定义属性存储结构化数据，避免后续JS提取数值时需要正则处理单位、空格等冗余逻辑
2. 给每个餐食块添加data-type属性标记餐食类型，为按类型统计提供选择器依据
3. 统一类名命名规则，降低后续维护成本

二、JS逻辑优化 #

1. 把重复的统计逻辑抽成公共函数，仅需传入营养类型、餐食类型两个参数即可返回对应统计结果，代码量减少70%以上
2. 先在内存中完成数值计算，再一次性写入DOM，减少DOM操作次数，提升性能
3. 无需修改核心逻辑即可快速扩展新增营养类型、新增餐食类型的统计需求

优化后完整代码 #

HTML代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<div>
  <div>
    <!-- 全局总摄入展示区 -->
    <div>
        <strong>全局总摄入</strong><br>
      <div style="margin: 10px 0;">
          <span class="sum-global" data-nutri="kcal"></span> kcal<br>
          <span class="sum-global" data-nutri="fat"></span> g(脂肪)<br>
          <span class="sum-global" data-nutri="protein"></span> g(蛋白质)<br>
          <span class="sum-global" data-nutri="carbs"></span> g(碳水)<br>
      </div>
      <!-- 单类型餐食展示区（示例为午餐总和） -->
      <div style="margin: 20px 0;">
        <strong>午餐总摄入</strong><br>
        <span class="sum-type" data-type="lunch" data-nutri="kcal"></span> kcal<br>
        <span class="sum-type" data-type="lunch" data-nutri="fat"></span> g(脂肪)<br>
        <span class="sum-type" data-type="lunch" data-nutri="protein"></span> g(蛋白质)<br>
        <span class="sum-type" data-type="lunch" data-nutri="carbs"></span> g(碳水)<br>
      </div>
    </div>
    <!-- 餐食列表 -->
    <ul class="meal-item" data-type="lunch">
      <li>午餐</li>
      <ul>
        <li class="nutri-item" data-nutri="kcal" data-value="100">100 kcal</li>
        <li class="nutri-item" data-nutri="fat" data-value="10">10 g</li>
        <li class="nutri-item" data-nutri="protein" data-value="10">10 g</li>
        <li class="nutri-item" data-nutri="carbs" data-value="10">10 g</li>
      </ul>
    </ul>
    <ul class="meal-item" data-type="lunch">
      <li>午餐</li>
      <ul>
        <li class="nutri-item" data-nutri="kcal" data-value="200">200 kcal</li>
        <li class="nutri-item" data-nutri="fat" data-value="20">20 g</li>
        <li class="nutri-item" data-nutri="protein" data-value="20">20 g</li>
        <li class="nutri-item" data-nutri="carbs" data-value="20">20 g</li>
      </ul>
    </ul>
    <ul class="meal-item" data-type="breakfast">
      <li>早餐</li>
      <ul>
        <li class="nutri-item" data-nutri="kcal" data-value="300">300 kcal</li>
        <li class="nutri-item" data-nutri="fat" data-value="30">30 g</li>
        <li class="nutri-item" data-nutri="protein" data-value="30">30 g</li>
        <li class="nutri-item" data-nutri="carbs" data-value="30">30 g</li>
      </ul>
    </ul>
  </div>
</div>
</body>

JS代码 #

$(document).ready(function () {
  // 公共统计函数：参数1为营养类型，参数2为可选的餐食类型，不传则统计全部餐食
  function calcNutriSum(nutriType, mealType = null) {
    let total = 0;
    const selector = mealType ? 
      `.meal-item[data-type="${mealType}"] .nutri-item[data-nutri="${nutriType}"]` : 
      `.nutri-item[data-nutri="${nutriType}"]`;
    $(selector).each(function () {
      total += parseInt($(this).data('value')) || 0;
    });
    return total;
  }

  // 已支持的营养类型，新增类型只需在数组中添加值即可
  const nutriList = ['kcal', 'fat', 'protein', 'carbs'];
  
  // 1. 计算全局所有餐食的营养总和并渲染
  nutriList.forEach(nutri => {
    $(`.sum-global[data-nutri="${nutri}"]`).text(calcNutriSum(nutri));
  });

  // 2. 计算指定类型餐食的营养总和并渲染，示例为统计午餐
  nutriList.forEach(nutri => {
    $(`.sum-type[data-type="lunch"][data-nutri="${nutri}"]`).text(calcNutriSum(nutri, 'lunch'));
  });
});

优化优势 #

• 复用性强：新增营养类型、新增餐食类型统计都不需要复制重复逻辑，仅需修改配置项即可
• 易维护：数据和展示分离，后续修改数值规则不需要调整JS逻辑，直接修改HTML的data-value属性即可
• 性能更高：减少了DOM读写次数和正则匹配操作，计算效率更高

内容的提问来源于stack exchange，提问作者Lukasz