In depth understanding of JavaScript series (41) : template method for design patterns

introduce

The template method (TemplateMethod) defines the skeleton of the algorithm in an operation, deferring some steps to subclasses. The template method allows subclasses to redefine certain steps of an algorithm without changing its structure.

Template methods are a basic technique for code reuse and are particularly important in class libraries because they extract common behavior from the class library. The template method results in an inverted control structure known as the "Hollywood rule" of "don't look for us, we'll look for you," in which the parent class calls the operation of a class, not the other way around. This is embodied in abstract classes (and abstract methods) in object-oriented programming languages, and in subclasses that inherit that abstract class (and abstract methods).

The body of the

For example, there are the same steps for making tea and coffee, such as boiling water (boilWater), brewing (brew), pouring into a cup (pourOnCup), adding small ingredients (addCondiments), and so on. However, each beverage is prepared in different ways and with different ingredients, so we can use the template method to achieve this major step.

First, define the abstract steps:

var CaffeineBeverage = function () {
};

CaffeineBeverage.prototype.prepareRecipe = function () {

    this.boilWater();

    this.brew();

    this.pourOnCup();

    if (this.customerWantsCondiments()) {

        //  If you can add small ingredients, add 

 this.addCondiments();

    }

};

CaffeineBeverage.prototype.boilWater = function () {

    console.log(" The water to boil !");

};

CaffeineBeverage.prototype.pourOnCup = function () {

    console.log(" Pour the drink into a glass !");

};

CaffeineBeverage.prototype.brew = function () {

    throw new Error(" The method must be overwritten !");

};

CaffeineBeverage.prototype.addCondiments = function () {

    throw new Error(" The method must be overwritten !");

};

//  Default to add small 

CaffeineBeverage.prototype.customerWantsCondiments = function () {

    return true;

};

This function extends all the basic steps on the prototype, as well as the main steps, the steps of brewing and adding small ingredients are not realized, which are implemented by the functions corresponding to the specific drinks. In addition, whether or not adding small ingredients (customerWantsCondiments) returns true by default, and this value can be overwritten when the sub-function is overwritten.

The following two functions are the corresponding functions for making coffee and tea respectively:

//  coffee 

var Coffee = function () {

    CaffeineBeverage.apply(this);

};

Coffee.prototype = new CaffeineBeverage();

Coffee.prototype.brew = function () {

    console.log(" Pour the coffee from the coffee machine !");

};

Coffee.prototype.addCondiments = function () {

    console.log(" Add sugar and milk ");

};

Coffee.prototype.customerWantsCondiments = function () {

    return confirm(" Do you want to add sugar and milk? ");

};
// Blunt tea 

var Tea = function () {

    CaffeineBeverage.apply(this);

};

Tea.prototype = new CaffeineBeverage();

Tea.prototype.brew = function () {

    console.log(" Bubble tea !");

};

Tea.prototype.addCondiments = function () {

    console.log(" Add the lemon !");

};

Tea.prototype.customerWantsCondiments = function () {

    return confirm(" Do you want to add lemon? ");

};

In addition, with confirm, users can choose whether to add or not, which is good, isn't it?

conclusion

The template method applies to:

1.1 implement the invariant part of an algorithm and leave the variable behavior to the subclass
2. The common behavior in each subclass should be extracted and concentrated into a common parent class to avoid code duplication, the differences are separated into new operations, and finally, the different codes are replaced with a template method that phishes these new operations
3. Control subclass extension, template methods only call "hook" operations at specific points, which allows extension at those points

Unlike the policy pattern, the template method USES inheritance to change part 1 of the algorithm, while the policy pattern USES delegation to change the entire algorithm.