Javascript设计模式-13-模板方法

Javascript设计模式 - 13 - 模板方法

简介

父类中定义一组操作算法骨架，而将一些实现步骤延迟到子类中，使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤

定义和组成

模板方法是基于继承的设计模式，可以很好的提高系统扩展性

1. 抽象的父类，封装了子类的算法框架，包括实现一些公共方法以及封装子类中所有方法的执行顺序
2. 具体的实现子类，子类通过继承抽象的父类，继承整个算法结构，并且可以选择重写父类的算法

在模板方法模式中，子类实现中的相同部分被上移到父类中，而将不同的部分留给子类来实现，当我们使用模板方式时，就意味着子类放弃了对自己的控制权，而是改为父类通知子类，那些方法应该在什么时候调用，作为子类，只负责提供一些设计上的细节

代码

    // 定义父类模板
    function Parent() {}

    // 父类定义要有什么样的方法
    Parent.prototype.think = function () {
        throw new Error('Subclasses need to be rewritten think');
    }

    Parent.prototype.work = function () {
        throw new Error('Subclasses need to be rewritten work');
    }

    Parent.prototype.tell = function () {
        throw new Error('Subclasses need to be rewritten tell');
    }

    // 定义决定是否可以调用方法的钩子函数
    Parent.prototype.shouleTell = function () {
        return true;
    }

    // 模板方法，在父类中定义如何使用这些方法，封装了子类的算法框架
    Parent.prototype.init = function () {
        this.think();
        this.work();
        this.shouleTell() && this.tell();
    }

    // 定义子类
    function Children() {}

    Children.prototype = new Parent();

    // 重写方法
    Children.prototype.think = function () {
        console.log('Children is rewritten think');
    }

    Children.prototype.work = function () {
        console.log('Children is rewritten work');
    }

    Children.prototype.tell = function () {
        console.log('Children is rewritten tell');
    }

    // 通过重写钩子函数的返回值，决定相应的响应
    Children.prototype.shouleTell = function () {
        return window.confirm('shoule rewritten tell');
    }

    var children = new Children();

    children.init();

抽象方法和具体方法

都存放在抽象的父类中，抽象方法没有具体的实现过程，必须由继承父类的子类重写这个方法，出了抽象方法之外，如果子类中都有同样的具体实现方法，那这些方法也可以放在父类中，可以节省代码，这些方法就是具体方法

钩子方法

放置钩子是隔离变化的一种常见手段，我们在父类中容易变化的地方放置钩子，钩子有一个默认的实现，究竟要不要挂钩是由子类决定的。钩子的返回结构决定了模板方法后边的执行步骤，这样一来程序就拥有了变化的可能

文章列表

1. javascript设计模式 – 设计原则
2. JavaScript设计模式–高阶函数
3. Javascript 设计模式 - 01 - 原型模式
4. Javascript 设计模式 - 02 - 单例模式
5. Javascript 设计模式 - 03 - 建造者模式
6. Javascript 设计模式 - 04 - 工厂模式
7. Javascript 设计模式 - 05 - 外观模式
8. Javascript 设计模式 - 06 - 代理模式
9. Javascript 设计模式 - 07 - 观察者模式（发布订阅模式）
10. Javascript 设计模式 - 08 - 策略模式
11. Javascript 设计模式 - 09 - 命令模式
12. Javascript 设计模式 - 10 - 迭代器模式
13. Javascript 设计模式 - 11 - 职责链模式
14. Javascript 设计模式 - 12 - 适配器模式
15. Javascript 设计模式 - 13 - 模板方法
16. Javascript 设计模式 - 14 - 组合模式
17. Javascript 设计模式 - 15 - 享元模式
18. Javascript 设计模式 - 16 - 中介者模式
19. Javascript 设计模式 - 17 - 装饰者模式
20. Javascript 设计模式 - 18 - 状态模式

参考

• JavaScript设计模式–模板方法模式