纯javascript对撤销和重写(undo、redo)的完美实现,适用于任何页面元素操作

最近项目组开发一个报表设计器，需要用到撤销和重写的功能，这样用户就能方便的看到历史操作。
不知道大家看过java的命令模式没有，命令模式在英文里也叫undo,在javascript设计模式这本书里里就是这样子说的，虽然有好几个英文名称。

具体思路是每个对应页面的操作，譬如对表格的操作，在js里都是一个命令对象，我们暂且叫Undo.Command,Undo.Command里都有undo和redo的自定义实现，并且每个

CommandObj里都存储了操作的对象的属性，以方便在undo和redo里对其操作。

UpCommand = Undo.Command.extend({
constructor: function(li) {
this.li = li;//存储操作对象属性
},
execute: function() {

},

//撤销
undo: function() {
this.li.insertAfter(this.li.next());
},

//重写

redo:function(){

this.li.insertBefore(this.li.prev());

}
})

这些命令保存在哪里？

内存，这是目前采取的实现，与后台无任何关联！！

必须定义一个全局命令堆栈。var stack = new Undo.Stack()；

每次操作完后，将命令入栈。

但是如果对堆栈数量不做限制，大家可以想象到时候浏览器会是什么情况，所以必须对堆栈数量限制，先进先出。

撤销回退还有一个注意点是 ： 每次新的操作来了之后（不包括对undo、redo按钮的操作），redo（重写）都必须清空，这是目前所有软件实现undo、redo一致的行为。

还有一个注意点是，命令的对象越小越好，这样内存中的对象属性就比较少，但是实现undo、redo的细节就会繁琐，我们现在的报表设计器不会只是回退一个表的细微操作，这样的代码复杂度是很大的。类似表格的很多对象都是保存在工作区的page上的，所以当前堆栈中保存的是page。刷新page即可。

(function() {

var ctor = function(){};

var inherits = function(parent, protoProps) {
var child;

if (protoProps && protoProps.hasOwnProperty('constructor')) {
child = protoProps.constructor;
} else {
child = function(){ return parent.apply(this, arguments); };
}

ctor.prototype = parent.prototype;
child.prototype = new ctor();

if (protoProps) extend(child.prototype, protoProps);

child.prototype.constructor = child;
child.__super__ = parent.prototype;
return child;
};

function extend(target, ref) {
var name, value;
for ( name in ref ) {
value = ref[name];
if (value !== undefined) {
target[ name ] = value;
}
}
return target;
};

var Undo;
if (typeof exports !== 'undefined') {
Undo = exports;
} else {
Undo = this.Undo = {};
}

Undo.Stack = function() {
this.commands = [];
this.stackPosition = -1;
this.savePosition = -1;
};

extend(Undo.Stack.prototype, {
execute: function(command) {

this._clearRedo();
command.execute();

//必须对堆栈数量进行限制，自己去实现吧
this.commands.push(command);
this.stackPosition++;
this.changed();
},
undo: function() {
this.commands[this.stackPosition].undo();
this.stackPosition--;
this.changed();
},
canUndo: function() {
return this.stackPosition >= 0;
},
redo: function() {
this.stackPosition++;
this.commands[this.stackPosition].redo();
this.changed();
},
canRedo: function() {
return this.stackPosition < this.commands.length - 1;
},
save: function() {
this.savePosition = this.stackPosition;
this.changed();
},
dirty: function() {
return this.stackPosition != this.savePosition;
},
_clearRedo: function() {

this.commands = this.commands.slice(0, this.stackPosition + 1);
},
changed: function() {
}
});

Undo.Command = function(name) {
this.name = name;
}

var up = new Error("override me!");

extend(Undo.Command.prototype, {
execute: function() {
throw up;
},
undo: function() {
throw up;
},
redo: function() {
this.execute();
}
});

Undo.Command.extend = function(protoProps) {
var child = inherits(this, protoProps);
child.extend = Undo.Command.extend;
return child;
};

}).call(this);

使用方式：

var stack = new Undo.Stack(),

UpCommand = Undo.Command.extend({
constructor: function(li) {
this.li = li;
},
execute: function() {
this.li.insertBefore(this.li.prev());
},
undo: function() {
this.li.insertAfter(this.li.next());
}
}),
DownCommand = UpCommand.extend({
execute: UpCommand.prototype.undo,
undo: UpCommand.prototype.execute,
});

操作完后命令入堆栈：

stack.execute(new UpCommand($(this).parent()));

其实有了思想，大家剩下的自己实现吧，明白人还是明白人

技术交流群：55919698