模板方法模式:父类定义一个基本的操作算法骨架,而将一些具体的实现步骤延迟在子类中,使得子类不要改变父类的算法结构可以实现一些拓展功能。
创建基本提示框
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
}
]
)