js设计模式之命令模式

命令模式就是将创建模块的逻辑封装在一个对象里，这个对象提供一个参数化的请求接口，通过调用这个接口并传递一些参数实现调用命令对象内部中的方法。

现在我们需要做一个活动页面，平铺结构，比如每个预览产品图片区域，有一行标题，标题下面是产品图片，只是图片数量和排列不同。

//模块实现模块
 var viewCommand=(function(){
     var tpl={
     //展示图片结构模板
     product:[
         '<div>',
             '<img src="{#src#}"/>',
             '<p>{#text#}</p>',
         '</div>'
         ].join(''),
     //展示标题结构模板
     title:[
         '<div class="title">',
             '<div class="main">',
                 '<h2>{#title#}</h2>',
                 '<p>{#tips#}</p>',
             '</div>',
         '</div>'
     ].join('')}
     //格式化字符串缓存字符串
     html='';
     function formatString(str,obj){
         return str.replace(/|{#(\w+)#|}/g,function(match,key){
             return obj[key];
             })
      }

     //方法集合
     var Action={
         create:function(data,view){
         //data参数指定了模块视图数据，data可能是对象可能是数组，view指定了数据模板
         //如果数据是一个数组，一一格式化数组成员并缓存html中，否则直接格式化data数据
             if(data.length){
                 for(var i=0,len=data.length;i<len;i++){
                     html+=formatString(tpl[view],data[i]);
              }else{
                  html+=formatString(tpl[view],data);
              }
            }
         },
         display:function(container,data,view){
             if(data){
                 this.create(data,view);
                 }
             }
             document.getElementById('container').innerHTML=html;
             html='';
         }
      //命令接口
      return function excute(msg){
      //解析命令，如果msg.param不是数组则转换为数组（apply方法要求第二个参数是数组）
      msg.param=Object.prototype.call(msg.param)==="[object Array]"?msg.param:[msg.param];
      //Action内部调用的方法引用this，所以此处保证作用域this执行传入Action
      Action[msg.command].apply(Action,msg.param)
      }
   })();
//产品展示数据
var productData=[
    {
        src:'1.img',
        text:'花朵'
    }，
    {
        src:'1.img',
        text:'花朵'
    }，
    {
        src:'1.img',
        text:'花朵'
    }，
]，
var titleData={
    title:'夏天的一片胡海'，
    tips：'镜头的绿色'
}
//创建一张图片
viewCommand({
    command:'create',
    param:[{
        src:'1.img',
        text:'迎着朝阳的野菊花'
        }，‘product’]
   })
//创建多张图片
viewCommand({
    command:'create',
    param:['product',productData,'product']
     })

另外一个应用场景就是canvas绘图命令

//实现对象
var CanvasCommand=(function(){
    var canvas=document.getElementById('canvas'),
    var ctx=canvas.getContent('2d');
    var Action={
        //填充色彩
        fillStyle:function(c){
            ctx.fillStyle=c;
            },
        //填充矩形
        fillRect：function(x,y,w,h){
            ctx.fillRect(x,y,w,h);
            },
        //移动画笔
        moveTo：function(x,y){
            ctx.moveTo(x,y)
            }
        ……
        }
        return {
            excute:function(msg){
                if(!msg)
                    return;
                if(msg.length){
                    for(var i=0,len=msg.length;i<len;i++){
                        arguments.callee(msg[i]);
                 }else{
                     msg.param=Object.prototype.toString.call(msg.param)==='[object Array]'?msg.param:[msg.param;
                     Action[msg.command].apply(Action,msg.param);
                     ]
                 }
            }
        }
    }
})();
CanvasCommand.excute([
    {command:'fillStyle',param:'red'},
    {command:'fillRect',param:[20,20,100,100]}
]);