Javascript乱弹设计模式系列(5) － 命令模式(Command)

各个命令对象作为命令参数传递给对应的子菜单项对象中，其中我们发现有个onMacro1Command的命令对象，它里面包含一系列的其他单命令对象，这个菜单按钮属于“自定义格式”。顾名思义，这里执行一个新的命令，它包括一连串的单命令，“加粗＋斜体＋下划线”，onMacro1Command类实现如下：

functiononMacro1Command(){
　　this.commands=newArray();
　　for(vari=0,len=arguments.length;i<len;i++)
　　{
　　　　this.commands.push(arguments[i]);
　　}
　　Interface.registerImplements(this,ICommand);
}
onMacro1Command.prototype.execute=function(){
　　for(vari=0,len=this.commands.length;i<len;i++)
　　{
　　　　this.commands[i].execute();
　　}
};

这里通过一个commands数组存储这一系列的命令对象，当onMacro1Command对象执行execute方法时，就一次性地执行数组中的所有命令对象；

6. 还有其他一些JS函数介绍下：

functionaddEvent(target,event_type,handler){
　　if(target.addEventListener)
　　　　target.addEventListener(event_type,handler,false);
　　elseif(target.attachEvent)
　　　　target.attachEvent("on"+event_type,handler);
　　else
　　　　target["on"+event_type]=handler;
}
//弹出DIV层
functionshowDiver(str,width,height){
　　variWidth=width;
　　variHeight=height;
　　document.getElementById("diver").style.width=iWidth+"px";
　　document.getElementById("diver").style.height=iHeight+"px";
　　document.getElementById("diver").style.left=(document.body.clientWidth-iWidth)/2+"px";
　　document.getElementById("diver").style.top=(document.body.clientHeight-iHeight)/2+"px";
　　document.getElementById("diver").style.display="inline";
　　document.getElementById("divMore").innerHTML=str;
}
//关闭DIV层
functioncloseDiver(){
　　document.getElementById("diver").style.display="none";
　　document.getElementById("divMore").innerHTML="";
}

其中addEvent方法为了兼容各个浏览器的绑定事件的实现。

7. 至于ConcreteCommand各种命令类的实现，请下载源代码自己查看研究吧，这里不进行讲述了。

总结

该篇文章用Javascript设计命令模式的思路，实现一个简单的在线编辑器。

相关系列文章：

Javascript乱弹设计模式系列(5) － 命令模式(Command)

Javascript乱弹设计模式系列(4) － 组合模式(Composite)

Javascript乱弹设计模式系列(3) － 装饰者模式(Decorator)

Javascript乱弹设计模式系列(2) － 抽象工厂以及工厂方法模式(Factory)

Javascript乱弹设计模式系列(1) － 观察者模式(Observer)

Javascript乱弹设计模式系列(0) － 面向对象基础以及接口和继承类的实现