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]}
]);

4000