之前两篇:
命令模式实现之一 (类的写法) https://notes/17398/801b14c13d0e34b854cebf3e2c59b8af.html ;
命令模式实现之二 (支持 redo 版) https://notes/17398/9d6badca66c1285e81b1e9d3c5d038fa.html ;
html 代码
- <body></body>
- <script>
- // 移动对象类
- var Cursor = {
- init: function(width, height, parent) {
- this.width = width;
- this.height = height;
- this.position = {
- x: width / 2,
- y: height / 2
- }
- this.canvas = document.createElement('canvas');
- this.canvas.width = this.width;
- this.canvas.height = this.height;
- parent.appendChild(this.canvas);
- this.ctx = this.canvas.getContext('2d');
- this.ctx.fillStyle = '#ff0000';
- this.move(0, 0);
- },
- move: function(x, y) {
- this.position.x += x;
- this.position.y += y;
this.ctx.clearRect(0, 0, this.width, this.height);
this.ctx.fillRect(this.position.x, this.position.y, 40, 40);
- }
- };
- // 上下左右移动函数
- var getCommands = function(cursor) {
- var moveUp = function() {
- cursor.move(0, -40);
- };
- var moveDown = function() {
- cursor.move(0, 40);
- };
- var moveLeft = function() {
- cursor.move(-40, 0);
- };
- var moveRight = function() {
- cursor.move(40, 0);
- };
- moveUp.undo = moveDown;// 比较屌的地方, 以函数做命名空间!!
- moveDown.undo = moveUp;
- moveLeft.undo = moveRight;
- moveRight.undo = moveLeft;
- return {
- up: moveUp,
- down: moveDown,
- left: moveLeft,
- right: moveRight
- };
- };
- // Comand 管理者
- var getCommandManager = function() {
- var undoStack = [];
- var redoStack = [];
- return {
- executeCommand: function(command) {
- redoStack.length = 0;
- undoStack.push(command);
- command();
- },
- undo: function() {
- if (undoStack.length === 0) return;
- var lastCommand = undoStack.pop();
- lastCommand.undo();
- // 放入 redo 栈中
- redoStack.push(lastCommand);
- },
- redo: function() {
- if (redoStack.length === 0) return;
- var lastCommand = redoStack.pop();
- lastCommand();
- undoStack.push(lastCommand);
- }
- };
- };
- // 按钮 (上下左右)
- var createButton = function(label, commandManager, command, parent) {
- var element = document.createElement('button');
- element.innerHTML = label;
- parent.appendChild(element);
- element.onclick = function() {
- commandManager.executeCommand(command);
- }
- };
- var createUndoButton = function(label, parent, commandManager) {
- var element = document.createElement('button');
- element.innerHTML = label;
- parent.appendChild(element);
- element.onclick = function() {
- commandManager.undo();
- }
- };
- // 这三个函数有重复代码, 可以合
- var createReduButton = function(label, parent, commandManager) {
- var element = document.createElement('button');
- element.innerHTML = label;
- parent.appendChild(element);
- element.onclick = function() {
- commandManager.redo();
- }
- };
- /******** 客户端 ********/
- var body = document.querySelector('body');
- var cursor = Object.create(Cursor);
- cursor.init(400, 400, body);
- var commands = getCommands(cursor);
- var commandManager = getCommandManager();
- ['up', 'down', 'left', 'right'].forEach(function(direction) {
- createButton(direction, commandManager, commands[direction], body);
- });
- createUndoButton('undo', body, commandManager);
- createReduButton('redo', body, commandManager);
- </script>
来源: http://www.qdfuns.com/article/17398/b618c5c78fe593c53d1ace2bd8ae74bb.html