zoukankan      html  css  js  c++  java
  • 设计模式之行为型模板模式

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

    // 格式化字符串方法
    function formateString(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, 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);
    }

    模板模式的核心在于对方法的重用,将核心方法封装在基类中,让子类继承基类的方法,实现基类方法的共享,达到方法共用。子类继承的方法是可扩展的,这就需要对基类继承的方法进行重写。

  • 相关阅读:
    windows下mysql数据库导入导出
    比较两个数组,根据id删除相同的对象
    angular子组件给父组件传值
    angular父组件给子组件传值
    angular获取dom节点
    angular创建服务
    forEach和for包含异步调用的区别
    用某种符号或字符替换某些字符
    嵌套函数和闭包
    JavaScript 递归
  • 原文地址:https://www.cnblogs.com/camille666/p/design_pattern_behavior_template.html
Copyright © 2011-2022 走看看