JavaScript 中的备忘录

Question

我正在寻找要在 CRUD 表单中使用的备忘录模式 (GoF) 的 JavaScript 实现。 在其基本级别上，撤消对输入的更改就足够了，但如果将其与 YUI 或 Ext 等标准 JS 框架一起使用，以撤消和更改输入，那就太好了。 重做网格操作（新行、删除行等）。

谢谢

Answer 1

由于我没有看到任何代码示例，因此这里是 EXT 表单的撤消的快速“n Dirty 实现”：

var FormChangeHistory = function(){
    this.commands = [];
    this.index=-1;
}

FormChangeHistory.prototype.add = function(field, newValue, oldValue){
    //remove after current 
    if (this.index > -1 ) {
        this.commands = this.commands.slice(0,this.index+1)
    } else {
        this.commands = []
    }
    //add the new command
    this.commands.push({
        field:field,
        before:oldValue,
        after:newValue
    })
    ++this.index
}

FormChangeHistory.prototype.undo = function(){
    if (this.index == -1) return;
    var c = this.commands[this.index];
    c.field.setValue(c.before);
    --this.index
}

FormChangeHistory.prototype.redo = function(){
    if (this.index +1 == this.commands.length) return;
    ++this.index
    var c = this.commands[this.index];
    c.field.setValue(c.after);
}

Ext.onReady(function(){
    new Ext.Viewport({
        layout:"fit",
        items:[{    
            xtype:"form",
            id:"test_form",
            frame:true,
            changeHistory:new FormChangeHistory("test_form"),
            defaults:{
                listeners:{
                    change:function( field, newValue, oldValue){
                        var form = Ext.getCmp("test_form")
                        form.changeHistory.add(field, newValue, oldValue)
                    }   
                }
            },
            items:[{
                fieldLabel:"type some stuff",
                xtype:"textfield"
            },{
                fieldLabel:"then click in here",
                xtype:"textfield"
            }],
            buttons:[{
                text:"Undo",
                handler:function(){
                    var form = Ext.getCmp("test_form")
                    form.changeHistory.undo();
                }
            },{
                text:"Redo",
                handler:function(){
                    var form = Ext.getCmp("test_form")
                    form.changeHistory.redo();
                }
            }]
        }]
    })
});

为可编辑网格实现此操作有点棘手，但您应该能够创建一个执行相同操作的 GridChangeHistory然后从 EditorGrid 的 AfterEdit 监听器调用 add() 函数。

“before”和“after”属性可以是回调函数，允许您撤消/重做任何类型的命令，但这在调用 add() 时需要更多工作

Answer 2

由于您正在尝试撤消/重做命令，因此我建议使用命令模式。 这是教程的链接； 它是用 C# 编写的，但对于 OO 程序员来说应该足够简单。