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