js设计模式-命令模式
命令模式是一种组织型模式,主要用在把调用对象(用户界面、API和代理等)与实现操作的对象隔离开。也就是说 ,凡是两个对象间的互动方式需要更高的模块化程度时都可以用到这种模式。
命令模式的好处:1、提高程序的模块化程度和灵活性。(运用得当);2、实现取消和状态恢复等复杂的有用特性非常容易。
例子:菜单组合对象
/**
* 菜单组合对象
*/ /*command,Composite and MenuObject interfaces*/
var Command = new Interface("Compand",["execute"]);
var Composite = new Interface("Composite",["add","remove","getChild","getElement"]);
var MenuObject = new Interface("MenuObject",["show","hide"]); /*MenuBar class, a composite*/
var MenuBar = function(){
this.menus = {};
this.element = document.createElement("ul");
this.element.className = "menu-bar";
this.element.style.display = "none";
}
MenuBar.prototype = {
add:function(menuObject){
Interface.ensureImplements(menuObject,Composite,MenuObject);
this.menus[menuObject.name] = menuObject;
this.element.appendChild(this.menus[menuObject.name].getElement());
},
remove:function(name){
delete this.menus[name];
},
getChild:function(name){
return this.menus[name];
},
getElement:function(){
return this.element;
},
show:function(){
this.element.style.display = "block";
for(name in this.menus){
this.menus[name].show();
}
},
hide:function(){
this.element.style.display = "none";
}
} /*Menu class a composite*/
//备注:这里为了获取Menu对象的父对象,所以多传了一个parent,同时在实现的接口下,又多加了两个方法:showContainer和hideContainer
var Menu = function(name,parent){
this.name = name;
this.items = {};
this.parent = parent;
this.element = document.createElement("li");
this.element.className = "menu";
this.element.innerHTML = this.name;
this.element.style.display = "none";
this.container = document.createElement("ul");
this.element.appendChild(this.container); var that = this;
this.element.addEventListener("click",function(e){
e.preventDefault();
e.stopPropagation();
//这里在显示当前菜单选项的时候,把其他的选项全部隐藏掉
var menus = that.parent.menus;
if(menus){
for(var name in menus){
menus[name].hideContainer();
}
}
that.showContainer();
},false);
document.body.addEventListener("click",function(e){
e.preventDefault();
e.stopPropagation();
that.hideContainer();
},false);
}; Menu.prototype = {
add:function(menuItemObject){
Interface.ensureImplements(menuItemObject,Composite,MenuObject);
this.items[menuItemObject.name] = menuItemObject;
this.container.appendChild(this.items[menuItemObject.name].getElement());
},
remove:function(name){
delete this.items[name];
},
getChild:function(name){
return this.items[name];
},
getElement:function(){
return this.element;
},
show:function(){
this.element.style.display = "block";
for(name in this.items){
this.items[name].show();
}
},
hideContainer:function(){
this.container.style.display = "none";
},
showContainer:function(){
this.container.style.display = "block";
},
hide:function(){
this.element.style.display = "none";
}
} /*MenuItem class, a leaf*/
var MenuItem = function(name,command){
Interface.ensureImplements(command,Command);
this.name = name;
this.element = document.createElement("li");
this.element.className = "menu-item";
this.element.style.display = "none";
this.anchor = document.createElement("a");
this.anchor.href = "#";
this.anchor.innerHTML = this.name;
this.element.appendChild(this.anchor); this.anchor.addEventListener("click",function(e){
e.preventDefault();
command.execute();
});
}; MenuItem.prototype = {
add:function(){},
remove:function(){},
getChild:function(){},
getElement:function(){return this.element;},
show:function(){
this.element.style.display = "block";
},
hide:function(){
this.element.style.display = "none";
}
}
界面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单对象</title>
<style type="text/css">
#container{margin:0 auto;padding:0; border:1px solid #ccc; width:500px; height:50px; font-family: "微软雅黑"; font-size: 14px; text-align: center;}
.menu-bar{list-style: none;padding:0;width:100%;height:50px; margin-left:50px;}
.menu-bar .menu{float:left; width:80px; text-align: center; cursor: pointer;height:30px; line-height:30px;}
.menu-bar .menu:hover{background:#0000DD; color:#fff;}
.menu-bar .menu ul{list-style:none;width:80px; margin:0;padding:0; background:#ddd; display: none; margin-top:5px; border: 1px solid black;}
/*.menu-bar .menu:nth-of-type(1) ul{display: block;}*/
.menu-bar .menu .menu-item{width:70px;height:30px; line-height: 30px; border-bottom: 1px dashed #ccc;}
.menu-bar .menu .menu-item a{text-decoration: none;} #result{
margin:150px auto; height:50px; line-height: 50px; border: 2px solid red; width:300px; text-align: center; font-family: "微软雅黑"; font-size: 16px;
}
</style>
</head>
<body>
<div id="container"> </div> <div id="result"></div>
</body>
</html>
<script type="text/javascript" src="Interface.js"></script>
<script type="text/javascript" src="Menu.js"></script>
<script type="text/javascript">
var oResult = document.getElementById("result");
//定义每个菜单的action
function FileActions(){}
FileActions.prototype = {
open:function(){
oResult.innerHTML = "open command is executed";
},
close:function(){
oResult.innerHTML = "close command is executed";
},
save:function(){
oResult.innerHTML = "save command is executed";
},
saveAs:function(){
oResult.innerHTML = "saveAs command is executed";
}
} function EditActions(){}
EditActions.prototype = {
cut:function(){
oResult.innerHTML = "cut command is executed";
},
copy:function(){
oResult.innerHTML = "copy command is executed";
},
paste:function(){
oResult.innerHTML = "paste command is executed";
},
delete:function(){
oResult.innerHTML = "delete command is executed";
}
} function InsertActions(){}
InsertActions.prototype.insert = function(){
oResult.innerHTML = "insert command is executed";
} function HelpActions(){}
HelpActions.prototype.help = function(){
oResult.innerHTML = "help command is executed";
} /*MenuCommand class. a command object*/
var MenuCommand = function(action){
this.action = action;
}
MenuCommand.prototype.execute = function(){
this.action();
} var fileActions = new FileActions();
var editActions = new EditActions();
var insertActions = new InsertActions();
var helpActions = new HelpActions(); var appMenuBar = new MenuBar(); /*fileMenu*/
var fileMenu = new Menu("File",appMenuBar); fileMenu.add(new MenuItem("Open",new MenuCommand(fileActions.open)));
fileMenu.add(new MenuItem("Close",new MenuCommand(fileActions.close)));
fileMenu.add(new MenuItem("Save",new MenuCommand(fileActions.save)));
fileMenu.add(new MenuItem("Save As",new MenuCommand(fileActions.saveAs))); appMenuBar.add(fileMenu); /*editMenu*/
var editMenu = new Menu("Edit",appMenuBar); editMenu.add(new MenuItem("Cut",new MenuCommand(editActions.cut)));
editMenu.add(new MenuItem("Copy",new MenuCommand(editActions.copy)));
editMenu.add(new MenuItem("Paste",new MenuCommand(editActions.paste)));
editMenu.add(new MenuItem("Delete",new MenuCommand(editActions.delete))); appMenuBar.add(editMenu); /*the insert menu*/ var insertMenu = new Menu("Insert",appMenuBar);
insertMenu.add(new MenuItem("The Block",new MenuCommand(insertActions.insert)));
appMenuBar.add(insertMenu); /*The help menu*/
var helpMenu = new Menu("Help",appMenuBar);
helpMenu.add(new MenuItem("TheHelp",new MenuCommand(helpActions.help))); appMenuBar.add(helpMenu); /*Build the menu bar*/
document.getElementById("container").appendChild(appMenuBar.getElement());
appMenuBar.show(); </script>
js设计模式-命令模式的更多相关文章
- 浅谈js设计模式 — 命令模式
命令模式最常见的应用场景是:有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是什么.此时希望用一种松耦合的方式来设计程序,使得请求发送者和请求接收者能够消除彼此之间的耦 ...
- linkin大话设计模式--命令模式
linkin大话设计模式--命令模式 首先考虑一种应用情况,某个方法需要完成某一个功能,这个功能的大部分功能已经确定了,但是有可能少量的步骤没法确定,必须等到执行这个方法才可以确定. 也就是说,我们写 ...
- 【设计模式】Java设计模式 - 命令模式
Java设计模式 - 命令模式 生命不息,写作不止 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 一个有梦有戏的人 @怒放吧德德 分享学习心得,欢迎指正,大家一起学习成长! 目录 Ja ...
- [Head First设计模式]餐馆中的设计模式——命令模式
系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式— ...
- JAVA 设计模式 命令模式
用途 命令模式 (Command) 将一个请求封装为一个对象,从而使你可以用不同的请求对客户进行参数化:对请求排队或请求日志,以及支持可撤销的操作. 命令模式是一种行为型模式. 结构
- 深入浅出设计模式——命令模式(Command Pattern)
模式动机 在软件设计中,我们经常需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是哪个,我们只需在程序运行时指定具体的请求接收者即可,此时,可以使用命令模式来进行设计,使得请 ...
- Java设计模式-命令模式(Command)
命令模式很好理解,举个例子,司令员下令让士兵去干件事情,从整个事情的角度来考虑,司令员的作用是,发出口令,口令经过传递,传到了士兵耳朵里,士兵去执行.这个过程好在,三者相互解耦,任何一方都不用去依赖其 ...
- 设计模式--命令模式(Command)
基本概念: Command模式也叫命令模式 ,是行为设计模式的一种.Command模式通过被称为Command的类封装了对目标对象的调用行为以及调用参数,命令模式将方法调用给封装起来了. 命令模式的 ...
- javascript设计模式——命令模式
前面的话 假设有一个快餐店,而我是该餐厅的点餐服务员,那么我一天的工作应该是这样的:当某位客人点餐或者打来订餐电话后,我会把他的需求都写在清单上,然后交给厨房,客人不用关心是哪些厨师帮他炒菜.餐厅还可 ...
随机推荐
- php基础知识 书写格式
PHP,是英文超文本预处理语言Hypertext Preprocessor的递归缩写.PHP 是一种 HTML 内嵌式的语言,是一种在服务器端执行的嵌入HTML文档的脚本语言. php嵌入页面的标记有 ...
- 打包Python程序
我选择的是pyinstaller,(py2exe到目前为止只支持到Python3.4). 安装.如果能联网最后用pip.在cmd中输入pip install Pyinstaller.如果不能联网,可以 ...
- .NET 在序列化时使用全小写的属性名
基于某些奇怪的需求,需要将一些对象序列化后输出,而且属性名又必须为小写形式. 解决过程 说到在 .NET 平台上序列化操作,那么第一个想到的应该就是 Json.NET 家的 Newtonsoft.Js ...
- 编程领域中的 "transparent" 和 "opaque"
引言 在学习计算机的过程中,经常会接触到 “透明” 和 “非透明” 的概念. 刚开始理解 “透明” 这个概念的时候,认为 “透明” 就是程序员可以看见其中的构造,但是老师却说透明是程序员意识不到其中的 ...
- Jquery常见操作多选框/复选框/checkbox
1.判断checkbox是否为选中状态: if($("#searchNews").attr("checked")=="checked") { ...
- 想要远程服务器长时间挂机不断开ssh连接的技巧
使用top命令挂着就好了,top命令执行的“查看系统进程和资源占用”的任务会一直输出动态的数据,一直有数据传输就不会因为长时间挂机而断开ssh链接了,尤其针对于海外服务器,因为高延迟经常出现挂机久了自 ...
- JVM 性能调优监控工具 jps、jstack、jmap、jhat、jstat、hprof 使用详解
转自: https://my.oschina.net/feichexia/blog/196575 摘要: JDK本身提供了很多方便的JVM性能调优监控工具,除了集成式的VisualVM和jConso ...
- php如何判断SQL语句的查询结果是否为空?
PHP与mysql这对黄金搭档配合的相当默契,但偶尔也会遇到一些小需求不知道该怎么做,例如今天要谈到的:如何判断sql语句查询的结果集是否为空! 我们以查询学生信息为例,来看看究竟如何实现我们的需求. ...
- 使用VirtualBox实现端口转发,以SSH与Django为例
先来认识几个概念 (1)IP地址:又称为互联网协议地址,是计算机的物理地址,相当于计算机的编号,是32位的二进制数,通常被分割成4个8位的二进制数: (2)端口:指设备与外界通讯的接口,一台计算机的端 ...
- Vue.js教程—1.介绍和安装
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定 ...