javascript設計模式(張容銘)學習筆記 - 照貓畫虎-模板方法模式

模板方法模式(Template Method)：父類中定義一組操做算法骨架，而降一些實現步驟延遲到子類中，使得子類能夠不改變父類的算法結構的同時可從新定義算法中某些實現步驟。

項目經理體驗了各個頁面的交互功能，發現每一個頁面的彈出框樣式都不太一致，有的是高度高一些，有的是字體大了些，有的是按鈕歪了些。 因而咱們就須要將這些頁面中的彈出框歸一化。

咱們首先要作的就是建立一個基本提示框基類，而後其餘提示框類只須要在繼承的基礎上，拓展本身所需便可了吧，這樣往後需求再變更咱們修改基礎類就可使全部提示框的樣式都統一化了。

 

基本提示框，它有一個提示內容、一個關閉按鈕和肯定按鈕

// 模板類 基礎提示框 data 渲染數據

var Alert = function(data) {
  // 沒有數據則返回，防止後面程序執行
  if(!data) return;
  // 設置內容
  this.content = data.content;
  // 建立提示框模板
  this.panel = document.createElement('div');
  // 建立提示內容組件
  this.contentNode = document.createElement('p');
  // 建立肯定按鈕組件
  this.confirmBtn = document.createElement('span');
  // 建立關閉按鈕組件
  this.closeBtn = document.createElement('b');
  // 爲提示框模板添加類
  this.panel.className = 'alert';
  // 爲關閉按鈕添加類
  this.closeBtn.className = 'a-closse';
  // 爲肯定按鈕添加類
  this.confirmBtn.className = 'a-confirm';
  // 爲肯定按鈕添加文案
  this.confirmBtn.innerHTML = data.confirm || '確認';
  // 爲提示內容添加文本
  this.contentNode.innerHTML = this.content;
  // 點擊肯定按鈕執行方法 若是data中有success方法則爲success方法，不然爲空函數
  this.success = data.success || function();
  // 點擊關閉按鈕執行方法
  this.fail = data.fail || function();
}

模板的原型方法

既然這個基本提示框是可建立的，那麼它也應該具備一些基本方法，好比應該有init方法來組裝提示框， bindEvent方法來綁定點擊肯定或關閉按鈕事件，等等。

// 提示框原型方法
Alert.prototype = {
  // 建立方法
  init: function() {
    // 生成提示框
    this.panel.appendChild(this.closeBtn);
    this.panel.appendChild(this.contentNode);
    this.panel.appendChild(this.confirmBtn);
    // 插入頁面中
    document.body.appendChild(this.panel);
    // 綁定事件
    this.bindEvent();
    // 顯示提示框
    this.show();
  },
  bindEvent: function() {
    var me = this;
    // 關閉按鈕點擊事件
    this.closeBtn.onclick = function() {
      // 執行關閉取消方法
      me.fail();
      // 隱藏彈層
      me.hide();
    }
    // 肯定按鈕點擊事件
    this.confirmBtn.onclick = function() {
      // 執行關閉確認方法
      me.success();
      // 隱藏彈層
      me.hide();
    }
  },
  // 隱藏彈層方法
  hide: function() {
    this.panel.style.display = 'none';
  },
  // 顯示彈層方法
  show: function() {
     this.panel.style.display = 'block';
  },
  // 確認方法
  success: function() {
    console.log('success');
  }
  // 取消方法
  fail: function() {
    console.log('fail');
  }
}

 

有了這個提示框基類，再想拓展其餘類型彈層則容易多了，好比右側按鈕提示框

// 右側按鈕提示框
var RightAlert = function(data) {
  // 繼承基本提示框的構造函數
  Alert.call(this. data);
  // 爲確認按鈕添加right類設置位置偏右
  this.confirmBtn.className = this.confirmBtn.className + ' right';
}

// 繼承基本提示框方法
RightAlert.prototype = new Alert();

 

取消按鈕提示框

// 取消按鈕提示框

var CancelAlert = function(data) {
  Alert.call(this, data);
  this.cancelBtn = document.createElement('span');
  this.cancelBtn.innerHTML = data.cancelText || '取消';
  this.cancelBtn.className = 'a-cancel btn';
}

CancelAlert.prototype = new Alert();

CancelAlert.prototype.init = function() {
  Alert.prototype.init.call(this);
  this.panel.appendChild(this.cancelBtn);
}

 

右側取消按鈕提示框

/ 右側取消按鈕提示框
var RightCancelAlert = function(data) {
  // 繼承取消提示框的構造函數
  CancelAlert.call(this, data);
  this.cancelBtn.className = this.cancelBtn.className + ' right'
}

RightCancelAlert.prototype = new CancelAlert();

RightCancelAlert.prototype.init = function() {
  CancelAlert.prototype.init.call(this);
}