作为一名 JavaScript 开发者，在日常的开发工作中，你是否曾经遇到过这样的情况：在编写不同的功能模块时，发现核心的业务流程几乎是一模一样的，唯独其中的某几个步骤的实现细节各不相同？
例如，我们在处理支付流程时，无论是信用卡支付还是支付宝支付，都离不开“验证用户”、“计算金额”、“执行扣款”、“发送通知”这几个核心步骤。但是，“执行扣款”的具体逻辑在不同的支付方式下却天差地别。如果我们为每种支付方式都重写一遍整个流程，代码中就会充斥着大量的重复逻辑，既难以维护，也容易出错。
这就是今天我们要一起探讨的主题——模板方法模式。这是一种非常有用的行为型设计模式，它能够帮助我们在不改变算法整体结构的情况下，重新定义算法的某些步骤。通过这篇文章，我们将深入探讨这个模式在 JavaScript 中的实际应用，帮助你编写出更加优雅、可复用的代码。
什么是模板方法模式？
简单来说，模板方法模式在基类中定义了一个算法的“骨架”。这个骨架就像是一个标准操作程序，它将算法的步骤一一列出，并将某些步骤的实现推迟到子类中去完成。这就像是写论文的模板，学校规定了论文必须包含摘要、正文、结论等部分，但具体每个部分写什么内容，则由每位学生自己去填充。
这个模式主要包含两个角色：
- 抽象类： 定义抽象的原语操作，并在模板方法中定义算法的骨架。
- 具体类： 实现原语操作以完成算法的特定步骤。
在 JavaScript 中，虽然没有像 Java 或 C++ 那样严格的抽象类概念，但我们可以通过 ES6 的类继承以及方法的动态特性，完美地实现这一模式。
为什么要在 JavaScript 中使用它？
JavaScript 是一门极其灵活的语言，这既是它的优点，有时也是团队协作中的痛点。在大型项目中，如果我们不加以约束，不同的开发者可能会用完全不同的代码流程来实现相同的业务逻辑。模板方法模式在 JS 中的价值主要体现在：
- 代码复用： 将通用的逻辑抽取到父类，避免子类中的代码重复。
- 结构一致性： 强制所有子类遵循相同的算法结构，保证了逻辑的严密性。
- 扩展性： 当需求变更时，我们只需要修改特定的子类，或者扩展父类，而不会影响到整个算法的稳定性。
实战案例解析
为了让你更直观地理解，让我们通过几个具体的例子，来看看模板方法模式是如何在 JavaScript 项目中大显身手的。
案例 1：制作三明治（生活化示例）
让我们从一个有趣的生活场景开始。想象一下你正在经营一家三明治店，无论顾客点哪种三明治，制作流程都包含四个步骤：准备面包、添加配料、添加调料、完成制作。其中，“添加配料”是随顾客口味变化的，而其他步骤是固定的。
我们可以利用模板方法模式来构建这个系统：
// 定义三明治的“基类”
class Sandwich {
// 这是模板方法，定义了制作三明治的算法骨架
// 使用 final 的概念（虽然 JS 中没有 final 关键字，但我们通常不建议覆盖此方法）
make() {
this.prepareBread(); // 固定步骤：准备面包
this.addFilling(); // 抽象步骤：添加配料（由子类实现）
this.addCondiments(); // 固定步骤：添加调料
this.serve(); // 固定步骤：上菜
}
prepareBread() {
console.log("1. 切开两片新鲜的法棍面包。");
}
// 这个方法需要子类去实现，我们在基类中抛出错误以确保子类覆盖它
addFilling() {
throw new Error("子类必须实现 addFilling 方法");
}
addCondiments() {
console.log("3. 加入经典的生菜、番茄和蛋黄酱。");
}
serve() {
console.log("4. 将三明治装盘，完成制作！");
}
}
// 具体类：火腿三明治
class HamSandwich extends Sandwich {
addFilling() {
console.log("2. 加入三片厚实的火腿。");
}
}
// 具体类：火鸡三明治
class TurkeySandwich extends Sandwich {
addFilling() {
console.log("2. 加入烤火鸡胸肉。");
}
}
// 具体类：素食三明治
class VeggieSandwich extends Sandwich {
addFilling() {
console.log("2. 加入丰富的牛油果和芝士。");
}
}
// 测试我们的代码
console.log("--- 制作火腿三明治 ---");
const hamSandwich = new HamSandwich();
hamSandwich.make();
console.log("
--- 制作素食三明治 ---");
const veggieSandwich = new VeggieSandwich();
veggieSandwich.make();
代码解析：
在这个例子中，INLINECODE3d042838 类定义了 INLINECODE94277eee 这个模板方法。它严格控制了制作顺序：先面包，再馅料，后调料，最后上菜。无论我们要扩展多少种三明治，这个流程都不会乱。子类只需要关注 addFilling 的实现，既灵活又规范。
案例 2：数据报告生成器（数据处理场景）
在开发后台管理系统或数据分析工具时，我们经常需要生成不同格式的报告（如 HTML、PDF、Markdown）。虽然最终的文件格式不同，但生成数据的逻辑是一样的：连接数据源 -> 查询数据 -> 格式化数据 -> 保存文件。
让我们看看如何用模板方法来优化这一过程：
// 数据报告生成器基类
class DataReportGenerator {
// 模板方法：定义了数据处理的完整生命周期
generateReport() {
this.connectToDataSource(); // 步骤 1
const data = this.fetchData(); // 步骤 2
const formattedData = this.formatData(data); // 步骤 3
this.saveReport(formattedData); // 步骤 4
console.log("报告生成完毕。");
}
connectToDataSource() {
console.log("[数据库] 正在连接到生产数据库...");
}
fetchData() {
console.log("[数据库] 正在执行 SQL 查询...");
// 模拟返回数据
return [
{ id: 1, name: "张三", sales: 1200 },
{ id: 2, name: "李四", sales: 980 }
];
}
// 抽象方法：由子类决定如何格式化数据（HTML, CSV, PDF等）
formatData(data) {
throw new Error("子类必须实现 formatData 方法");
}
// 抽象方法：由子类决定如何保存
saveReport(formattedData) {
throw new Error("子类必须实现 saveReport 方法");
}
}
// 具体类：HTML 报告生成器
class HTMLReportGenerator extends DataReportGenerator {
formatData(data) {
console.log("[格式化] 将数据转换为 HTML 表格格式。");
let html = "ID 姓名 销售额 ${item.id} ${item.name} ${item.sales}
";
return html;
}
saveReport(content) {
console.log("[保存] 将 HTML 内容写入 index.html 文件。");
}
}
// 具体类：CSV 报告生成器
class CSVReportGenerator extends DataReportGenerator {
formatData(data) {
console.log("[格式化] 将数据转换为 CSV 格式。");
let csv = "ID,姓名,销售额
";
data.forEach(item => {
csv += `${item.id},${item.name},${item.sales}
`;
});
return csv;
}
saveReport(content) {
console.log("[保存] 将 CSV 内容写入 report.csv 文件。");
}
}
console.log("--- 生成 HTML 报告 ---");
const htmlGen = new HTMLReportGenerator();
htmlGen.generateReport();
console.log("
--- 生成 CSV 报告 ---");
const csvGen = new CSVReportGenerator();
csvGen.generateReport();
代码解析：
在这个例子中，我们清晰地分离了“数据处理流程”和“格式逻辑”。DataReportGenerator 确保了我们不会忘记连接数据库或查询数据，而子类只需要专注于它们擅长的部分：生成 HTML 表格还是 CSV 文本。这种解耦使得添加新的报告格式（比如生成 PDF）变得非常简单。
案例 3：构建测试框架（高级应用）
你有没有想过，流行的测试框架（如 Jest 或 Mocha）是如何工作的？当你写一个测试用例时，框架会自动处理“Setup（准备环境）”、“Execution（运行测试）”和“Teardown（清理环境）”。这其实就是模板方法模式的典型应用。
让我们来模拟一个简易版的测试框架：
// 模拟的测试基类
class TestCase {
// 模板方法：运行测试套件
run() {
this.setUp(); // 1. 环境准备（钩子方法）
this.testMethod(); // 2. 执行具体的测试逻辑
this.tearDown(); // 3. 环境清理（钩子方法）
}
setUp() {
console.log("[Framework] 准备测试环境...");
}
tearDown() {
console.log("[Framework] 清理测试数据，关闭连接...");
}
testMethod() {
throw new Error("测试用例必须实现 testMethod 方法");
}
}
// 具体测试用例：测试用户登录
class UserLoginTest extends TestCase {
setUp() {
super.setUp(); // 调用父类的基础准备逻辑
console.log("[Test] 创建临时的测试用户数据");
this.user = { username: "test_user", password: "123456" };
}
testMethod() {
console.log("[Test] 正在验证用户登录逻辑...");
if (this.user.username === "test_user") {
console.log("[Test] 断言通过：用户名正确。");
} else {
console.log("[Test] 断言失败：用户名错误。");
}
}
tearDown() {
console.log("[Test] 删除临时测试用户");
super.tearDown(); // 调用父类的清理逻辑
}
}
console.log("--- 运行用户登录测试 ---");
const loginTest = new UserLoginTest();
loginTest.run();
代码解析：
这里我们使用了“钩子方法”的概念。INLINECODE1afb5a34 和 INLINECODEe1f50071 在基类中有默认实现，但子类可以覆盖它们以添加特定的测试前和测试后的逻辑。INLINECODEd678483d 方法作为模板方法，保证了 INLINECODE45273950 一定会被执行，并且一定会包含在 INLINECODE6e6eadb5 和 INLINECODEa0ee63a6 之间，防止测试代码污染环境。
常见应用场景与最佳实践
理解了代码实现后，让我们探讨一下在实际项目中，哪些场景最适合使用这个模式。
1. 常见应用场景
- UI 组件库开发： 如果你正在开发一个 React 或 Vue 组件库，比如一个通用的 INLINECODEe4e2c47c（模态框）组件。你可以定义一个 INLINECODE90bc91e8 模板方法，规定模态框必须包含 Header、Body 和 Footer。然后让具体的业务组件去填充这些内容。
- 复杂的业务流程审批： 无论是 OA 系统还是财务软件，审批流程往往包含“提交”、“初审”、“复核”、“归档”。不同的业务类型（如报销、请假）有不同的审核规则，但整体流程是一致的。
- API 请求中间件： 比如在 Axios 拦截器中，我们定义一个请求处理的模板：显示 Loading -> 发送请求 -> 处理错误 -> 关闭 Loading。具体的错误处理逻辑可以根据请求类型变化。
2. 优缺点分析
优点：
- 符合开闭原则： 你可以扩展子类而不修改父类的结构。
- 代码复用率高： 公共行为被提取到父类，减少了代码冗余。
- 控制反转： 父类调用子类的操作，而不是相反，利于系统维护。
缺点：
- 增加类的数量： 每个不同的实现都需要一个子类，可能会导致类的个数增加，这在某些极简主义项目中可能被视为过度设计。
- 调试困难： 当继承层级很深时，要理解具体的算法流程可能需要跳转到多个类文件中。
- 继承的局限性： JavaScript 中只能单继承。如果一个子类需要复用多个不同父类的模板逻辑，传统的类继承方式就会显得力不从心（这时可以考虑组合优于继承的设计）。
3. 性能优化建议
在现代 JavaScript 引擎（如 V8）中，类方法的调用已经非常高效。使用模板方法模式通常不会带来显著的性能开销。但是，为了保证性能，我们需要注意：
- 避免在模板方法中进行复杂的循环计算： 模板方法应该只负责流程控制，具体的计算密集型任务应该封装在子类的原语操作中。
- Hook 方法的惰性计算： 如果某些步骤并不总是需要执行（比如只读操作不需要 Save 步骤），可以在基类中添加条件判断，或者将不必要的方法实现为空函数（空对象模式），而不是强制要求子类实现。
总结与思考
在这篇文章中，我们不仅学习了什么是模板方法模式，更重要的是，我们通过三个完全不同的场景——三明治制作、数据报告生成、测试框架构建——看到了它在真实世界中的强大威力。
模板方法模式的核心在于：“分离不变与变化”。它将那些不变的业务流程、算法骨架封装在父类中，从而保证了系统的稳定性；同时，它将变化的具体步骤留给子类去实现，从而赋予了系统无限的灵活性。
当你下次在编写代码时，发现自己正在复制粘贴大段相同的逻辑，而只是其中一两行代码不同时，请停下来思考一下：“我是不是可以用模板方法模式来重构这段代码？”
关键要点回顾
- 结构： 基类定义骨架，子类填充细节。
- 实现： 在 JavaScript 中，利用 INLINECODE71dc8df6 和 INLINECODE5f531c7a 即可轻松实现。
- 权衡： 它带来了复用性和一致性，但有时也会增加代码结构的复杂度。
希望这篇文章能帮助你更好地理解和运用 JavaScript 设计模式。在接下来的文章中，我们将继续探索更多有趣且实用的设计模式，助你在技术的道路上更进一步！