12. 模块化思维：拆分工具函数与页面逻辑

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

三、知识点提醒

小项目也可以按 data / service / view / event 拆分思路。
函数命名要表达用途，而不是只写 `handle()` 或 `doIt()`。
复杂页面建议进一步拆成独立 JS 文件。

四、练习建议

把 format、service、view 拆成三个文件。
用 `<script type="module">` 引入模块。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/12-modules.js，下面同步展示，方便学习和复制。

// 页面 12：模块化思维示例（单文件写法，实际项目可拆分成多个 JS 文件）
const productData = [
  { name: 'Decking', price: 58, category: 'Outdoor' },
  { name: 'Wall Panel', price: 79, category: 'Cladding' },
  { name: 'Fencing', price: 66, category: 'Outdoor' }
];

const format = {
  money(value) {
    return `$${value.toFixed(2)}`;
  },
  uppercase(value) {
    return String(value).toUpperCase();
  }
};

const productService = {
  getAveragePrice(products) {
    const total = products.reduce((sum, item) => sum + item.price, 0);
    return total / products.length;
  },
  groupByCategory(products) {
    return products.reduce((result, item) => {
      if (!result[item.category]) result[item.category] = [];
      result[item.category].push(item);
      return result;
    }, {});
  }
};

const productView = {
  renderSummary(products) {
    const groups = productService.groupByCategory(products);
    const average = productService.getAveragePrice(products);
    const lines = Object.entries(groups).map(([category, items]) => {
      return `${format.uppercase(category)}：${items.map((item) => item.name).join(', ')}`;
    });

    return [
      `产品数量：${products.length}`,
      `平均价格：${format.money(average)}`,
      ...lines
    ].join('\n');
  }
};

document.querySelector('#p12-render').addEventListener('click', () => {
  document.querySelector('#p12-output').textContent = productView.renderSummary(productData);
});