Janking/command.html

## command.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <button id="replay">播放录像</button>
  <script type="text/javascript">
/*============================================================
	例子一
=============================================================*/
  /*
	命令模式：
	顾客：填写订单，交给服务员
	服务员：接收订单，并通知厨子准备做菜
	厨子：根据订单开始做菜
  */

  //厨子角色，具有制作多种菜肴技能
  var Ryu = {
    one: function() {
      console.log('鱼香肉丝');
    },
    two: function() {
      console.log('番茄炒西红柿');
    },
    three: function() {
      console.log('土豆炒马铃薯');
    },
    four: function() {
      console.log('青椒炒肉');
    }
  };

  //服务员摁下铃铛，通知厨子干活
  var makeCommand = function(receiver, state) {
    return function() {
      receiver[state]();
    };
  };

  var commands = {
    "119": "one", //W
    "115": "two", //S
    "97": "three", //A
    "100": "four" //D
  };

  var commandStack = [] //订单列表

  //顾客：根据摁某个键来选择菜肴
  document.addEventListener('keypress', function(event) {
  	//不断keypress，发送命令
    var keyCode = event.keyCode;
    //服务员接收订单，并通知厨子
    var command = makeCommand(Ryu, commands[keyCode]);
    //如果有这道菜，那就开始做
    if (command) {
      command();
      commandStack.push(command);
    }
  }, false);

  //如果长时间没上菜，催一下！
  document.getElementById('replay').addEventListener('click', function(event) {
    var command;
    while (command = commandStack.shift()) {
      command();
    }
  }, false);

/*============================================================
	例子二：宏命令
=============================================================*/

  //定义一系列的命令，每个命令的执行方法名字都必须一致
  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 macroCommand = MacroCommand();
  macroCommand.add(closeDoorCommand);
  macroCommand.add(openPcCommand);
  macroCommand.add(openQQCommand);


  macroCommand.execute();


/*============================================================
	例子三
=============================================================*/

  //命令管理器
  var CommandManager = (function() {
    function CommandManager() {}
      //已执行队列
    CommandManager.executed = [];
    //未执行队列
    CommandManager.unexecuted = [];

    //执行
    CommandManager.execute = function execute(cmd) {
      cmd.execute();
      CommandManager.executed.push(cmd);
    };

    //撤销
    CommandManager.undo = function undo() {
      var cmd1 = CommandManager.executed.pop();
      if (cmd1 !== undefined) {
        if (cmd1.unexecute !== undefined) {
          cmd1.unexecute();
        }
        CommandManager.unexecuted.push(cmd1);
      }
    };

    //重复
    CommandManager.redo = function redo() {
      var cmd2 = CommandManager.unexecuted.pop();

      if (cmd2 === undefined) {
        cmd2 = CommandManager.executed.pop();
        CommandManager.executed.push(cmd2);
        CommandManager.executed.push(cmd2);
      }

      if (cmd2 !== undefined) {
        cmd2.execute();
        CommandManager.executed.push(cmd2);
      }
    };

    return CommandManager;


  })();

  //调用

  CommandManager.execute({
    execute: function() {
      console.log('我执行了');
    },
    unexecute: function() {
     	console.log('我要撤销上一次');
    }
  });

  //call unexecute of prev. command
  CommandManager.undo();
  //call execute of prev. command
  CommandManager.redo();
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>

	<body>
	<button id="replay">播放录像</button>
	<script type="text/javascript">
	/*============================================================
	例子一
	=============================================================*/
	/*
	命令模式：
	顾客：填写订单，交给服务员
	服务员：接收订单，并通知厨子准备做菜
	厨子：根据订单开始做菜
	*/

	//厨子角色，具有制作多种菜肴技能
	var Ryu = {
	one: function() {
	console.log('鱼香肉丝');
	},
	two: function() {
	console.log('番茄炒西红柿');
	},
	three: function() {
	console.log('土豆炒马铃薯');
	},
	four: function() {
	console.log('青椒炒肉');
	}
	};

	//服务员摁下铃铛，通知厨子干活
	var makeCommand = function(receiver, state) {
	return function() {
	receiver[state]();
	};
	};

	var commands = {
	"119": "one", //W
	"115": "two", //S
	"97": "three", //A
	"100": "four" //D
	};

	var commandStack = [] //订单列表

	//顾客：根据摁某个键来选择菜肴
	document.addEventListener('keypress', function(event) {
	//不断keypress，发送命令
	var keyCode = event.keyCode;
	//服务员接收订单，并通知厨子
	var command = makeCommand(Ryu, commands[keyCode]);
	//如果有这道菜，那就开始做
	if (command) {
	command();
	commandStack.push(command);
	}
	}, false);

	//如果长时间没上菜，催一下！
	document.getElementById('replay').addEventListener('click', function(event) {
	var command;
	while (command = commandStack.shift()) {
	command();
	}
	}, false);

	/*============================================================
	例子二：宏命令
	=============================================================*/

	//定义一系列的命令，每个命令的执行方法名字都必须一致
	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 macroCommand = MacroCommand();
	macroCommand.add(closeDoorCommand);
	macroCommand.add(openPcCommand);
	macroCommand.add(openQQCommand);


	macroCommand.execute();


	/*============================================================
	例子三
	=============================================================*/

	//命令管理器
	var CommandManager = (function() {
	function CommandManager() {}
	//已执行队列
	CommandManager.executed = [];
	//未执行队列
	CommandManager.unexecuted = [];

	//执行
	CommandManager.execute = function execute(cmd) {
	cmd.execute();
	CommandManager.executed.push(cmd);
	};

	//撤销
	CommandManager.undo = function undo() {
	var cmd1 = CommandManager.executed.pop();
	if (cmd1 !== undefined) {
	if (cmd1.unexecute !== undefined) {
	cmd1.unexecute();
	}
	CommandManager.unexecuted.push(cmd1);
	}
	};

	//重复
	CommandManager.redo = function redo() {
	var cmd2 = CommandManager.unexecuted.pop();

	if (cmd2 === undefined) {
	cmd2 = CommandManager.executed.pop();
	CommandManager.executed.push(cmd2);
	CommandManager.executed.push(cmd2);
	}

	if (cmd2 !== undefined) {
	cmd2.execute();
	CommandManager.executed.push(cmd2);
	}
	};

	return CommandManager;


	})();

	//调用

	CommandManager.execute({
	execute: function() {
	console.log('我执行了');
	},
	unexecute: function() {
	console.log('我要撤销上一次');
	}
	});

	//call unexecute of prev. command
	CommandManager.undo();
	//call execute of prev. command
	CommandManager.redo();
	</script>
	</body>

	</html>