Vật lưu niệm trong Javascript

Question

Tôi đang tìm cách triển khai JavaScript của mẫu ký tự (GoF) được sử dụng trong các biểu mẫu CRUD. Ở cấp độ cơ bản, nó sẽ đủ để hoàn tác các thay đổi về đầu vào, nhưng sẽ tuyệt vời khi sử dụng nó với các khung JS chuẩn như YUI hoặc Ext, để hoàn tác & làm lại các hành động lưới (hàng mới, xóa hàng, v.v.).

Cảm ơn

Answer 1

Vì tôi không thấy bất kỳ ví dụ mã, đây là một cách nhanh chóng 'n thi bẩn của undo đối với một hình thức EXT:

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(); 
       } 
      }] 
     }] 
    }) 
}); 

Thực hiện điều này cho một mạng lưới có thể chỉnh sửa là một phức tạp hơn chút, nhưng bạn nên có thể tạo một GridChangeHistory thực hiện điều tương tự và sau đó gọi hàm add() từ trình nghe AfterEdit của EditorGrid.

Thuộc tính "trước" và "sau" có thể là chức năng gọi lại cho phép bạn hoàn tác/làm lại bất kỳ loại lệnh nào, nhưng điều đó sẽ yêu cầu nhiều công việc hơn khi gọi thêm()

Answer 2

Vì bạn đang cố gắng để undo/redo lệnh, tôi đề nghị sử dụng Command pattern để thay thế. Here is a link to a tutorial; nó trong C#, nhưng nó phải đủ đơn giản để làm theo cho một lập trình viên OO.