模板方法模式的定义和组成：

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

假如我们有一些平行的子类，各个子类之间有一些相同的行为，也有一些不同的行为。如果相同和不同的行为都混合在各个子类的实现中，说明这些相同的行为会在各个子类中重复出现。但实际上，相同的行为可以被搬移到另外一个单一的地方，模板方法模式就是为解决这个问题而生的。在模板方法模式中，子类实现中的相同部分被上移到父类中，而将不同的部分留待子类来实现。这也很好地体现了泛化的思想。

先泡一杯咖啡：

首先，我们先来泡一杯咖啡，如果没有什么太个性化的需求，泡咖啡的步骤通常如下： 
(1) 把水煮沸 
(2) 用沸水冲泡咖啡 
(3) 把咖啡倒进杯子 
(4) 加糖和牛奶 
通过下面这段代码，我们就能得到一杯香浓的咖啡：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <script>

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

    </script>

</body>

</html>
 

泡一壶茶：

接下来，开始准备我们的茶，泡茶的步骤跟泡咖啡的步骤相差并不大： 
(1) 把水煮沸 
(2) 用沸水浸泡茶叶 
(3) 把茶水倒进杯子 
(4) 加柠檬 
同样用一段代码来实现泡茶的步骤：

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 Beverage = function(){};

Beverage.prototype.boilWater = function(){

console.log( '把水煮沸' );

};

Beverage.prototype.brew = function(){

    throw new Error( '子类必须重写 brew 方法' );

    }; // 空方法，应该由子类重写

Beverage.prototype.pourInCup = function(){

    throw new Error( '子类必须重写 pourInCup  方法' );

    }; // 空方法，应该由子类重写

Beverage.prototype.addCondiments = function(){

    throw new Error( '子类必须重写 addCondiments 方法' );

    }; // 空方法，应该由子类重写

Beverage.prototype.init = function(){

    this.boilWater();

    this.brew();

    this.pourInCup();

    this.addCondiments();

};

创建 Coffee 子类和 Tea 子类：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <script>

        var Beverage = function(){};

        Beverage.prototype.boilWater = function(){

            console.log( '把水煮沸' );

        };

        Beverage.prototype.brew = function(){}; // 空方法，应该由子类重写

        Beverage.prototype.pourInCup = function(){}; // 空方法，应该由子类重写

        Beverage.prototype.addCondiments = function(){}; // 空方法，应该由子类重写

        Beverage.prototype.init = function(){

            this.boilWater();

            this.brew();

            this.pourInCup();

            this.addCondiments();

        };

        var Coffee = function(){};

        Coffee.prototype = new Beverage();

        Coffee.prototype.brew = function(){

            console.log( '用沸水冲泡咖啡' );

        };

        Coffee.prototype.pourInCup = function(){

            console.log( '把咖啡倒进杯子' );

        };

        Coffee.prototype.addCondiments = function(){

            console.log( '加糖和牛奶' );

        };

        var Coffee = new Coffee();

        Coffee.init();

    </script>

</body>

</html>

本章一直讨论的是模板方法模式，那么在上面的例子中，到底谁才是所谓的模板方法呢？答案是 Beverage.prototype.init 。

Beverage.prototype.init 被称为模板方法的原因是，该方法中封装了子类的算法框架，它作为一个算法的模板，指导子类以何种顺序去执行哪些方法。在 Beverage.prototype.init 方法中， 
算法内的每一个步骤都清楚地展示在我们眼前。

模板方法模式的使用场景:

在 Web开发中也能找到很多模板方法模式的适用场景，比如我们在构建一系列的 UI组件， 
这些组件的构建过程一般如下所示： 
(1) 初始化一个 div容器； 
(2) 通过 ajax请求拉取相应的数据； 
(3) 把数据渲染到 div容器里面，完成组件的构造； 
(4) 通知用户组件渲染完毕。

我们看到，任何组件的构建都遵循上面的 4 步，其中第(1)步和第(4)步是相同的。第(2)步不同的地方只是请求 ajax的远程地址，第(3)步不同的地方是渲染数据的方式。

于是我们可以把这 4个步骤都抽象到父类的模板方法里面，父类中还可以顺便提供第(1)步和第(4)步的具体实现。当子类继承这个父类之后，会重写模板方法里面的第(2)步和第(3)步。

添加钩子

