JavaScript模板方法模式：基于委托的继承与钩子应用

作者：半夏

时间：2026-10-29

本文深入解析JavaScript中的模板方法模式。由于JS缺乏真正的类式继承，该模式通过对象委托实现算法框架封装。文章结合咖啡与茶的示例，演示如何利用钩子方法处理可选步骤，并阐述“别调用我们，我们会调用你”的好莱坞原则在观察者模式与回调函数中的应用。

文章目录

模板方法模式的定义与结构

一、定义

模板方法模式是一种基于继承关系的架构设计，旨在提升系统的可扩展性。该模式主要由两部分构成：一部分是定义算法骨架的抽象父类，另一部分是执行具体逻辑的子类。

咖啡与茶的制作示例

二、示例

Coffee or Tea (1) 把水煮沸 (2) 用沸水浸泡茶叶 (3) 把茶水倒进杯子 (4) 加柠檬


/* 抽象父类：饮料 */
var Beverage = function(){};
// (1) 把水煮沸
Beverage.prototype.boilWater = function() {
  console.log("把水煮沸");
};
// (2) 沸水浸泡
Beverage.prototype.brew = function() {
  throw new Error("子类必须重写brew方法");
};
// (3) 倒进杯子
Beverage.prototype.pourInCup = function() {
  throw new Error("子类必须重写pourInCup方法");
};
// (4) 加调料
Beverage.prototype.addCondiments = function() {
  throw new Error("子类必须重写addCondiments方法");
};

/* 模板方法 */
Beverage.prototype.init = function() {
  this.boilWater();
  this.brew();
  this.pourInCup();
  this.addCondiments();
}

/* 实现子类 Coffee*/
var Coffee = function(){};
Coffee.prototype = new Beverage();
// 重写非公有方法
Coffee.prototype.brew = function() {
  console.log("用沸水冲泡咖啡");
};
Coffee.prototype.pourInCup = function() {
  console.log("把咖啡倒进杯子");
};
Coffee.prototype.addCondiments = function() {
  console.log("加牛奶");
};
var coffee = new Coffee();
coffee.init();

借助模板方法模式，父类能够封装子类的算法框架。通常情况下，这一框架适用于大多数子类，但面对具有特殊需求的“个性”子类时，可能需要调整。例如在上述流程中，添加调料是可选操作。引入钩子方法（Hook）可以解决此类问题，通过放置钩子来隔离变化是常见的处理手段。


/* 添加钩子方法 */
Beverage.prototype.customerWantsCondiments = function() {
  return true;
};
Beverage.prototype.init = function() {
  this.boilWater();
  this.brew();
  this.pourInCup();
  if(this.customerWantsCondiments()) {
    this.addCondiments();
  }
}

/* 实现子类 Tea*/
var Tea = function(){};
Tea.prototype = new Beverage();
// 重写非公有方法
Tea.prototype.brew = function() {
  console.log("用沸水冲泡茶");
};
Tea.prototype.pourInCup = function() {
  console.log("把茶倒进杯子");
};
Tea.prototype.addCondiments = function() {
  console.log("加牛奶");
};
Tea.prototype.customerWantsCondiments = function() {
  return window.confirm("需要添加调料吗？");
};
var tea = new Tea();
tea.init();