java 实现指令的撤销_纯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