通过模板方法模式，我们在父类中封装了子类的算法框架。这些算法框架在正常状态下是适用于大多数子类的，但如果有一些特别“个性”的子类呢？比如我们在饮料类 Beverage 中封装了 
饮料的冲泡顺序： 
(1) 把水煮沸 
(2) 用沸水冲泡饮料 
(3) 把饮料倒进杯子 
(4) 加调料 
这 4个冲泡饮料的步骤适用于咖啡和茶，在我们的饮料店里，根据这 4个步骤制作出来的咖啡和茶，一直顺利地提供给绝大部分客人享用。但有一些客人喝咖啡是不加调料（糖和牛奶）的。既然 Beverage 作为父类，已经规定好了冲泡饮料的 4个步骤，那么有什么办法可以让子类不受这个约束呢？

钩子方法（ hook ）可以用来解决这个问题，放置钩子是隔离变化的一种常见手段。我们在父类中容易变化的地方放置钩子，钩子可以有一个默认的实现，究竟要不要“挂钩”，这由子类自行决定。钩子方法的返回结果决定了模板方法后面部分的执行步骤，也就是程序接下来的走向，这样一来，程序就拥有了变化的可能。在这个例子里，我们把挂钩的名字定为customerWantsCondiments ，接下来将挂钩放入 Beverage 
类，看看我们如何得到一杯不需要糖和牛奶的咖啡，代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <script>

        var Beverage = function(){};

        Beverage.prototype.boilWater = function(){

            console.log( '把水煮沸' );

        };

        Beverage.prototype.brew = function(){

            throw new Error( '子类必须重写 brew 方法' );

        };

        Beverage.prototype.pourInCup = function(){

            throw new Error( '子类必须重写 pourInCup 方法' );

        };

        Beverage.prototype.addCondiments = function(){

            throw new Error( '子类必须重写 addCondiments 方法' );

        };

        Beverage.prototype.customerWantsCondiments = function(){

            return true; // 默认需要调料

        };

        Beverage.prototype.init = function(){

            this.boilWater();

            this.brew();

            this.pourInCup();

            if ( this.customerWantsCondiments() ){ // 如果挂钩返回 true，则需要调料

                this.addCondiments();

            }

        };

        var CoffeeWithHook = function(){};

        CoffeeWithHook.prototype = new Beverage();

        CoffeeWithHook.prototype.brew = function(){

            console.log( '用沸水冲泡咖啡' );

        };

        CoffeeWithHook.prototype.pourInCup = function(){

            console.log( '把咖啡倒进杯子' );

        };

        CoffeeWithHook.prototype.addCondiments = function(){

            console.log( '加糖和牛奶' );

        };

        CoffeeWithHook.prototype.customerWantsCondiments = function(){

            return window.confirm( '请问需要调料吗？' );

        };

        var coffeeWithHook = new CoffeeWithHook();

        coffeeWithHook.init();

    </script>

</body>

</html>
 

真的需要“继承”吗？

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <script>

        var Beverage = function( param ){

            var boilWater = function(){

                console.log( '把水煮沸' );

            };

            var brew = param.brew || function(){

                    throw new Error( '必须传递 brew 方法' );

                };

            var pourInCup = param.pourInCup || function(){

                    throw new Error( '必须传递 pourInCup 方法' );

                };

            var addCondiments = param.addCondiments || function(){

                    throw new Error( '必须传递 addCondiments 方法' );

                };

            var F = function(){};

            F.prototype.init = function(){

                boilWater();

                brew();

                pourInCup();

                addCondiments();

            };

            return F;

        };

        var Coffee = Beverage({

            brew: function(){

                console.log( '用沸水冲泡咖啡' );

            },

            pourInCup: function(){

                console.log( '把咖啡倒进杯子' );

            },

            addCondiments: function(){

                console.log( '加糖和牛奶' );

            }

        });

        var Tea = Beverage({

            brew: function(){

                console.log( '用沸水浸泡茶叶' );

            },

            pourInCup: function(){

                console.log( '把茶倒进杯子' );

            },

            addCondiments: function(){

                console.log( '加柠檬' );

            }

        });

        var coffee = new Coffee();

        coffee.init();

        var tea = new Tea();

        tea.init();

    </script>

</body>

</html>
 

