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();

瀏覽器顯示