文档章节

JS:命令模式的例子——菜单程序

唐佳
 唐佳
发布于 2016/10/10 11:15
字数 603
阅读 25
收藏 0

命令模式的应用场景:

        有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是什么,此时希望用一种松耦合的方式来设计软件,使得请求发送者和请求接收者能够消除彼此之间的耦合关系。

html代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>js:命令模式</title>
	<script type="text/javascript" src="command.js"></script>
</head>
<style type="text/css">
button{
	margin: 5px;
	border: 0;
	width: 70px;
	height: 35px;
	background: #6B78BF;
	color: white;
	font-size: 14px;
	font-family: "微软雅黑";
	cursor: pointer;
}
#textarea{
	margin: 5px;
	width: 400px;
	height: 200px;
	resize: none;
	color: #666;
	font-size: 14px;
	border: 2px solid #6B78BF;
}
</style>
<body>
<button id="button1">刷新</button>
<button id="button2">新增</button>
<button id="button3">删除</button>
<br/>
<textarea id="textarea">
这是预设的内容
</textarea>

</body>
</html>

js代码:

// 在页面中使用例:setCommand( button1, refreshMenuBarCommand );来发送命令


// setCommand 函数负责往按钮上面安装命令,预留好安装命令的接口
var setCommand = function( button , command ){
	button.onclick = function(){
		command.execute();
	}
}

// 编写点击按钮之后的具体行为:刷新菜单界面、增加子菜单和删除子菜单
var MenuBar = {
	refresh: function(){
		var cur_date = new Date();
		document.getElementById("textarea").value+=cur_date.toLocaleString()+" 刷新菜单目录\r";
	}
}
var SubMenu = {
	add: function(){
		var cur_date = new Date();
		document.getElementById("textarea").value+=cur_date.toLocaleString()+" 新增菜单目录\r";
	},
	del: function(){
		var cur_date = new Date();
		document.getElementById("textarea").value+=cur_date.toLocaleString()+" 删除子菜单\r";
	}
}

//封装行为在命令类中
var RefreshMenuBarCommand = function( receiver ){
	this.receiver = receiver;

}
RefreshMenuBarCommand.prototype.execute = function(){
	this.receiver.refresh();
}
var AddSubMenuCommand = function( receiver ){
	this.receiver = receiver;
}
AddSubMenuCommand.prototype.execute = function(){
	this.receiver.add();
}
var DelSubMenuCommand = function( receiver ){
	this.receiver =receiver
}
DelSubMenuCommand.prototype.execute = function(){
	this.receiver.del();
}

//命令接收者传入到 command 对象
var refreshMenuBarCommand = new RefreshMenuBarCommand( MenuBar );
var addSubMenuCommand = new AddSubMenuCommand( SubMenu );
var delSubMenuCommand = new DelSubMenuCommand( SubMenu );

window.onload = function(){
	//把 command 对象安装到 button 上面
	var button1 = document.getElementById("button1");
	var button2 = document.getElementById("button2");
	var button3 = document.getElementById("button3");
	setCommand( button1, refreshMenuBarCommand );
	setCommand( button2, addSubMenuCommand );
	setCommand( button3, delSubMenuCommand );
}

 

总结:

        从书上抄代码练习的过程中出了很多错误,最严重的莫过于“receiver”这个单词写错了导致很多天都再没看这个练习,出错的过程让我能够重新审视代码的内容,逐行进行理解与调试。虽然仍然不很理解命令模式,但是通过这部分的内容和对mySQL的学习,心里隐隐的留下了关于命令模式的影子。

 

参考:

  1. 《JavaScript设计模式与开发实践》第9章9.2节

© 著作权归作者所有

唐佳
粉丝 4
博文 31
码字总数 18548
作品 0
苏州
前端工程师
私信 提问
《JavaScript设计模式与开发实践》模式篇(6)—— 命令模式

命令模式是最简单和优雅的模式之一,命令模式中的命令(command)指的是一个执行某些特定事情的指令。 应用场景 有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求...

嗨呀豆豆呢
2018/12/15
0
0
《JavaScript设计模式与开发实践》最全知识点汇总大全

系列文章: 《JavaScript设计模式与开发实践》基础篇(1)—— this、call 和 apply 《JavaScript设计模式与开发实践》基础篇(2)—— 闭包和高阶函数 《JavaScript设计模式与开发实践》模式...

嗨呀豆豆呢
01/04
0
0
《JavaScript设计模式与开发实践》原则篇(2)—— 最少知识原则

最少知识原则(LKP)说的是一个软件实体应当尽可能少地与其他实体发生相互作用。这 里的软件实体是一个广义的概念,不仅包括对象,还包括系统、类、模块、函数、变量等。 单一职责原则指导我们...

嗨呀豆豆呢
2018/12/30
0
0
《JavaScript设计模式与开发实践》模式篇(12)—— 装饰者模式

在传统的面向对象语言中,给对象添加功能常常使用继承的方式,但是继承的方式并不灵活, 还会带来许多问题:一方面会导致超类和子类之间存在强耦合性,当超类改变时,子类也会随之 改变;另一方...

嗨呀豆豆呢
2018/12/25
0
0
《JavaScript设计模式与开发实践》模式篇(3)—— 代理模式

代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问 故事背景: 假设当 A 在心情好的时候收到花,小明表白成功的几率有 60%,而当 A 在心情差的时候收到花,小明表白的成功率无...

嗨呀豆豆呢
2018/12/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins的配置

1 修改jenkins的根目录,默认地在C:\Documents and Settings\AAA\.jenkins 。 .jenkins ├─jobs │ └─JavaHelloWorld │ ├─builds │ │ ├─2011-11-03_16-48-17 │ │ ├─2011-11-0......

shzwork
29分钟前
1
0
使用 spring 的 IOC 解决程序耦合

工厂模式解耦 在实际开发中我们可以把三层的对象都使用配置文件配置起来,当启动服务器应用加载的时候,让一个类中的方法通过读取配置文件,把这些对象创建出来并存起来。在接下来的使用的时...

骚年锦时
33分钟前
1
0
group by分组后获得每组中时间最大的那条记录

用途: GROUP BY 语句用于 对一个或多个列对结果集进行分组。 例子: 原表: 现在,我们希望根据USER_ID 字段进行分组,那么,可使用 GROUP BY 语句。 我们使用下列 SQL 语句: SELECT ID,US...

豆花饭烧土豆
今天
3
0
android6.0源码分析之Camera API2.0下的Preview(预览)流程分析

本文将基于android6.0的源码,对Camera API2.0下Camera的preview的流程进行分析。在文章android6.0源码分析之Camera API2.0下的初始化流程分析中,已经对Camera2内置应用的Open即初始化流程进...

天王盖地虎626
今天
4
0
java 序列化和反序列化

1. 概述 序列恢复为Java对象的过程。 对象的序列化主要有两 首先我们介绍下序列化和反序列化的概念: 序列化:把Java对象转换为字节序列的过程。 反序列化:把字节序列恢复为Java对象的过程。...

edison_kwok
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部