JS design patterns acquaintance (eight) - Template mode

definition

Template Method pattern is a very simple just use inheritance patterns can be achieved. Template Method structure consists of two parts, the first part is the abstract parent class, the second portion is the specific implementation subclasses. Typically encapsulates algorithm framework subclass abstract parent class, including the execution order to achieve common methods for the package and all methods in the subclass. Subclasses inherit the abstract class inherits the entire structure of the algorithm and may select rewriting of the parent class. Are extracted in the same manner to the parent class, similar to Java mode of inheritance, the parent class defines methods Subclasses override method

8.1 Coffee and Tea

Firstly compare the flow of coffee and tea:

• Different raw materials. A coffee, a tea, but we can put them both abstract "beverage."
• Different ways of bubbles. Coffee is brewing, while the tea is soaked, we can put them both abstract "bubble."
• Adding different spices. A sugar and milk, a lemon, but we can put them both abstract as "seasoning."

Summarized in four steps

1. Boil the water
2. Beverage brewed with boiling water
3. The drinks poured into a cup
4. Add spices

8.2 inheritance manner

    // 饮料
    function Beverage() {}
    Beverage.prototype.boilWater = () => {
        console.log(' => 把水煮沸');
    }
    Beverage.prototype.brew = () => { throw new Error('子类必须重写此方法'); }
    Beverage.prototype.pourInCup = () => { throw new Error('子类必须重写此方法'); }
    Beverage.prototype.addCondiments = () => { throw new Error('子类必须重写此方法'); }
    Beverage.prototype.init = function() {
        this.boilWater();
        this.brew();
        this.pourInCup();
        this.addCondiments();
    }
    
    function Coffee() {} 
    Coffee.prototype = new Beverage();
    Coffee.prototype.brew = () => { console.log(' => 泡咖啡',);}    
    Coffee.prototype.pourInCup = () => { console.log(' => 向杯子倒咖啡',);}       
    Coffee.prototype.addCondiments = () => { console.log(' => 加糖和牛奶',);} 
复制代码

8.3 Principles Hollywood - not based on inheritance

    function Beverage(params) {
        const boilWater = () => { console.log(' => 把水煮沸',); }
        const brew = params.brew && (() => { throw new Error('子类必须重写此方法'); });
        const pourInCup = params.pourInCup && (() => { throw new Error('子类必须重写此方法'); });
        const addCondiments = params.addCondiments && (() => { throw new Error('子类必须重写此方法'); });
        const F;
        F.prototype.init = () => {
            boilWater();
            brew();
            pourInCup();
            addCondiments();
        }
        return F;
    }
    
    const Coffee = Beverage({
        brew: () => { console.log(' => 泡咖啡',);},
        pourInCup: () => { console.log(' => 向杯子倒咖啡',);},
        addCondiments: () => { console.log(' => 加糖和牛奶',);}
    });
    const Tea = Beverage({
        brew: () => { console.log(' => 泡茶',);},
        pourInCup: () => { console.log(' => 向杯子倒茶',);},
        addCondiments: () => { console.log(' => 柠檬',);}
    });
    
    
    const coffee = new Coffee();
    coffee.init();
    
    const tea = new Tea();
    tea.init();
复制代码

8.4 summary

Template pattern is a typical method of improving the design by encapsulating the change patterns of the extended system. In traditional object-oriented languages, a procedure using a template method pattern, the method of the type and order of execution subclasses are immutable, so this part of our abstract logic inside the template approach to the parent class. The method how to achieve specific subclass is variable, so we put the logic portion of the package to change subclass. By adding new sub-class, we will be able to add new features to the system, do not need to change the abstract superclass and other subclasses, which is in line with the principle of open  the closure.

Reproduced in: https: //juejin.im/post/5d03bd065188255f8906553a