Mastering the Template Method Pattern with Real-World Soup Recipes in JavaScript

Definition

Template Method pattern defines an algorithm's steps and allows subclasses to provide concrete implementations for one or more steps, enabling them to redefine certain steps without changing the overall algorithm structure.

The definition shows the pattern consists of two parts:

Abstract algorithm implementation (abstract class)

Concrete implementation methods (concrete class)

The pattern places common parts in the parent class and variable parts in subclasses, avoiding redundant behavior across subclasses.

Example

Using the classic coffee-or-tea example, the author presents two soup recipes—Corn Pork Rib Soup and Beef Radish Soup—to demonstrate the pattern.

Corn Pork Rib Soup

Typical steps:

Blanch the pork ribs in cold water.

Add ginger, cooking wine, and corn.

Cook for one hour.

Serve the soup in a bowl.

Code simulation:

let Yumipaigu = function(){};
Yumipaigu.prototype.chaopaigu = function(){
    console.log('排骨焯水');
};
Yumipaigu.prototype.addYumi = function(){
    console.log('加生姜、料酒、玉米');
};
Yumipaigu.prototype.boil = function(){
    console.log('煮一小时');
};
Yumipaigu.prototype.pourInBowl = function(){
    console.log('排骨玉米汤盛碗里');
};
Yumipaigu.prototype.init = function(){
    this.chaopaigu();
    this.addYumi();
    this.boil();
    this.pourInBowl();
};
let yumipaigu = new Yumipaigu();
yumipaigu.init();

Beef Radish Soup

Typical steps:

Blanch the beef in cold water.

Add scallions, ginger, garlic, cinnamon, bay leaf, peppercorns, and radish.

Cook for forty minutes.

Serve the soup in a bowl.

Code simulation:

let Niurouluobo = function(){};
Niurouluobo.prototype.chaoniurou = function(){
    console.log('牛肉焯水');
};
Niurouluobo.prototype.addNiurou = function(){
    console.log('加入葱姜蒜、桂皮、香叶、花椒、萝卜');
};
Niurouluobo.prototype.boil = function(){
    console.log('煮四十分钟');
};
Niurouluobo.prototype.pourInBowl = function(){
    console.log('牛肉萝卜汤盛碗里');
};
Niurouluobo.prototype.init = function(){
    this.chaoniurou();
    this.addNiurou();
    this.boil();
    this.pourInBowl();
};
let niurouluobo = new Niurouluobo();
niurouluobo.init();

Comparison and Summary

The two processes share a common structure despite different ingredients and seasoning:

Blanch the main ingredient.

Add auxiliary ingredients.

Cook until done.

Serve in a bowl.

This unified sequence represents the abstract algorithm of the Template Method pattern.

Abstract Class Explanation

What Is an Abstract Class?

An abstract class represents a conceptual abstraction derived from analysis and design, encapsulating a set of seemingly different but fundamentally similar concepts. It cannot be instantiated directly and serves as a base class to hide types and act as a global variable holder in object‑oriented programming.

Key points:

Abstracts a series of seemingly different but fundamentally similar concepts.

Can only be used as a base class, primarily for type hiding and global variable roles.

JavaScript Simulation Limitations

JavaScript does not provide native support for abstract classes; the examples use prototype inheritance to mimic class inheritance. Because JavaScript lacks compile‑time checks, developers must manually ensure that subclasses override abstract methods, otherwise runtime errors may occur.

MakeSoup.prototype.blanching = function(){
    console.error("子类必须重写blanching方法！");
};

Implementation of the Template Method

First, define a parent class that implements the invariant algorithm:

let MakeSoup = function(){};

MakeSoup.prototype.blanching = function(){} // empty, to be overridden
MakeSoup.prototype.addExcipients = function(){} // empty, to be overridden
MakeSoup.prototype.cooked = function(){} // empty, to be overridden
MakeSoup.prototype.intoBowl = function(){} // empty, to be overridden

MakeSoup.prototype.init = function(){
    this.blanching();
    this.addExcipients();
    this.cooked();
    this.intoBowl();
};

Then create concrete subclasses for each soup, inheriting from MakeSoup and overriding the abstract steps.

Corn Pork Rib Soup Class

let Paiguyumi = new function(){};
Paiguyumi.prototype = new MakeSoup();

Paiguyumi.prototype.blanching = function(){
    console.info("焯排骨");
};
Paiguyumi.prototype.addExcipients = function(){
    console.info("添加生姜、料酒、玉米");
};
Paiguyumi.prototype.cooked = function(){
    console.info("煮一小时");
};
Paiguyumi.prototype.intoBowl = function(){
    console.info("排骨玉米盛碗里");
};
let paiguyumi = new Paiguyumi();
paiguyumi.init();

Beef Radish Soup Class

let Niurouluobo = new function(){};
Niurouluobo.prototype = new MakeSoup();

Niurouluobo.prototype.blanching = function(){
    console.info("焯牛肉");
};
Niurouluobo.prototype.addExcipients = function(){
    console.info("加入葱姜蒜、桂皮、香叶、花椒、萝卜");
};
Niurouluobo.prototype.cooked = function(){
    console.info("煮40分钟");
};
Niurouluobo.prototype.intoBowl = function(){
    console.info("牛肉萝卜盛碗里");
};
let niurouluobo = new Niurouluobo();
niurouluobo.init();

When init is called on a subclass instance, the method lookup follows the prototype chain to the MakeSoup implementation, which orchestrates the sequence of steps defined by the Template Method pattern.

Conclusion

The Template Method pattern encapsulates an algorithm's skeleton while allowing subclasses to customize specific steps, enhancing system extensibility. In JavaScript, the pattern can be simulated with prototype inheritance, though higher‑order functions may offer a more idiomatic alternative.