模板方法单例分享

模板方法单例

模板方法的定义：父类中定义一组操作算法骨架，将一些实现步骤延伸到子类中，使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤。

---

代码块

html部分，例如：

<div id="content"></div>

js部分，例如：

    //格式化字符串方法
    function fromateString(str, data) {
      return str.replace(/\{#(\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; i < data.length; i++) {
        this.html += fromateString(this.item, data[i]);
      }
      return this.html;
    }
    //带有信息提示信息导航
    var NumNav = function (data) {
      //消息提醒小心组件模板
      var tpl = '<p>{#num#}</p>';
      for (var i = data.length -1; i >= 0; i--) {
        data[i].name += data[i].name + fromateString(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 + fromateString(tpl, data[i]);
      }
      return Nav.call(this, data);
    }

    //测试带有信息提示的导航
    var nav = document.getElementById('content');
    nav.innerHTML = NumNav([
      {
        href : 'www.baidu.com',
        title : '百度一下你就知道',
        name : '百度',       
        num : 10,
        link : 'www.baidu.com'
      },
      {
        href : 'www.taobao.com',
        title : '淘宝商城',
        name : '淘宝',       
        num : 2,
        link : 'www.taobao.com'
      },
      {
        href : 'www.qq.com',
        title : '腾讯首页',
        name : '腾讯',       
        num : 3,
        link : 'www.qq.com'
      }
    ]);

其实模板方法模式不仅仅在我们归一化组件的时候使用 有时候创建页面时也是很常用到的。通过上述代码可以衍生出的静态页面的封装以及业务逻辑的交互封装。
作为开发人员，技术的总结很大成度上都是一点一滴的积累。后续博主会持续更新javaScript的一些项目常用总结，欢迎大家提出问题，以及探讨。

---