1.将请求与实现解耦成独立的对象,从而使不通过的请求与客户端实现参数化。
//canvas命令模式
var CanvasCommand=(function(){
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext("2d");
var Action={
fillStyle:function(c){
ctx.fillStyle=c;
},
fillRect:function(x,y,width,height){
ctx.fillRect(x,y,width,height);
},
strokeStyle:function(c){
ctx.strokeStyle=c
},
strokeRect:function(x,y,width,height){
ctx.strokeRect(x,y,width,height);
},
fillText:function(text,x,y){
ctx.fillText(text,x,y)
},
beginPath:function(){
ctx.beginPath();
},
moveTo:function(x,y){
ctx.moveTo(x,y)
},
lineTo:function(x,y){
ctx.lineTo(x,y)
},
arc:function(x,y,r,bggin,end,dir){
ctx.arc(x,y,r,bggin,end,dir)
},
closePath:function(){
ctx.closePath();
},
fill:function(){
ctx.fill();
},
stroke:function(){
ctx.stroke();
}
}
return {
excute:function(msg){
if(!msg){
return
}
if(msg.length){
for(var i=0;i<msg.length;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]}
]);
CanvasCommand.excute([
{command:'strokeStyle',param:'green'},
{command:'strokeRect',param:[20,20,300,300]}
]);
CanvasCommand.excute([
{command:'strokeStyle',param:'green'},
{command:'strokeRect',param:[20,20,300,300]}
]);
CanvasCommand.excute([
{command:'fillStyle',param:'yellow'},
{command:'beginPath',param:[]},
{command:'arc',param:[100,100,60,0,Math.PI,true]},
{command:'closePath',param:[]},
{command:'fill',param:[]}
]);