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();
         }
     };