JS命令模式例子之菜单程序
命令模式的应用场景：
有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么，此时希望用一种松耦合的方式来设计软件，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。
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的学习，心里隐隐的留下了关于命令模式的影子。
参考：
《JavaScript设计模式与开发实践》第9章9.2节
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js 函数调用模式小结
方法调用模式 当一个函数被保存为对象的一个属性时,我们称之它为该对象的一个方法,那么this被绑定到该对象上. 复制代码 代码如下: var myObject={ name : "myObject" , value : 0 , increment : function(num){ this.value += typeof(num) === 'number' ? num : 0; } , toString : function(){ return '[Object:'+this.name
-
javascript手风琴下拉菜单实现代码
手风琴下拉菜单实现的效果更灵活,不同与传统的下拉菜单,本文就为大家分享一段javascript手风琴下拉菜单实现代码,先看一看效果图: 具体的javascript手风琴下拉菜单代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手风琴下拉菜单效果</title> <script src="js/jquery-1.11.1.j
-
javascript下拉列表中显示树形菜单的实现方法
很简单的一个使用:点击菜单,能够显示下面的或者不显示. 1.主要目的:展现的是的一个菜单项,然后点击一下,隐藏,点一下,弹出下面的内容 用到的是 overflow:hidden 和 overflow="visible"这两个属性 在点击的function中,设置属性应该 node.style.overflow="visible";当然设置tr的高度也是很重要的,要恰好让其他的选项隐蔽 2.采用同样的技术,多加几个,但是就是传参数比较麻烦,采用this传参很常
-
纯javascript响应式树形菜单效果
简要教程 aimaraJS是一款非常实用的纯javascript响应式多级目录树结构插件.该目录树可以动态添加和删除树节点,可以制作多级树结构,每个节点上可以都带有右键上下文菜单,并且每个节点上都可以配置不同的图标.它的特点有: 可以创建一个基本的树结构并渲染它. 可以实时添加和删除树节点. 可以显示不同的树节点图标. 在树节点打开和关闭的时候可以自定义事件. 每个树节点上都可以制作右键上下文菜单. 使用方法 使用该幻灯片插件需要在页面中引入Aimara.css和Aimara.js文件. <
-
javascript省市区三级联动下拉框菜单实例演示
本文实例讲述了javascript实现省市区三级联动下拉框菜单代码,像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"
-
js弹出模式对话框,并接收回传值的方法
弹出对话框的页面A: 复制代码 代码如下: <script type="text/javascript"> function openDialog(){ paramers="dialogWidth:500px; dialogHeight:300px; status:no"; workerId = window.showModalDialog("userList.aspx","",p
-
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
什么是面向对象?面向对象是一种思想!(废话). 面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下来将为大家讲解在JS中面向对象的实现. 工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象.其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可. function createBlo
-
javascript伸缩菜单栏实现代码分享
本文实现了点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来.具体代码如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0; pad
-
javascript实现省市区三级联动下拉框菜单
本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/
-
javascript下拉列表菜单的实现方法
之前写过这个<javascript下拉列表中显示树形菜单的实现方法>菜单的体现,但是在写了之后就发现了,不太适合,高度要精准控制,并且还不是很好看.现在采用table来封装,我们知道table的每一行写满了之后,下一行会自动加,这个比之前我们自己制定高度好很多. 1.点击之后都可以并存的情况(只需函数写法不一样就可) dispaly也是自己设置的,通过父节点来操作子节点,显示与否: /* function open1(node){ //通过父节点来操作兄弟节点 当点击之后出现之后,直接就能打开