模板方法模式筆記
? ?父類中定義一組算法操作骨架，而將一些實現步驟延遲到子類中，使得子類可以不改變父類的算法結構的同時可重新定義算法中某些實現步驟
? ?實例：彈出框歸一化插件

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

瀏覽器顯示

?

轉載于:https://www.cnblogs.com/jtnote/p/6001156.html

總結

以上是生活随笔為你收集整理的javascript-模板方法模式-提示框归一化插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。