再起航，我的学习笔记之JavaScript设计模式17(模板方法模式)

模板方法模式

由模板方法模式开始我们正式告别结构型设计模式，开始行为型设计模式的学习分享

行为型设计模式用于不同对象之间职责划分或算法抽象，行为型设计模式不仅仅涉及类和对象，还涉及类或对象之间的交流模式并加以实现

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

总的来说模板方法模式就是将多个模型抽象化归一，从中抽象提取出来一个最基本的模板，然后其他模块只需要继承这个模板方法，也可以拓展某些方法。

下面我们用一个提示框例子来开始本次的分享吧：

创建模板

模板类

var Alert = function(data) {
    //如果没有数据则返回，防止后面程序执行
    if(!data) return;
    //设置内容
    this.content = data.content;
    //创建提示框面板
    this.panel = document.createElement('div');
    //创建提示内容组件
    this.contentNode = document.createElement('p');
    //创建确定按钮组件
    this.confirmBtn = document.createElement('span');
    //创建关闭按钮组件
    this.closeBtn = document.createElement('b');
    //为提示框面板添加类
    this.panel.className = 'alert';
    //为关闭按钮添加类
    this.closeBtn.className = 'a-close';
    //为确定按钮添加类
    this.confirmBtn.className = 'a-confirm button blue';
    //为确认按钮添加显示名称
    this.confirmBtn.innerHTML = data.confirm || '确定';
    //为提示内容添加文本
    this.contentNode.innerHTML = this.content;
    //为点击确定方法绑定执行方法
    this.success = data.success || function() {};
    //点击关闭按钮执行方法
    this.fail = data.fail || function() {};
}

添加原型

Alert.prototype = {
    //初始化方法
    init: function() {
        //生成提示框
        this.panel.appendChild(this.closeBtn);
        this.panel.appendChild(this.contentNode);
        this.panel.appendChild(this.confirmBtn);
        //插入页面
        document.body.appendChild(this.panel);
        //绑定事件
        this.bindEvent();
        //显示提示框
        this.show();
    },
    bindEvent: function() {
        var me=this;
        //关闭按钮事件
        this.closeBtn.onclick = function() {
            //执行关闭取消方法
            me.fail();
            //隐藏弹层
            me.hide();
        }
        //确定按钮事件
        this.confirmBtn.onclick = function() {
            //执行关闭确认方法
            me.success();
            //隐藏弹层
            me.hide();
        }
    },
    hide:function(){
        this.panel.style.display='none';
    },
    show:function(){
        this.panel.style.display='block';
    }
}

拓展

至此我们的提示框基类就创建完毕了，拓展起来也很简单，我们试着拓展一个标题提示框

var TitleAlert=function(data){
    //继承基本提示框
    Alert.call(this,data);
    //设置标题内容
    this.title=data.title;
    //创建标题组件
    this.titleNode=document.createElement('h3');
    //标题组件中写入标题内容
    this.titleNode.innerHTML=this.title;
}
//继承基本提示框方法
TitleAlert.prototype=new Alert();
//对基本提示框创建方法拓展
TitleAlert.prototype.init=function(){
    //插入标题
    this.panel.insertBefore(this.titleNode,this.panel.firstChild);
    //继承基本提示框init方法
    Alert.prototype.init.call(this);
}

我们来试着调用一下

new TitleAlert({
    title:'提示标题',
    content:'提示内容',
    success:function(){
        alert('您点击了确定');
    }
}).init()

总结

模板方法的核心在于对方法的重用，它将核心方法封装在基类中，让子类继承基类的方法，实现基类方法的共享，达到方法公用。当然这种设计模式也将导致基类控制子类必须准守某些法则。这是一种行为的约束。当然为了让行为的约束更可靠，基类中封装的方法通常是不变的算法，或者有稳定的调用方式。子类继承的方法也是可以拓展的，这就要求对基类继承的方法进行重写。当然为了更好地实践，我们通常需要控制这种拓展，这样才能让基类对子类有更稳健的束缚力。然而子类对自身私有行为的拓展还是很有必要的。

也谢谢大家看到这里：）如果你觉得我的分享还可以请点击推荐，分享给你的朋友让我们一起进步~

好了以上就是本次分享的全部内容，本次示例参考自JavaScript设计模式一书，让我们一点点积累一点点成长，希望对大家有所帮助。

欢迎转载，转载请注明作者，原文出处。