模板方法模式

/**
 * 父类中定义一组操作算法骨架，而将一些实现步骤延迟到子类中，使得子类可以不改变父类的算法结构的同时可重新定义算法中的某些实现步骤。
 * 提示框归一化
 */

// 创建基本提示框
// 模板类
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");
  // 为提示框面板添加 class
  this.panel.className = "alert";
  // 为关闭按钮添加 class
  this.closeBtn.className = "a-close";
  // 为确定按钮添加 class
  this.confirmBtn.className = "a-confirm";
  // 为确定按钮添加文案
  this.confirmBtn.innerHTML = data.confirm || "确认";
  // 为提示内容添加文本
  this.contentNode.innerHTML = this.content;
  // 点击确认按钮执行的函数
  this.success = data.success || function () {};
  // 点击关闭按钮执行的函数
  this.fail = data.fail || function () {};
};

/**
 * 模板原型方法
 */
// 提示框原型
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";
  },
};

/**
 * 根据模板创建类
 * 右侧按钮提示框
 */
var RightAlert = function (data) {
  Alert.call(this, data);
  this.confirmBtn.className = this.confirmBtn.className + " right";
};

RightAlert.prototype = new Alert();

/**
 * 标题提示框
 */
var TitleAlert = function (data) {
  Alert.call(this, data);
  this.title = data.title;
  this.titleNode = document.createElement("h3");
  this.titleNode.innerHTML = this.title;
};

TitleAlert.prototype = new Alert();
// 对基本提示框创建方法拓展
TitleAlert.prototype.init = function () {
  this.panel.insertBefore(this.titleNode, this.panel.firstChild);
  Alert.prototype.init.call(this);
};

/**
 * 继承类也可以做模板类
 */
// 带有取消按钮的弹出框
var CancelAlert = function (data) {
  TitleAlert.call(this, data);
  this.cancel = data.cancel;
  this.cancelBtn = document.createElement("span");
  this.cancelBtn.className = "cancel";
  this.cancelBtn.innerHTML = this.cancel || "取消";
};

CancelAlert.prototype = new Alert();

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

CancelAlert.prototype.bindEvent = function () {
  var me = this;
  TitleAlert.prototype.bindEvent.call(me);
  this.cancelBtn.onclick = function () {
    me.fail();
    me.hide();
  };
};

/**
 * 创建一个提示框
 */
new CancelAlert({
  title: "提示标题",
  content: "提示内容",
  success: function () {
    console.log("ok");
  },
  fail: function () {
    console.log("cancel");
  },
}).init();

/**
 * 创建多类导航
 */
//格式化字符串方法
function formateString(str, data) {
  return str.repalce(/\{#(\w+)#\}/g, function (match, key) {
    return typeof data[key] === undefined ? "" : data[key];
  });
}

// 基础导航
var Nav = function (data) {
  this.item = '<a href="{#href#}" title="{#title#}">{#name#}</a>';
  this.html = "";
  for (var i = 0, len = data.length; i < len; i++) {
    this.html += formateString(this.item, data[i]);
  }
  return this.html;
};

// 带有消息提醒的信息导航
var NumNav = function (data) {
  var tpl = "<b>{#num#}</b>";
  for (var i = data.length - 1; i >= 0; i--) {
    data[i].name += data[i].name + formateString(tpl, data[i]);
  }
  return Nav.call(this, data);
};

// 带有链接地址的导航
var LinkNav = function (data) {
  var tpl = "<span>{#link#}</span>";
  for (var i = data.length - 1; i >= 0; i--) {
    data[i].name += data[i].name + formateString(tpl, data[i]);
  }
  return Nav.call(this, data);
};

/**
 * 创建导航
 */
var nav = document.getElementById("content");
nav.innerHTML = NumNav([
  {
    href: "http://www.baidu.com/",
    title: "百度一下，你就知道",
    name: "百度",
    num: "10",
  },
  {
    href: "http://www.taobao.com/",
    title: "淘宝商城",
    name: "淘宝",
    num: "2",
  },
  {
    href: "http://www.qq.com/",
    title: "腾讯首页",
    name: "腾讯",
    num: "3",
  },
]);