Javascript模式- 命令模式(Command)
前言博客园谈设计模式的文章很多，我也受益匪浅，包括TerryLee、吕震宇等等的.NET设计模式系列文章，强烈推荐。对于我，擅长于前台代码的开发，对于设计模式也有一定的了解，于是我想结合Javascript来设计前台方面的"设计模式"，以对后台"设计模式"做个补充。开始这个系列我也诚惶诚恐，怕自己写得不好，不过我也想做个尝试，一来希望能给一些人有些帮助吧，二来从写文章中锻炼下自己，三来通过写文章对自己增加自信；如果写得不好，欢迎拍砖，我会虚心向博客园高手牛人们学习请教；如果觉得写得还可以，谢谢大家的支持了:)
今天开始介绍命令模式，并且将利用命令模式设计一个简单的在线编辑器。
概述
在各种各样的行为实现中，行为请求者与行为实现者紧密耦合，当每增加一个行为实现的时候，行为请求者必须增加一个对行为的处理，这样就需要大量改动请求者的操作，显然这样不利于维护和扩展。为了让行为请求者和行为实现者解耦，可以将行为封装为一个命令对象，但需要处理行为时，只要请求者知道命令对象，它本身不需要知道命令对象都做些什么，命令对象负责执行接收者的真正实现，这样就达到二者之间松耦合的目的。
定义
命令模式是将请求封装成对象，这可以让你使用不同请求、队列，或者日志请求来参数化其他对象。命令模式也可以支持撤销操作。
类图
实例分析
现在开始利用命令模式来应用到一个在线编辑器的场景中，并且详细分析一下：
这里先给大家看下效果图（兼容多浏览器）：
这里我引用了我的第4篇－组合模式的菜单例子进行改进；将命令模式和组合模式相结合的方式来阐述例子。
其中主菜单包括：文件（子菜单：新建、导出、退出）
编辑（子菜单：剪切、复制、粘贴、删除）
格式（子菜单：字体、字号、加粗、斜体、下划线、位置、编号、字体颜色）
插入（子菜单：插入链接、插入图片），操作（撤销、重做、切换HTML）
自定义格式（子菜单：格式1）
帮助（子菜单：关于作者）
编辑器的这些功能实际上很常用。最后点击"得到HTML值"的按钮，可以得到HTML的内容，这里就可以按照您的需要来存储编辑器内容；文章的最后我将附上源代码。
1.首先添加一个ICommand.js文件，其中定义一个Command接口：其中execute作为Command执行的接口方法;
关于接口的定义，可以参考我的第0篇－面向对象基础以及接口和继承类的实现的实现。
2.添加一个ConcreteCommand.js文件，作为继承ICommand接口的所有具体实现类：
因为子菜单中的每个按钮都可作为一个具体实现类，那么我以"加粗"按钮为例，就可以得到：//加粗
functiononBoldCommand(){
Interface.registerImplements(this,ICommand);
}
onBoldCommand.prototype.execute=function(){
vareditor=window.frames["HtmlEditor"];
editor.document.execCommand("Bold",false,false);
editor.focus();
};
其中Interface.registerImplements(this,ICommand);说明它继承于ICommand接口，而execute方法作为基于接口方法的具体实现，这里实现了文档加粗功能；
3.现在要创建"主菜单"和"子菜单"，Menu类和MenuItem类，注意这里"子菜单"也可能是Menu类，比如"格式"主菜单下的"位置"下面还包括下级菜单"居左对齐"，"居中对齐"，"居右对齐"等等，所以作为"叶子"结点的菜单就以MenuItem类来实现：
Menu类的实现如下：functionMenu(text,title,href){
this.menuComponents=newArray();
this.text=text;
this.title=title;
this.href=href;
Interface.registerImplements(this,MenuComponent);
}
Menu.prototype={
getElement:function(){
if(this.menuComponents.length==0)
{
thrownewError(this.text+"菜单下没有子菜单");
}
varliElement=document.createElement("li");
liElement.classname="Menu-WithChildren";
liElement.title=this.title;
varanchor=document.createElement("a");
anchor.classname="Menu-Link";
anchor.href=this.href;
liElement.appendChild(anchor);
anchor.innerHTML=this.text;
varulElement=document.createElement("ul");
liElement.appendChild(ulElement);
for(vari=0,len=this.menuComponents.length;i
！
最后祝：大家在新的一年里，工作顺利，事业进步，牛年牛运！Fighting！！！
参考文献：《HeadFirstDesignPattern》
《ProfessionalJavascriptDesignPatterns》
本系列文章转载时请注明出处，谢谢合作！