说到「模板方法」这个词，hen多人第一反应是「页面模板」或「字符串拼接」——但在面向对象的世界里它指的是一种先定大局、后填细节的设计手法。今天我们把这套思路搬到前端代码里用几段生动的例子展示它到底怎么帮你把繁琐的业务流程变得井井有条。

一、为什么要把流程骨架先写好？

在实际项目中，你会经常遇到「这些页面走的路线几乎一样，只是某几个环节略有差异」的情况。比如后台管理系统里的列表页：获取参数 → 发请求 → 处理数据 → 渲染 UI → 收尾工作。

Ru果每个页面dou自己写一遍，代码会出现大量重复；Ru果只靠复制粘贴，又hen难保证执行顺序统一，后期改动时容易遗漏关键步骤。

模板方法模式正是为了解决这类痛点而生：它让父类负责整体流程，把「可变」的环节交给子类去实现。这样既Neng保持一致性，又Neng让每个子类专注自己的业务。

核心要点概览

先锁定执行顺序。父类里写死“先 A 再 B 再 C”。

提供默认实现或空壳。子类Ke以覆盖，也Ke以直接使用父类提供的空函数。

钩子方法。不是必须实现，但预留了 入口。

子类只关心自己的细节。不必再管整体流程是否被破坏。

二、Zui简版骨架——BaseListPage

下面给出一个极简的基类示例，演示如何把「列表页」的通用步骤抽象出来：

class BaseListPage {
  // 统一入口
  async init {
    this.beforeInit;               // 前置钩子
    const params = this.getParams; // 参数准备
    const raw = await this.fetchData; // 数据请求
    const list = this.formatData; // 数据加工
    this.render;                // 渲染输出
    this.afterInit;                // 后置钩子
  }
  /*** 以下dou是可被子类覆盖的方法 ***/
  beforeInit {}                    // 默认空实现
  afterInit {}                     // 默认空实现
  getParams {
    return { pageNum: 1, pageSize: 20 };
  }
  fetchData {
    throw new Error;
  }
  formatData {
    throw new Error;
  }
  render {
    console.log;
  }
}

kan得出来这段代码只Zuo了两件事：

固定顺序：beforeInit → getParams → fetchData → formatData → render → afterInit

留出 点：

三、真实业务里的两个典型子类 UserListPage —— 用户列表页

class UserListPage extends BaseListPage {
  beforeInit {
    console.log;
  }
  afterInit {
    console.log;
  }
  fetchData {
    // 假设这里调用了封装好的 API 方法
    return fetchUserList;
  }
  formatData {
    return res.data.list.map(item => ({
      id: item.id,
      name: item.nickname,
      status: item.status === '1' ? '启用' : '停用'
    }));
  }
  render {
    console.table;   // geng直观地打印结果
  }
}

OrderListPage ——订单列表页

class OrderListPage extends BaseListPage {
  getParams {
    return { pageNum: this.current, pageSize: this.size };
  }
  fetchData {
    return fetchOrderList;
  }
  formatData {
    return res.data.records.map(item => ({
      id: item.orderId,
      amount: `¥${item.amount.toFixed}`,
      status: item.status === 'paid' ? 'Yi支付' : '待支付'
    }));
  }
  render {
    document.getElementById.innerHTML =
      list.map.join;
}
}

这两个页面除了请求地址和字段映射不同之外其他所有逻辑dou遵循同一套骨架。只要实例化对应的子类并调用 .init，整个过程就会自动跑通：

new UserListPage.init;
new OrderListPage.init;

四、钩子方法：灵活又不失约束力

所谓「钩子」，其实就是父类提前埋好的“坑”。它们往往提供一个默认实现，让业务方自行决定是否需要介入。例如上面的 beforeInit / afterInit，Ru果某个页面根本不需要加载动画，就Ke以直接不写；Ru果需要，只要覆写对应方法即可。

这种Zuo法带来的好处有三点：

保持主线不被打乱：

避免重复代码：

SLA 可控：

五、模板方法模式在前端还Neng这么玩儿…

AFAIR，你可NengYi经发现它不仅适用于列表页，还Neng轻松迁移到以下场景：

表单提交统一流程

class BaseForm {
   async submit {
       this.validate;          // 校验
       const payload = this.collect; // 收集数据
       const resp = await this.send; // 发请求
       this.handleSuccess;   // 成功处理
   }
   validate{ /* 可覆盖 */ }
   collect{ /* 必须实现 */ }
   send{ throw new Error; }
   handleSuccess{ /* 默认提示 */ }
}

页面首次加载与销毁逻辑统一管理

class BaseComponent {
   mount{
       this.beforeMount;
       this.render;
       this.afterMount;
   }
   beforeMount{ }
   afterMount{ }
   render{ throw new Error; }
}

S/O 给你一点灵感：只要你的业务拥有「固定步骤 + 可变细节」这两大特征，douKe以考虑套上这层框架。

六、使用模板方法模式后你会感受到…

#结构geng清晰# 所有页面遵循同一套“骨架”，阅读时只需聚焦差异部分；

#维护成本下降# 修改统一流程时只改父类一次即可；

#团队协作geng顺畅# 新人kan到基类就Neng快速了解整体执行链，而不用翻阅多份文档；

#错误率降低# 因为关键步骤被硬编码在父类里不容易因手误漏掉某一步；

七、踩坑提醒 & 小技巧

别把所有细节dou塞进基类！* 只有真正公共且必须执行顺序不变的步骤才放进去，否则会导致子类难以自定义。

"抽象层次" 要恰到好处* 过浅抽象仍然是复制粘贴，过深则调试困难。一般建议每层控制在十行左右代码量左右。

"异常捕获" 必不可少* 基类里Zui好包裹 try/catch，让业务侧只关心业务错误，而不是底层网络异常导致流程中断。

*记得为钩子加上注释*，告诉团队哪些是必填、哪些是选填，可避免误删重要 点。

八、让代码像流水线一样运行

The end.

🚀 用好模板方法模式，你将拥有“一眼kan穿全局，一键补齐细节”的超Neng力。下次再面对千篇一律却又稍有差别的业务时记得先搭建骨架，再让各自的小伙伴填充内容——如此方Neng保持代码整洁且充满弹性！ 🎉️️️️️️️️️️️️️️️️‍♂‍‍‍‍‍‍‍♀ ‍​‍​‌​‌​‌​‌‌​‌‌‌​​​​​​​​​​​​​​​​‏‏‏‏‏‏‏‏‎‎‎‎‎‎​​⁤⁤⁤⁤⁤⁣⁣⁣︎︎︎✦✦✦✦✦✦✦✦🌀🌀🌀🌀🌀🌀🌀🌀🗂 🗂 🗂 🗂 🗂 🗂 ⏱⏱⏱⏱⏱⏱⏱⏱ 💡💡💡💡💡💡💡💡 🌈🌈🌈🌈🌈🌈🌈🌈 🏁🏁🏁🏁🏁🏁🏁🏁​ ‌‌‌‌​​​​​

---