《javascript设计模式与开发实践》阅读笔记（11）—— 模板方法模式

模板方法模式：

由两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类。通常在抽象父类中封装了子类的算法框架，包括实现一些公共方法以及封装子类中所有方法的执行顺序。子类通过继承这个抽象类，也继承了整个算法结构，并且可以选择重写父类的方法。

 

泡咖啡和泡茶的例子

 

    var Coffee = function(){};    //作为构造函数
    Coffee.prototype.boilWater = function(){
        console.log( '把水煮沸' );
    };
    Coffee.prototype.brewCoffeeGriends = function(){
        console.log( '用沸水冲泡咖啡' );
    };
    Coffee.prototype.pourInCup = function(){
        console.log( '把咖啡倒进杯子' );
    };
    Coffee.prototype.addSugarAndMilk = function(){
        console.log( '加糖和牛奶' );
    };

    Coffee.prototype.init = function(){
        this.boilWater();             //煮水
        this.brewCoffeeGriends();     //泡咖啡
        this.pourInCup();             //倒进杯子
        this.addSugarAndMilk();       //加糖和牛奶
    };

    var coffee = new Coffee();   //实例一个“咖啡”对象
    coffee.init();   //调用


    var Tea = function(){};    //作为构造函数
    Tea.prototype.boilWater = function(){
        console.log( '把水煮沸' );
    };
    Tea.prototype.steepTeaBag = function(){
        console.log( '用沸水浸泡茶叶' );
    };
    Tea.prototype.pourInCup = function(){
        console.log( '把茶水倒进杯子' );
    };
    Tea.prototype.addLemon = function(){
        console.log( '加柠檬' );
    };

    Tea.prototype.init = function(){
        this.boilWater();      //煮水
        this.steepTeaBag();    //泡茶
        this.pourInCup();      //倒进杯子
        this.addLemon();       //加柠檬
    };

    var tea = new Tea();  //实例一个“茶”对象
    tea.init();    //调用

 

 

观察两段代码，发现其实他们是大同小异的，那我们完全可以把公共的部分抽象出来，作为一个抽象的父类模板

 

    var drink=function(){}  //作为抽象的构造类
    drink.prototype.boilWater=function(){
        console.log( '把水煮沸' );
    }
    drink.prototype.brew=function(){};  //空方法，用来给模板套用
    drink.prototype.pourInCup = function(){};   // 同上  
    drink.prototype.addCondiments = function(){}; //  同上

    drink.prototype.init = function(){    //模板在这里，重复的事情放在模板里
        this.boilWater();
        this.brew();
        this.pourInCup();
        this.addCondiments();
    };

 

然后就是具体的咖啡类和茶类

    /**创建咖啡类**/
    var Coffee = function(){};    //这是一个具体的类,作为构造函数存在
    Coffee.prototype = new drink();   //把构造函数的prototype指向抽象类的实例

    Coffee.prototype.brew = function(){
        console.log( '用沸水冲泡咖啡' );
    };
    Coffee.prototype.pourInCup = function(){
        console.log( '把咖啡倒进杯子' );
    };
    Coffee.prototype.addCondiments = function(){
        console.log( '加糖和牛奶' );
    };

    var coffee = new Coffee();  //新建咖啡实例
    coffee.init();            //调用模板
    /*结果*/
    //把水煮沸
    //用沸水冲泡咖啡
    //把咖啡倒进杯子
    //加糖和牛奶

    /**创建茶类**/
    var Tea = function(){};       //具体的类，作为构造函数
    Tea.prototype = new drink();  //把构造函数的prototype指向抽象类的实例

    Tea.prototype.brew = function(){
        console.log( '用沸水浸泡茶叶' );
    };
    Tea.prototype.pourInCup = function(){
        console.log( '把茶倒进杯子' );
    };
    Tea.prototype.addCondiments = function(){
        console.log( '加柠檬' );
    };

    var tea = new Tea();   //新建茶实例
    tea.init();     //调用模板
    /*结果*/
    //把水煮沸
    //用沸水浸泡茶叶
    //把茶倒进杯子
    //加柠檬

 

使用es6的话，代码可以简洁不少

     class drink{    //抽象模板父类
        boilWater(){
           console.log("把水煮沸");
        };
        brew(){};
        pourInCup(){};
        addCondiments(){};

        init(){
           this.boilWater();
           this.brew();
           this.pourInCup();
           this.addCondiments();
        }
     }

     class Coffee extends drink{  //具体的类，内部重写相应方法
        brew(){
           console.log("用沸水冲泡咖啡");
        }
        pourInCup(){
           console.log( '把咖啡倒进杯子' );
        }
        addCondiments(){
           console.log( '加糖和牛奶' );
        }
     }

     var coffee=new Coffee(); //实例
     coffee.init();   //把水煮沸
                      //用沸水冲泡咖啡
                      //把咖啡倒进杯子
                      //加糖和牛奶

 

 

js实现模板模式的一些问题

我们在抽象父类中提供了模板，在具体的类中重写相应的方法，但是这个过程全靠程序员的自觉和记忆，语言层面并没有提供任何检查，如果我们忘了重写相应的方法，js也不会报错。
一种解决方案是用鸭子类型来模拟接口检查，缺点就是会带来很多不必要的复杂性，增加很多和业务无关的代码。
另一种解决方案是抽象父类中的相应抽象方法里都抛出错误，如果子类没有重写相应方法，运行时就会报错，如下：

    drink.prototype.brew=function(){
        throw new Error( '子类必须重写brew 方法' );
    };

 

钩子方法

可以增加自由度，有的子类并不适合把模板方法全部运行，钩子方法可以让子类自行决定是否执行对应的模板方法。

    drink.prototype.add=function(){  //钩子方法，子类中可以改写，模板方法中会进行判断
        return true;   //默认为true，用于判断
    }
    drink.prototype.init = function(){  //模板方法  
        this.boilWater();
        this.brew();
        this.pourInCup();
        if( this.add() ){   //如果挂钩返回true，则需要调料
            this.addCondiments();
        }
    };