JavaScript设计模式之-----命令模式

最新推荐文章于 2023-08-06 16:55:05 发布

执着更专业

最新推荐文章于 2023-08-06 16:55:05 发布

阅读量353

点赞数

分类专栏： JavaScript面向对象专栏文章标签：设计模式

本文链接：https://blog.csdn.net/pangchengyong0724/article/details/78096778

版权

JavaScript面向对象专栏专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>命令模式半丁按钮事件</title>
</head>
<body>
	<button type="button" id="bt1">点击按钮1</button>
	<button type="button" id="bt2">点击按钮2</button>
	<button type="button" id="bt3">点击按钮3</button>
	<button type="button" id="bt4">点击按钮4</button>
	<button type="button" id="replay">上套餐</button>
</body>
</html>
<script type="text/javascript">
/*
命令模式其实就是饭店买菜
顾客不需要知道菜是具体怎么做成的 顾客只是负责下单就行
 */
//  采用传统面向对象编程  【傻瓜命令】
var bt1 = document.getElementById('bt1');
var bt2 = document.getElementById('bt2');
var bt3 = document.getElementById('bt3');
var bt4 = document.getElementById('bt4');
var replay = document.getElementById('replay');

// 定义setCommand 函数 负责往按钮上安装命令
/*var setCommand = function(btn,command){
	btn.onclick = function(){
		command.execute();
	}
}*/

// 编写具体的行为
var MenuBar = {
	refresh:function(){
		alert('刷新菜单目录')
	}
}

var SubMenu = {
	add:function(){
		alert('添加菜单')
	},
	del:function(){
		alert('删除菜单')
	}
}

// 把这些具体的行为封装在命令中
// 刷新菜单
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);

setCommand(bt1,refreshMenuBarCommand);
setCommand(bt2,AddSubMenuCommand);
setCommand(bt3,DelSubMenuCommand);*/



/*
js中的命令模式   【傻瓜命令】
 */
var setCommand = function(button,command){
	button.onclick = function(){
		command.execute();
	}
}
// 用闭包实现
var RefreshMenuBarCommand = function(receiver){
	return {
		execute:function(){
			receiver.refresh();
		}
	}
}
var refreshMenuBarCommand = RefreshMenuBarCommand(MenuBar);
setCommand(bt1,refreshMenuBarCommand);



/*
用命令模式写一个小例子  按不同的键 实现不同的操作
 */
// 具体行为   饭店里具体的菜
var Ryu={
	attack:function(){
		alert('攻击')
	},
	defense:function(){
		alert('防御')
	},
	jump:function(){
		alert('跳跃')
	},
	crouch:function(){
		alert('蹲下')
	}
};
// 创建命令  服务员给厨师需要做的菜单
var makeCommand = function(receiver,state){
	return function(){
		receiver[ state ]();
	}
}
// 顾客点菜的菜单
var commands = {
	"87":'jump',//w
	"83":'crouch', //s
	"65":'defense',//a
	"68":'attack'//d
}
// 保存命令的堆栈  相当于饭店的套餐饭
var commandStack=[];

// 顾客点菜
document.οnkeyup=function(ev){
	var keyCode = ev.keyCode,
	command=makeCommand(Ryu,commands[keyCode]);

	if(command){
		command();// 执行命令  服务员上菜
		commandStack.push(command);
	}
};
// 我要套餐
replay.onclick = function(){
	var command;
	while(command=commandStack.shift()){
		command();
	}
};


/*
定制一个宏命令 让每一个命令排队执行    [智能命令]
就像上面的菜单一样 厨师不可能一次做完所有菜所以要排队来做一个一个上
 */
// 首先我们要一次定义每个command
var closeDoorCommand = {
	execute:function(){
		alert('关门')
	}
}
var openPcCommand = {
	execute:function(){
		alert('开电脑')
	}
}
var openQQCommand = {
	execute:function(){
		alert('登录qq')
	}
}

// 接下来定义宏命令
var MacroCommand = function(){
	return {
		commandsList:[],
		add:function(command){
			this.commandsList.push(command);
		},
		execute:function(){
			for(var i=0,command;command=this.commandsList[i++];){
				command.execute();
			}
		}
	}
}
var macroCommand=MacroCommand();
macroCommand.add(closeDoorCommand);
macroCommand.add(openPcCommand);
macroCommand.add(openQQCommand);
macroCommand.execute();
</script>

执着更专业

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript设计模式之-----命令模式

命令模式半丁按钮事件点击按钮1 点击按钮2 点击按钮3 点击按钮4 上套餐/*命令模式其实就是饭店买菜顾客不需要知道菜是具体怎么做成的顾客只是负责下单就行 */// 采用传统面向对象编程【傻瓜命令】var bt1 = document.getElementById('bt1');var bt2 = document.getElementById('bt2
复制链接

扫一扫