您的位置：首页 > 其它

设计模式之命令模式

2016-04-07 09:52 411 查看

命令模式主要是处理解决命令和执行的解耦，如果不显性的显性的独立一个命令安装对象，将和策略模式无法区分

目录：

1.传统命令模式

2.javascript中的命令模式

3.撤销和重做

4.宏命令

传统命令模式：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="button1">点击按钮1</button>
<button id="button2">点击按钮1</button>
<button id="button3">点击按钮1</button>
<script>
function $(id){
return document.getElementById(id);
}
var btn1=$("button1");
var btn2=$("button2");
var btn3=$("button3");
//设置命令
var setCommand=function(button,command){
button.onclick=function(){
command.execute();
}
};
//设置命令
var MenuBar={
refresh:function(){
console.log("刷新菜单目录")
}
};
var subMen={
add:function(){
console.log("增加子菜单")
},
del:function(){
console.log("删除子菜单")
}
};
//在让button有用前，我们先要把这些行为都分钟到命令类中
var RefreshMenuBarCommad=function(receiver){
this.receiver=receiver;
};
RefreshMenuBarCommad.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(){
console.log("删除子菜单")
};
//最后吧命令接受者传入草command对象中，并且把command对象安装到button上面
var refreshMenuBarCommand=new RefreshMenuBarCommad(MenuBar);
var addSubMenuCommand=new AddsubMenuCommand(subMen);
var delSubMenuCommand=new DelSubMenuCommand(subMen);

setCommand(btn1,refreshMenuBarCommand);
setCommand(btn2,addSubMenuCommand);
setCommand(btn3,delSubMenuCommand)
</script>
</body>
</html>

javascript的命令模式：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="button1">点击按钮1</button>
<button id="button2">点击按钮1</button>
<button id="button3">点击按钮1</button>
<script>
function $(id){
return document.getElementById(id);
}
var btn1=$("button1");
var btn2=$("button2");
var btn3=$("button3");
//设置命令
var setCommand=function(button,command){
button.onclick=function(){
command.execute();
}
};
//设置命令
var MenuBar={
refresh:function(){
console.log("刷新菜单目录")
}
};
//在让button有用前，我们先要把这些行为都分钟到命令类中,将来可能需要提供撤销功能所以吧执行函数改为execute
var RefreshMenuBarCommad=function(receiver){
return{
execute:function(){
receiver.refresh();
}
}
};

var refreshMenuBarCommand=RefreshMenuBarCommad(MenuBar);
setCommand(btn1,refreshMenuBarCommand);

</script>
</body>
</html>

撤销命令和重做：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="replay">播放录像</button>
<script>
var Ryu={
attach:function(){
console.log("攻击");
},
defense:function(){
console.log("防御")
},
jump:function(){
console.log("跳动")

},
crouch:function(){
console.log("蹲下")
}
};
//创建命令
var makeCommand=function(receiver,state){
return function(){
receiver[state]();
}
};
var commands={
"119":"jump",//w
"115":'crouch',//s
"97":"defense",//a
"100":"attach"//d
};
var commandStachk=[];//保存命令的堆栈
document.onkeypress=function(ev){
var keyCode=ev.keyCode;
var command=makeCommand(Ryu,commands[keyCode]);
if(command){
command();//执行命令
commandStachk.push(command);//将刚刚执行过的命令保存到堆 栈中
}
};
document.getElementById("replay").onclick=function(){
var command;
while(command=commandStachk.shift()){
command();
}
}
</script>
</body>
</html>

宏命令[将无法看出是命令模式]：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var closeDoorCommand={
execute:function(){
console.log("关门")
}
};
var openPcCommand={
execute:function(){
console.log("开电脑")
}
};
var openQQCommand={
execute:function(){
console.log("登录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 macroCommands=MacroCommand();//创建命令对象
//添加命令
macroCommands.add(closeDoorCommand);
macroCommands.add(openPcCommand);
macroCommands.add(openQQCommand);
//执行命令
macroCommands.execute();
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航