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