使用Javascript的紀念品

Question

我正在尋找用於CRUD表單的紀念圖案（GoF）的JavaScript實現。在其基本級別上，它將足以撤消對輸入的更改，但將它與標準JS框架（如YUI或Ext）一起使用可以撤消重做網格操作（新行，刪除行等）。

感謝

Answer 1

因爲我沒有看到任何代碼示例，這裏是一個EXT形式快速「N髒執行撤消：

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（）函數。

「之前」和「之後」屬性可以是回調函數，它允許您撤消/重做任何類型的命令，但是在調用add（）時需要更多的工作（）

Answer 2

既然你想撤銷/重做命令，我建議使用Command pattern代替。 Here is a link to a tutorial;它使用C＃，但它應該足夠簡單，可以遵循OO程序員。