早上看了水晶龍的一個(gè)undo的例子，其中雖然有一些command模式的思想，但是用的好像不夠正宗。其實(shí)用command模式實(shí)現(xiàn)undo和redo應(yīng)該還是比較容易的，做個(gè)例子練練手吧：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> test command </TITLE>
<META NAME="Author" CONTENT="emu">
<SCRIPT LANGUAGE="JavaScript">
<!--
var actionStack = [];//操作棧
var actionIndex = 0;//操作棧中當(dāng)前操作的指針
//----------------------- command對(duì)象基類 ------------------------------
function BaseAction(){
}
BaseAction.prototype.exec=function(){
actionStack[actionIndex++] = this;
actionStack.length = actionIndex;
}
BaseAction.prototype.undo=function(){
alert("此操作未定義相應(yīng)的undo操作");
}
BaseAction.prototype.redo=function(){
alert("此操作未定義相應(yīng)的redo操作");
}
//----------------------- move操作的command對(duì)象 ------------------------------
function MoveAction(elm){
this.oldX = elm.oldX;
this.oldY = elm.oldY;
this.newX = elm.newX;
this.newY = elm.newY;
this.sourceElement = elm;
this.status = "done";
}
MoveAction.prototype = new BaseAction();
MoveAction.prototype.undo=function(){
if (this.status != "done") return;
this.sourceElement.style.left = this.oldX;
this.sourceElement.style.top = this.oldY;
this.status = "undone";
}
MoveAction.prototype.redo=function(){
if (this.status != "undone") return;
this.sourceElement.style.left = this.newX;
this.sourceElement.style.top = this.newY;
this.status = "done";
}
//----------------------- change操作的command對(duì)象 ------------------------------
function ChangeAction(elm){
this.sourceElement = elm;
this.oldValue = elm.defaultValue;
this.newValue = elm.value;
elm.defaultValue = elm.value;
this.status = "done";
}
ChangeAction.prototype = new BaseAction();
ChangeAction.prototype.undo = function(){
if (this.status != "done") return;
this.sourceElement.value = this.sourceElement.defaultValue = this.oldValue;
this.status = "undone";
}
ChangeAction.prototype.redo = function(){
if (this.status != "undone") return;
this.sourceElement.value = this.newValue;
this.status = "done";
}
//--------------------- 全局函數(shù) ----------------------------
function undo(){
if (actionIndex>0){
actionStack[--actionIndex].undo();
}
}
function redo(){
if (actionIndex<actionStack.length){
actionStack[actionIndex++].redo();
}
}
function checkMouseMove(){
if (window.activeElement){
var elm = window.activeElement;
elm.style.left = event.x-elm.innerX;
elm.style.top = event.y-elm.innerY;
}
}
function releaseMouse(){
if (window.activeElement){
activeElement.newX = event.x-activeElement.innerX;
activeElement.newY = event.y-activeElement.innerY;
new MoveAction(activeElement).exec();
window.activeElement = null;
}
}
function drag(){
if (event.button!=2) return;
var elm = event.srcElement;
window.activeElement = elm;
elm.oldX = elm.offsetLeft;
elm.oldY = elm.offsetTop;
elm.innerX = event.x - elm.oldX;
elm.innerY = event.y - elm.oldY;
}
function changeValue(){
new ChangeAction(event.srcElement).exec();
}
//-->
</SCRIPT>
</HEAD>
<BODY onmousemove="checkMouseMove()" onmouseup="releaseMouse()" oncontextmenu="return false">
<input type=button onclick=undo() value=undo>
<input type=button onclick=redo() value=redo>
<input value="drag me" onmousedown="drag()" onchange="changeValue()" style="position:absolute;left:150;color:blue">
<input value="drag me" onmousedown="drag()" onchange="changeValue()" style="position:absolute;left:350;color:green">
<input value="drag me" onmousedown="drag()" onchange="changeValue()" style="position:absolute;left:550;color:violet">
</BODY>
</HTML>
用鼠標(biāo)右鍵拖動(dòng)輸入框，或者直接修改輸入框的內(nèi)容，可以一一 undo 再 redo 。
看來(lái)效果還不錯(cuò)。秋水說(shuō)有bug，不過(guò)我沒(méi)有重現(xiàn)出來(lái)呢？