js之模板方法模式的更多相关文章

  1. js设计模式——6.模板方法模式与职责链模式

    js设计模式——6.模板方法模式与职责链模式 职责链模式

  2. JS 设计模式七 -- 模板方法模式

    概念 模板方法模式是一直昂只需使用继承就可以实现的非常简单的模式. 模板方法模式由两部分结构组成,第一部分是抽象父类,第二部分是具体实现的子类. 实现 模板方法模式一般的实现方式为继承. // 体育运 ...

  3. js设计模式（七）---模板方法模式

    模板方法模式 模板方法模式是一种只需要继承就可以实现的非常简单的模式. 模板方法模式是由两部分组成,第一部分是抽象父类,第二部分是具体实现的子类, 主要适用在同级的子类具有相同的行为放在父类中实现,而 ...

  4. JS设计模式（8）模板方法模式

    什么是模板方法模式? 定义:定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 主要解决:一些方法通用,却在每一个子类都重新 ...

  5. javascript模板方法模式

    一:什么是模板方法模式: 模板方法模式由二部分组成,第一部分是抽象父类,第二部分是具体实现的子类,一般的情况下是抽象父类封装了子类的算法框架,包括实现一些公共方法及封装子类中所有方法的执行顺序,子类可 ...

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

    模板方法模式: 由两部分结构组成,第一部分是抽象父类,第二部分是具体的实现子类.通常在抽象父类中封装了子类的算法框架,包括实现一些公共方法以及封装子类中所有方法的执行顺序.子类通过继承这个抽象类,也继 ...

  7. 设计模式(九): 从醋溜土豆丝和清炒苦瓜中来学习"模板方法模式"(Template Method Pattern)

    今天是五.四青年节,祝大家节日快乐.看着今天这标题就有食欲,夏天到了,醋溜土豆丝和清炒苦瓜适合夏天吃,好吃不上火.这两道菜大部分人都应该吃过,特别是醋溜土豆丝,作为“鲁菜”的代表作之一更是为大众所熟知 ...

  8. 设计模式（十四）模板方法模式（Template Pattern）

    一.引言 提到模板,大家肯定不免想到生活中的“简历模板”.“论文模板”.“Word中模版文件”等,在现实生活中,模板的概念就是——有一个规定的格式,然后每个人都可以根据自己的需求或情况去更新它,例如简 ...

  9. C#设计模式-模板方法模式

    提到模板,大家肯定不免想到生活中的“简历模板”.“论文模板”.“Word中模版文件”等,在现实生活中,模板的概念就是——有一个规定的格式,然后每个人都可以根据自己的需求或情况去更新它,例如简历模板,下 ...

随机推荐

  1. raft协议-分布式环境下的数据一致性问题

    阅读了一个有意思的ppt,是Standford大学发表的raft协议 网址:http://thesecretlivesofdata.com/raft/ 下面自己总结下咯: 1.raft是一个实现了解决 ...

  2. 116-基于5VLX110T FPGA FMC接口功能验证6U CPCI平台 光纤PCIe卡

    基于5VLX110T FPGA FMC接口功能验证6U CPCI平台 一.板卡概述 本板卡是Xilinx公司芯片V5系列芯片设计信号处理板卡.由一片Xilinx公司的XC5VLX110T-1FF113 ...

  3. PAT Basic 1014 福尔摩斯的约会 (20 分) Advanced 1061 Dating (20 分)

    大侦探福尔摩斯接到一张奇怪的字条:我们约会吧! 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hyscvnm.大侦探很快就明白了,字条上奇 ...

  4. VB里面的字体颜色

    颜色常数颜色常数 值 描述vbBlack &H0 黑色vbRed &HFF 红色vbGreen &HFF00 绿色vbYellow &HFFFF 黄色vbBlue &a ...

  5. vue2.0 之 过渡动画transtion

    过渡的类名: 在进入/离开的过渡中,会有 6 个 class 切换 (v 是前缀,name = v) v-enter:定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移除. v-enter-ac ...

  6. bzoj5090 [Lydsy1711月赛]组题 分数规划

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=5090 题解 令 \(s_i\) 表示 \(a_i\) 的前缀和. 那么平均难度系数就是 \[ ...

  7. 【leetcode】1128. Number of Equivalent Domino Pairs

    题目如下: Given a list of dominoes, dominoes[i] = [a, b] is equivalent to dominoes[j] = [c, d] if and on ...

  8. appium环境666

    一.安装JDK,配置JDK环境    appium下载地址: https://github.com/appium/appium-desktop/releases/ 百度搜索下载就行,这里分享一个下载链 ...

  9. linux运维、架构之路-linux基础优化

    1.查看linux版本 cat /etc/redhat-release #CentOS release 6.9 (Final) ————>查看版本号 uname -m #x86_64 ————& ...

  10. a标签禁止跳转

    方法一: <a href="javascipt:void(0)>....</a>