javascript-模板方法模式-提示框归一化插件
模板方法模式笔记
父类中定义一组算法操作骨架，而将一些实现步骤延迟到子类中，使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤
实例：弹出框归一化插件
css样式
1 .alert{position: fixed;left: 50%;top: 50%;background-color: #ffffff;z-index: 2147000001;width:400px; 2 border-radius: 5px;font-weight: bold;color: #535e66;box-shadow: 1px 1px 4px #eee,-1px -1px 4px #eee;margin-top:-9rem;margin-left:-200px;} 3 .alert h3{text-indent:2rem;border-bottom:1px solid #eef0f1;margin:0;padding:1rem 0;} 4 .alert p{padding: 2rem 5rem;height: 5rem;overflow: hidden;margin:0;border-bottom:1px solid #eef0f1;} 5 .alert .a-close{display: block;cursor: pointer;width: 12px;height: 12px;position: absolute;top: 1.2rem;right: 1.5rem;background: url(../img/icons.png) -48px -96px no-repeat;} 6 .alert .a-close:after{display: block;content: ""; clear: both;} 7 .alert .btn{display: inline-block;cursor: pointer;width: 4.5rem;height: 1.8rem;line-height: 1.8rem;text-align: center;color: #FFFFFF; 8 border-radius: 5px;margin:0.5rem;} 9 .alert .panelFooter{width:11rem;float:right;} 10 .alert .a-confirm{background-color: #0095d9;} 11 .alert .cancel{background-color: #546a79;} 12 .alert .right{float:right} 13 14 @media only screen and (min-width: 100px) and (max-width: 640px) { 15 .alert{width:80%;margin-left:-40%;} 16 .alert h3{text-indent: 1rem;} 17 .alert p{padding:1rem;} 18 .alert .a-close{right: 1rem;} 19 }
运用寄生组合继承方法
1 //原型式继承 2 function inheritobject(o){ 3 //声明一个过渡函数对象 4 function F(){ 5 } 6 //过渡原型对象继承父对象 7 F.prototype=o; 8 //返回过渡对象的一个实列，该实例的原型继承了父对象 9 return new F(); 10 } 11 12 /* 13 *寄生式继承 继承原型 14 * 传递参数subclass 子类 15 * 传递参数superclass 父类 16 * */ 17 function inheritPrototype(subclass,superclass){ 18 //复制一份父类的原型副本保存在变量中 19 var p=inheritobject(superclass.prototype); 20 //修正因为重写子类原型导致子类的constructor属性被修改 21 p.constructor=subclass; 22 //设置子类原型 23 subclass.prototype=p; 24 }
首先要创建基本提示框基类（模板类），然后其他提示框类只需要在继承的基础上，拓展自己所需即可，日后需求变更，修改基础类，所有提示框类实现的样式都会统一变化
基本提示框类：只实现一个提示内容、一个关闭按钮、一个确定按钮
1 var Alert = function(data){ 2 if(!data) return; 3 this.content=data.content; 4 this.panel =document.createElement("div");//提示框面板 5 this.contentNode=document.createElement("p"); 6 this.panelFooter=document.createElement("div"); 7 this.confirmBtn=document.createElement("span"); 8 this.closeBtn=document.createElement("b"); 9 this.panel.className="alert"; 10 this.panelFooter.className="panelFooter"; 11 this.confirmBtn.className="btn a-confirm"; 12 this.closeBtn.className="a-close"; 13 this.confirmBtn.innerHTML=data.confirm || '确认'; 14 this.contentNode.innerHTML=this.content; 15 this.success=data.success || function(){}; 16 this.fail=data.fail || function(){}; 17 } 18 Alert.prototype={ 19 init :function(){ 20 this.panel.appendChild(this.closeBtn); 21 this.panel.appendChild(this.contentNode); 22 this.panelFooter.appendChild(this.confirmBtn); 23 this.panel.appendChild(this.panelFooter); 24 document.body.appendChild(this.panel); 25 this.bindEvent(); 26 this.show(); 27 }, 28 bindEvent : function(){ 29 var me = this; 30 this.closeBtn.onclick = function(){ 31 me.fail(); 32 me.hide(); 33 } 34 this.confirmBtn.onclick = function(){ 35 me.success(); 36 me.hide(); 37 } 38 }, 39 hide : function(){ 40 this.panel.style.display ="none"; 41 }, 42 show :function(){ 43 this.panel.style.display='block'; 44 } 45 }
右侧按钮提示框类：继承基本提示框类，拓展需求，使按钮移动到右侧显示
1 //右侧按钮提示框 2 var RightAlert =function(data){ 3 Alert.call(this,data); 4 this.panelFooter.className = this.panelFooter.className + ' right'; 5 } 6 inheritPrototype(RightAlert,Alert);
标题提示框类 ：继承基本提示框类，拓展需求，添加一个提示框标题
1 //标题提示框类 2 var TitleAlert=function(data){ 3 Alert.call(this,data); 4 this.title = data.title; 5 this.titleNode = document.createElement("h3"); 6 this.titleNode.innerHTML = this.title; 7 } 8 inheritPrototype(TitleAlert,Alert); 9 TitleAlert.prototype.init =function(){ 10 this.panel.insertBefore(this.titleNode,this.panel.firstChild); 11 Alert.prototype.init.call(this); 12 13 }
继承类也可作为模板
带有取消按钮的弹出框：继承标题提示框类，拓展需求，添加一个取消按钮
1 //继承类也可作为模板 2 var CancelAlert = function(data){ 3 //继承标题提示框构造函数 4 TitleAlert.call(this,data); 5 //取消按钮文案 6 this.cancel = data.cancel; 7 this.cancelBtn = document.createElement('span'); 8 this.cancelBtn.className='btn cancel'; 9 this.cancelBtn.innerHTML = this.cancel || '取消'; 10 } 11 inheritPrototype(CancelAlert,TitleAlert); 12 CancelAlert.prototype.init = function(){ 13 TitleAlert.prototype.init.call(this); 14 this.panelFooter.appendChild(this.cancelBtn); 15 } 16 CancelAlert.prototype.bindEvent = function(){ 17 var me=this; 18 TitleAlert.prototype.bindEvent.call(me); 19 this.cancelBtn.onclick = function(){ 20 me.fail(); 21 me.hide(); 22 } 23 }
测试代码
1 new CancelAlert({ 2 title : '提示', 3 content : '提示内容', 4 success : function(){ 5 console.log('ok'); 6 }, 7 fail : function(){ 8 console.log("cancel"); 9 } 10 }).init();
浏览器显示
