Template Method Design Pattern in Javascript

Template method design pattern is a behavioral design pattern from GoF book. It defines the program skeleton of an algorithm in an operation, deferring some steps to subclasses.

What problems can the Template Method design pattern solve?

• The invariant parts of a behavior should be implemented only once so that subclasses can implement the variant parts.
• Subclasses should redefine only certain parts of a behavior without changing the other parts.

Usually, subclasses control how the behavior of a parent class is redefined, and they aren’t restricted to redefine only certain parts of a behavior.

What solution does the Template Method design pattern describe?

Define abstract operations (primitives) for the variant parts of a behavior.
Define a template method that

• implements the invariant parts of a behavior and
• calls abstract operations (primitives) that subclasses implement.

Example: If you want to build a house, you need few steps to do one after another like build foundations, build pillars, build walls, build windows. You can not build windows before build pillars. So above steps has to be implemented sequentially. Now you can make wooden house or brick house but both cases steps has to be same. You can have flexibility to implement their own style but same implementations might exists too. Same implementations can move to parent/base class and others will be implemented by sub-class.

Class Diagram:

'use strict'
class HouseTemplate{
constructor(){};
buildFoundations(){
console.log('Building Foundations')
}
buildHouse(){
this.buildFoundations();
this.buildPillars();
this.buildWalls();
this.buildWindows();
}
buildFoundations(){
console.log('Building foundations')
}
/**
* Default implementation
*/
buildWindows(){
console.log('I am done with building windows');
}
buildPillars(){
throw new Error('You have to build your own pillars')
}
buildWalls(){
throw new Error('You have to build your own walls')
}
}
module.exports = HouseTemplate;

Concrete class for Wooden House:

'use strict';
var HouseTemplate = require('./house-template');
class WoodenHouse extends HouseTemplate{
constructor(){
super();
};
buildWalls(){
console.log('Building walls for wooden house');
}
buildPillars(){
console.log('Building pillars for wooden house')
}
}
module.exports = WoodenHouse;

Concrete class for Brick House:

'use strict';
var HouseTemplate = require('./house-template');
class BrickHouse extends HouseTemplate{
constructor(){
super();
};
buildWalls(){
console.log('Building walls for brick house');
}
buildPillars(){
console.log('Building pillars for brick house')
}
}
module.exports = BrickHouse;

Testing:

const woodenHouse = require('./wooden-house');
const brickHouse = require('./brick-house');
var WoodenHouse = new woodenHouse();
WoodenHouse.buildHouse();
console.log('********---**********');
var BrickHouse = new brickHouse();
BrickHouse.buildHouse();

Expected Output:

Building foundations
Building pillars for wooden house
Building walls for wooden house
I am done with building windows
******** — -**********
Building foundations
Building pillars for brick house
Building walls for brick house
I am done with building windows

Follow me on LinkedIN