- 浏览: 13984 次
最新评论
Javascript模式- 命令模式(Command)
- 博客分类:
- 技术杂绘
前言 博客园谈设计模式的文章很多,我也受益匪浅,包括TerryLee、吕震宇等等的.NET设计模式系列文章,强烈推荐。对于我,擅长于前台代码的开发,对于设计模式也有一定的了解,于是我想结合Javascript来设计前台方面的"设计模式",以对后台"设计模式"做个补充。开始这个系列我也诚惶诚恐,怕自己写得不好,不过我也想做个尝试,一来希望能给一些人有些帮助吧,二来从写文章中锻炼下自己,三来通过写文章对自己增加自信;如果写得不好,欢迎拍砖,我会虚心向博客园高手牛人们学习请教;如果觉得写得还可以,谢谢大家的支持了:)
今天开始介绍命令模式,并且将利用命令模式设计一个简单的在线编辑器。
概述
在各种各样的行为实现中,行为请求者与行为实现者紧密耦合,当每增加一个行为实现的时候,行为请求者必须增加一个对行为的处理,这样就需要大量改动请求者的操作,显然这样不利于维护和扩展。为了让行为请求者和行为实现者解耦,可以将行为封装为一个命令对象,但需要处理行为时,只要请求者知道命令对象,它本身不需要知道命令对象都做些什么,命令对象负责执行 接收者 的真正实现,这样就达到二者之间松耦合的目的。
定义
命令模式是将请求封装成对象,这可以让你使用不同请求、队列,或者日志请求来参数化其他对象。命令模式也可以支持撤销操作。
类图
实例分析
现在开始利用命令模式来应用到一个在线编辑器的场景中,并且详细分析一下:
这里先给大家看下效果图(兼容多浏览器):
这里我引用了我的第4篇-组合模式的菜单例子进行改进;将命令模式和组合模式相结合的方式来阐述例子。
其中主菜单包括: 文件(子菜单:新建、导出、退出)
编辑(子菜单:剪切、复制、粘贴、删除)
格式(子菜单:字体、字号、加粗、斜体、下划线、位置、编号、字体颜色)
插入(子菜单:插入链接、插入图片),操作(撤销、重做、切换HTML)
自定义格式(子菜单:格式1)
帮助(子菜单:关于作者)
编辑器的这些功能实际上很常用。最后点击"得到HTML值"的按钮,可以得到HTML的内容,这里就可以按照您的需要来存储编辑器内容;文章的最后我将附上源代码。
1. 首先添加一个ICommand.js文件,其中定义一个Command接口: 其中execute作为Command执行的接口方法;
关于接口的定义,可以参考我的第0篇-面向对象基础以及接口和继承类的实现的实现。
2. 添加一个ConcreteCommand.js文件,作为继承ICommand接口的所有具体实现类:
因为子菜单中的每个按钮都可作为一个具体实现类,那么我以"加粗"按钮为例,就可以得到: //加粗
function onBoldCommand() {
Interface.registerImplements(this, ICommand);
}
onBoldCommand.prototype.execute = function() {
var editor = window.frames["HtmlEditor"];
editor.document.execCommand("Bold", false, false);
editor.focus();
};
其中Interface.registerImplements(this, ICommand);说明它继承于ICommand接口,而execute方法作为基于接口方法的具体实现,这里实现了文档加粗功能;
3. 现在要创建"主菜单"和"子菜单",Menu类和MenuItem类,注意这里"子菜单"也可能是Menu类,比如"格式"主菜单下的"位置"下面还包括下级菜单"居左对齐","居中对齐","居右对齐"等等,所以作为"叶子"结点的菜单就以MenuItem类来实现:
Menu类的实现如下: function Menu(text, title, href) {
this.menuComponents = new Array();
this.text = text;
this.title = title;
this.href = href;
Interface.registerImplements(this, MenuComponent);
}
Menu.prototype = {
getElement : function() {
if(this.menuComponents.length == 0)
{
throw new Error(this.text + "菜单下没有子菜单");
}
var liElement = document.createElement("li");
liElement.className = "Menu-WithChildren";
liElement.title = this.title;
var anchor = document.createElement("a");
anchor.className = "Menu-Link";
anchor.href = this.href;
liElement.appendChild(anchor);
anchor.innerHTML = this.text;
var ulElement = document.createElement("ul");
liElement.appendChild(ulElement);
for(var i = 0, len = this.menuComponents.length; i
!
最后祝:大家在新的一年里,工作顺利,事业进步,牛年牛运!Fighting!!!
参考文献:《Head First Design Pattern》
《Professional Javascript Design Patterns》
本系列文章转载时请注明出处,谢谢合作!
发表评论
-
DEMO:字符串反转
2012-07-06 09:52 717这个例子主要是让用户输入的字符串反转之后显示出来,主要是用 ... -
用正则表达式做内容关键字链接
2012-07-06 09:46 684private void rc() { strin ... -
基于ASP.NET的JQueryUI控件开发(1) - JQueryScriptManager
2012-07-06 09:30 389前面基本实现了ASP.NET MVC的 JQueryUI控 ... -
自定义android RadioPreference组件
2012-07-03 13:44 1390今天用到了android的preferences组件,可是 ... -
flex4 设置 圆角
2012-07-02 12:51 858height="100%" left= ... -
flex AS中TabNavigator子项后报超出索引 commitProperties解决
2012-07-02 12:51 542height="200" > ... -
Dom4j java编程
2012-07-02 12:51 833dom4j 是一种解析 XML 文档的开放源代码 XML ... -
Event propagation事件传播
2012-07-02 12:51 788当事件被触发时,F ... -
flex 给DataGrid每行加上tooltip
2012-07-02 12:51 690在初始化时加上tooltip的字体大小 mx.sty ... -
Flex4自定义事件类型Event的相关应用
2012-07-01 10:18 762基于松耦合的概念 自定义事件类型将取到很重要的作用 当您 ... -
flex学习-----事件机制的工作流程
2012-07-01 10:18 8388.2 事件机制的工作流程 8.2.1 关于事件流 ... -
Flex事件机制一
2012-07-01 10:17 769一:事件流机制 由于OOP编程将程序看成一个个对象、 ... -
Flex FTP文件上传
2012-07-01 10:17 660Flex FTP文件上传原理就是利用Flex Socket ... -
使用Flex实现FTP文件上传功能
2012-07-01 10:17 953最近需要使用Flex实现Ftp文件上传功能,Google到 ... -
未来的移动游戏
2012-06-30 16:43 595未来的移动游戏 2011年07月14日 手机游戏是娱乐 ... -
游戏战歌网 仿soso音乐 flex播放器
2012-06-30 16:42 748游戏战歌网 仿soso音乐 flex播放器 2010年08月 ... -
Flash游戏开发技术分析
2012-06-30 16:42 660Flash游戏开发技术分析 2010年12月31日 1、 ... -
FLEX和Actionscript开发FLASH游戏 3-2
2012-06-30 16:42 360FLEX和Actionscript开发FLASH游戏 3-2 ...
相关推荐
ng-command可让您编写仅在执行期间执行一次以及是否满足canExecute命令。 例子 var app = angular . module ( 'commandLab' , [ 'ng-command' ] ) . controller ( 'CommandExampleCtrl' , [ '$command' , '$scope...
主要介绍了深入理解JavaScript系列(34):设计模式之命令模式详解,命令模式(Command)的定义是:用于将一个请求封装成一个对象,从而使你可用不同的请求对客户进行参数化,对请求排队或者记录请求日志,以及执行可撤销...
命令模式(Command)的定义是:用来对方法调用进行参数化处理和传送,经过这样处理过的方法调用可以在任何需要的时候执行。也就是说该模式旨在将函数的调用、请求和操作封装成一个单一的对象,然后对这个对象进行...
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中,可以运行: npm start 在开发模式下运行应用程序。... 此命令将从您的项目中删除单个生成依赖项。 相反,它将所有配置文件和传递依赖项(we
使用命令模式并将序列化命令存储在本地存储中似乎是一个合理的解决方案。安装bower install rolab-command-dispatcher --save用法使用至少一个execute()方法和可选的initialize()方法创建一个命令,该方法采用参数...
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中,可以运行: npm start 在开发模式下运行应用程序。... 此命令将从您的项目中删除单个生成依赖项。 相反,它将所有配置文件和传递依赖项(we
该项目是通过引导的。 可用脚本 在项目目录中,可以运行: npm start 在开发模式下运行应用程序。... 此命令将从您的项目中删除单个生成依赖项。 相反,它将所有配置文件和传递性依赖项(webpack,Babel,ESLin
该项目是通过引导的。可用脚本在项目目录中,可以运行:npm start 在开发模式下运行应用程序。... 此命令将从您的项目中删除单个生成依赖项。 相反,它将所有配置文件和传递依赖项(webpack,Babel,ESLint
Command-E或Control-E或Command-。 :切换预览模式与编辑模式 命令-; 或控制:切换预览模式与评论模式 ArrowUp和ArrowDown :遍历兄弟姐妹之间的选择 ArrowLeft和ArrowRight :遍历父级/子级的选择 c :切换折叠当前...
zMVC 从 puremvc.org 获得灵感,但移除了一些限制并简化了命令模式。 在 zMVC 中,模型和控制器应该尽可能地“愚蠢”,它们应该简单地充当中间人(在模型案例中:对于它的数据,在控制器案例中对于它的视图),并...
##AppStatusCommand 简单的控制台命令,将检查您的应用程序是处于活动状态还是处于维护模式。 它比打开浏览器更快。 ##Installation:分叉这个 repo 并将其用作默认的 Laravel 应用程序,并添加了 AppStatusCommand...
连续模式 9600 8 /否 1个 没有任何 <CR> ANSI / WIN 离开 例子 var MTSICS = require ( 'mt-sics' ) ; var mtsics = new MTSICS ( { uri : 'tcp://192.168.1.1:4001' } ) ; mtsics . get_commands ( function ( ...
介绍命令模式(Command)的定义是:用于将一个请求封装成一个对象,从而使你可用不同的请求对客户进行参数化;对请求排队或者记录请求日志,以及执行可撤销的操作。
Sublime Text 3 的 Git 模式插件,它使用 ShellCommand 插件使自定义和增强变得非常容易。 这个插件使用来提供它的功能,主要由命令、键绑定和语法文件组成。 这使得更改和增强核心功能以及添加个人偏好变得非常...
JSDesignPattern JavaScript设计模式测试代码 已完成内容 Pattern Name ...命令模式 command 组合模式 composite 模板方法模式 template 享元模式 flyweight 装饰者模式 decorator 中介者模式 mediator
/dev/null &特征 ULTIMATE COMMAND PARSER-传递任何将返回相关数据的内容-/ search 在路线上将基本GraphQL查询转换为Cypher-graphql GraphQL UI-/ graphiql最终命令解析器使用案例(/搜索)1.仅以字符串形式传递节点...
JAVA例单模式源码 代码格式化程序 CodeFormatter 是一个支持格式化(美化)源代码的 Sublime Text 2/3 插件。 CodeFormatter 支持以下语言: PHP - 由 JavaScript/JSON - 由 JSBeautifier HTML - 由 CSS,LESS,SASS -...
带有GitHub Jobs API的自定义元素(express和cors) ... 该API是Web组件的基础... 此处的“命令模式”是什么,您可以在这里找到-https: 从根目录运行服务器(localhost:80) node index.js 用法示例: <find></find>