javascript设计模式_第二部分_命令模式---- 取消操作

１.取消操作 

 

*　每一个操作类都包含有undo这个逆操作方法，注意(undo好像是个保留字);

*　这个UndoDecorator的作用是执行一个命令前先将其压栈;

*　在执行取消操作时，从命令栈中弹出最近的命令并调用其undo方法，进行还原。

 

/* ReversibleCommand interface. */ var ReversibleCommand = new Interface('ReversibleCommand', ['execute', 'undo']); /* Movement commands. */ var MoveUp = function(cursor) { // implements ReversibleCommand this.cursor = cursor; }; MoveUp.prototype = { execute: function() { cursor.move(0, -10); }, undo: function() { cursor.move(0, 10); } }; var MoveDown = function(cursor) { // implements ReversibleCommand this.cursor = cursor; }; MoveDown.prototype = { execute: function() { cursor.move(0, 10); }, undo: function() { cursor.move(0, -10); } }; var MoveLeft = function(cursor) { // implements ReversibleCommand this.cursor = cursor; }; MoveLeft.prototype = { execute: function() { cursor.move(-10, 0); }, undo: function() { cursor.move(10, 0); } }; var MoveRight = function(cursor) { // implements ReversibleCommand this.cursor = cursor; }; MoveRight.prototype = { execute: function() { cursor.move(10, 0); }, undo: function() { cursor.move(-10, 0); } }; /* Cursor class. */ var Cursor = 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 = '#cc0000'; this.move(0, 0); }; Cursor.prototype.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, 3, 3); }; /* UndoDecorator class. */ var UndoDecorator = function(command, undoStack) { // implements ReversibleCommand this.command = command; this.undoStack = undoStack; }; UndoDecorator.prototype = { execute: function() { this.undoStack.push(this.command); this.command.execute(); }, undo: function() { this.command.undo(); } }; /* CommandButton class. */ var CommandButton = function(label, command, parent) { Interface.ensureImplements(command, ReversibleCommand); this.element = document.createElement('button'); this.element.innerHTML = label; parent.appendChild(this.element); addEvent(this.element, 'click', function() { command.execute(); }); }; /* UndoButton class. */ var UndoButton = function(label, parent, undoStack) { this.element = document.createElement('button'); this.element.innerHTML = label; parent.appendChild(this.element); addEvent(this.element, 'click', function() { if(undoStack.length === 0) return; var lastCommand = undoStack.pop(); lastCommand.undo(); }); }; /* Implementation code. */ var body = document.getElementsByTagName('body')[0]; var cursor = new Cursor(400, 400, body); var undoStack = []; var upCommand = new UndoDecorator(new MoveUp(cursor), undoStack); var downCommand = new UndoDecorator(new MoveDown(cursor), undoStack); var leftCommand = new UndoDecorator(new MoveLeft(cursor), undoStack); var rightCommand = new UndoDecorator(new MoveRight(cursor), undoStack); var upButton = new CommandButton('Up', upCommand, body); var downButton = new CommandButton('Down', downCommand, body); var leftButton = new CommandButton('Left', leftCommand, body); var rightButton = new CommandButton('Right', rightCommand, body); var undoButton = new UndoButton('Undo', body, undoStack);

 

 

２.不可逆操作的取消

不可逆操作：从点Ａ画线到点Ｂ的取消操作不是其逆操作：从点Ｂ画线到点Ａ

这种情况下，唯一办法就是清除状态，弹出最后一步操作的命令，然后把栈中的命令重新执行一次。

 

*　最大的改变是executeCommands中把栈里的命令执行一次；

*　undo方法pop最后一条命令；

 

 

/* Movement commands. */ var MoveUp = function(cursor) { // implements Command this.cursor = cursor; }; MoveUp.prototype = { execute: function() { cursor.move(0, -10); } }; /* Cursor class, with an internal command stack. */ var Cursor = function(width, height, parent) { this.width = width; this.height = height; this.commandStack = []; 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.strokeStyle = '#cc0000'; this.move(0, 0); }; Cursor.prototype = { move: function(x, y) { var that = this; this.commandStack.push(function() { that.lineTo(x, y); }); this.executeCommands(); }, lineTo: function(x, y) { this.position.x += x; this.position.y += y; this.ctx.lineTo(this.position.x, this.position.y); }, executeCommands: function() { this.position = { x: this.width / 2, y: this.height / 2 }; this.ctx.clearRect(0, 0, this.width, this.height); // Clear the canvas. this.ctx.beginPath(); this.ctx.moveTo(this.position.x, this.position.y); for(var i = 0, len = this.commandStack.length; i < len; i++) { this.commandStack[i](); } this.ctx.stroke(); }, undo: function() { this.commandStack.pop(); this.executeCommands(); } }; /* UndoButton class. */ var UndoButton = function(label, parent, cursor) { this.element = document.createElement('button'); this.element.innerHTML = label; parent.appendChild(this.element); addEvent(this.element, 'click', function() { cursor.undo(); }); }; /* Implementation code. */ var body = document.getElementsByTagName('body')[0]; var cursor = new Cursor(400, 400, body); var upCommand = new MoveUp(cursor); var downCommand = new MoveDown(cursor); var leftCommand = new MoveLeft(cursor); var rightCommand = new MoveRight(cursor); var upButton = new CommandButton('Up', upCommand, body); var downButton = new CommandButton('Down', downCommand, body); var leftButton = new CommandButton('Left', leftCommand, body); var rightButton = new CommandButton('Right', rightCommand, body); var undoButton = new UndoButton('Undo', body, cursor);