자바 스크립트의 메멘토

Question

CRUD 양식에 사용할 유품 패턴 (GoF)의 자바 스크립트 구현을 찾고 있습니다. 기본 레벨에서 입력에 대한 변경 사항을 취소하는 것으로 충분하지만 YUI 또는 Ext와 같은 표준 JS 프레임 워크에서 사용하여 & 다시 실행 격자 조치 (새 행, 삭제 행 등)를 실행 취소하는 것이 좋습니다. 당신은/다시 실행 명령을 취소하려고하기 때문에

감사

Answer 1

내가 어떤 코드 예제를 확인할 수 없습니다 때문에, 여기에 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(); 
       } 
      }] 
     }] 
    }) 
}); 

조금 까다 롭습니다,하지만 당신은해야 동일한 작업을 수행하는 GridChangeHistory를 만든 다음 EditorGrid의 AfterEdit 수신기에서 add() 함수를 호출 할 수 있습니다.

"before"및 "after"속성은 모든 종류의 명령을 실행 취소/다시 실행할 수있는 콜백 함수 일 수 있지만 add()를 호출 할 때 더 많은 작업이 필요합니다.

Answer 2

, 내가 대신 Command pattern을 사용하는 것이 좋습니다. Here is a link to a tutorial; 그것은 C#에 있지만 OO 프로그래머를 따라갈만큼 간단해야합니다.