设计模式之行为型命令模式

转载

mob604756edad5f 2014-08-12 12:54:00

本篇文章介绍设计模式中行为型命令模式。

将请求与实现解耦并封装成独立对象，从而使不同的请求对客户端的实现参数化。
命令模式是将创建模块的逻辑封装在一个对象里，这个对象提供一个参数化的请求接口，通过调用这个接口并传递一些参数实现调用命令对象内部中的一些方法。请求部分很简单，只需要按照给定参数格式书写指令即可，所以实现部分的封装才是重点，因为它要为请求部分提供所需方法。

// 模块实现模块
var viewCommand = (function() {
  var tpl = {
    // 展示图片结构模块
    product: [
          '<div>',.....,'</div>'
      ].join(''),
    // 展示标题结构模块
    title: [
      '<div>',.....,'</div>'
      ].join('')
  },
  // 格式化字符串缓存字符串
  html = '';
  // 格式化字符串
  function formateString(str, obj) {}
  // 方法集合
  var Action = {
    // 创建方法
    create: function(data, view) {
      // 解析数据
      if(data.length) {
        // 遍历
        for(var i = 0, len = data.length; i < len; i++) {
          html += formateString(tpl[view], data[i]);
        }
      } else {
        html += formateString(tpl[view], data);
      }
    },
    // 展示方法
    display: function(container, data, vuew) {
      // 如果传入数据
      if(data) {
        // 根据给的数据创建视图
        this.create(data, view);
      }
      // 展示模块
      document.getElementById(container).innerHTML = html;
      // 展示后清空缓存字符串
      html = '';
    }
  }
  // 命令接口
  return function excute(msg) {
    // 解析命令，如果msg.param不是数组则将其转化为数组
    msg.param = Object.prototype.toString.call(msg.param) === "[object Array]" ? msg.param : [msg.param];
    // Action内部调用的方法引用this，此处保证作用域this执行传入Action
    Action[msg.command].apply(Action, msg.param)
  }
})();

测试命令对象

var productData = [
  {
    src: 'command/02.jpg',
    text: '绽放的桃花'
  },
  {
    src: 'command/03.jpg',
    text: '阳光下的温馨'
  }
],
// 模块标题数据
titleData = {
  title: '夏日里的一片温馨',
  tips: '暖暖的温情带给人们家的感觉'
}
// 调用命令对象
viewCommand({
  command: 'display',
  param: ['title', titleData, 'title']
});
viewCommand({
  command: 'create',
  param: ['product', productData, 'product']
});