js设计模式之模板方法模式

模板方法模式：父类定义一个基本的操作算法骨架，而将一些具体的实现步骤延迟在子类中，使得子类不要改变父类的算法结构可以实现一些拓展功能。

创建基本提示框

var Alert = function(data){
    //如果没有数据则返回，防止后面程序执行
    if(!data)
        return;
    this.content=data.content;
    //创建提示面板
    this.panel=document.creatElement('div');
    //创建内容面板
    this.contentNode=docuement.creatElement('p');
    //创建确定按钮
    this.confirmBtn=document.creatElement('span');
    //创建取消按钮
    this.closeBtn=document.creatElement('b');
    //为提示面板添加类
    this.panel.className='alert';
    //为关闭按钮添加类
    this.closeBtn.className='a-close';
    //为确定按钮添加类
    this.confirmBtn.className='a-confirm';
    //为取消按钮添加类
    this.closeBtn.className='a-close';
    //为确定按钮添加文案
    this.confirmBtn.innerHTML=data.confirm||'确定';
    //为提示内容添加文本
    this.contentNode.innerHTML=this.content;
    //点击确定按钮执行方法，如果data中有success方法则为success方法，否则为空函数
    this.success=data.success||function(){};
    this.fail=data.fail||function(){};
    }

模板原型方法

Alert.prototype={
    init:function(){
        //生成提示框
        this.panel.appendChild('this.closeBtn');
        this.panel.appendChild('this.confirmBtn');
        this.panel.appendChild('this.contentNode');
        document.body.appendChild(this.panel);
        //绑定事件
        this.bindEvent();
        //显示提示框
        this.show();
        },
    bindEvent:fuction(){
        var me=this;
        this.closeBtn.click=function(){
            me.hide();
            me.fail();
            }
        this.confirmBtn.click=function(){
            me.success();
            me.hide();
            }
        hide:function(){
            this.panel.style.display='none';
            },
        show:function(){
            this.panel.style.display='block';
            }
        }
    }

根据模板创建类

//右侧按钮提示框
var RightAlert=function(data){
    //继承基本提示框构造函数
    Alert.call(this,data);
    //为确定按钮添加right类设置位置居右
    this.confirmBtn.className=this.confirm.className+'right';
    }
//继承基本提示框方法
RightAlert.prototype=new Alert();
//标题提示框
var TitleAlert=function(data){
    Alert.call(this,data);
    this.title=data.title;
    this.titleNode=document.creatElement('h3');
    this.title.innerHTML=this.title;
    }
//继承基本提示框方法
TitleAlert.prototype=new Alert();
//对基本提示框方法进行拓展
Title.prototype.init=function(){
    this.panel.insertBefore(this.titleNode,this.panel.firstNode);
    //继承基本提示框的init方法
    Alert.prototype.init.call(this);
    }

继承类也可以作为魔板类：现在创建一个带取消按钮的标题提示框，标题提示框作为模板继承

var CancelAlert=function(data){
    TitleAlert.call(this,data);
    this.cancel=data.cancel;
    this.cancelBtn=document.creatElement('span');
    this.cancelBtn.className='cancel';
    this.cancelBtn.innerHTML=this.cancel||'取消';
    }
CancelAlert.prototype=new Alert;
CancelAlert.prototype.init=function(){
    TitleAlert.prototype.init.call(this);
    this.panel.appendChild(this.cancelBtn);
    }
CancelAlert.prototype,bindEvent=function(){
    var me=this;
    this.cancelBtn.click=function(){
        me.fail();
        me.hidden();
        }
    }

创建一个提示框

new CancelAlert({
    title:'提示内容';
    content:'提示内容';
    success:function(){
        console.log('ok');}
    fail:function(){
        console.log('fail');}
    }),init();

另外一个例子是创建多类导航
基础导航：

//格式化字符串方法:如<div>{#content}</div>用content:demo替换后<div>demo</div>
function formatSrting(str,data){
    return str.replace(/|{#(|w+)#}/g,function(match,key){
        return typeof data[key]==='undefined'?'':data[key]});
        }
//基础导航
var Nav=function(data){
    this.item='<a href="{#href}  title="{#title}">{#name}</a>';
    this.html='';
    for(var i=0,len=data.length;i<len;i++){
        this.html+=formatString(this.item,data[i]);
        }
    return this.html;
    }
//带有消息提醒信息导航
var NavNum=function(data){
    var tpl='<b>{#num}</b>';
    for(var i=0,len=data.length;i<len;i++){
        data[i].name =data[i].name+formatString(tpl,data[i]);
        }
    return Nav.call(this,data);
    }
//创建导航
var nav=document.getElementById('content');
nav.innerHTML=NavNum([
    {
    href:'http:www.baidu.com',
    title:'百度一下，你就知道啦'，
    name:'百度'，
    num:2
    },
    {
    href:'http:www.baidu.com',
    title:'百度一下，你就知道啦'，
    name:'百度'，
    num:2
    }
    ]
)