Javascript'te Memento

Question

CRUD formlarında kullanılacak memento şablonunun (GoF) JavaScript uygulamasını arıyorum. Temel seviyesinde, girdilerdeki değişiklikleri geri almak yeterli olacaktır, ancak YUI veya Ext gibi standart JS çerçeveleriyle kullanmak, & geri alma ızgarası eylemlerini (yeni satır, satır silme vb.) Geri almak için harika olacaktır. Eğer/yinelemek komutları geri almak için çalışıyoruz beri

Teşekkür

Answer 1

Ben herhangi bir kod örnekleri göremiyorum beri burada EXT form için geri alma hızlı 'n kirli uygulamasıdır: düzenlenebilir bir ızgara için bu uygulama

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

biraz daha zahmetlidir ama gerektiği Aynı şeyi yapan bir GridChangeHistory yapabilir ve sonra EditorGrid'in AfterEdit dinleyicisinden add() işlevini çağırır.

"Önce" ve "sonra" özellikleri, herhangi bir komutu geri almanıza/yinelemenize izin veren geri arama işlevleri olabilir, ancak add()

Answer 2

, yerine Command pattern kullanmanızı öneririz. Here is a link to a tutorial; C# var, ama bir OO programcısı için takip etmek için yeterince basit olmalıdır.