命令模式 -- 撤銷和重做 · 前端知識 -- 學習整理

>[success] # 撤銷 ~~~ 1.撤銷：撤銷操作的實現一般是給命令對象增加一個名為 unexecude 或者 undo 的方法，在該方法里執行 execute 的反向操作。 2.書中舉了一個例子，有一個操作點擊后頁面中的小球會移動100個像素，為了可以讓小球回到初始的位置，我們可以定義一個方法'unexecude ',這個方法會記錄小球移動前的位置，這個方法我們叫它為'撤銷' ~~~ >[danger] ##### 代碼 ~~~ 1.下面是書中代碼,通過代碼可以發現'MoveCommand' 這個指令對象不像之前我們只提供了一個'execute ' 方法，現在我們還提供了一個'undo'方法用來記錄小球的初始位置 ~~~ ~~~ var MoveCommand = function( receiver, pos ){ this.receiver = receiver; this.pos = pos; this.oldPos = null; }; MoveCommand.prototype.execute = function(){ this.receiver.start( 'left', this.pos, 1000, 'strongEaseOut' ); this.oldPos = this.receiver.dom.getBoundingClientRect()[ this.receiver.propertyName ]; // 記錄小球開始移動前的位置 }; MoveCommand.prototype.undo = function(){ this.receiver.start( 'left', this.oldPos, 1000, 'strongEaseOut' ); // 回到小球移動前記錄的位置 }; ~~~ >[success] # 重做 ~~~ 1.書中說了一些特殊情況的例子： 1.1.我們需要撤銷一系列的命令。比如在一個圍棋程序中，現在已經下了 10 步棋，我們需要一次性悔棋到第 5 步。在這之前，我們可以把所有執行過的下棋命令都儲存在一個歷史列表中，然后倒序循環來依次執行這些命令的 undo 操作，直到循環執行到第 5 個命令為止 1.2.在一個Canvas 畫圖的程序中，畫布上有一些點，我們在這些點之間畫了 N 條曲線把這些點相互連接起來，當然這是用命令模式來實現的。但是我們卻很難為這里的命令對象定義一個擦除某條曲線的undo 操作，因為在 Canvas 畫圖中，擦除一條線相對不容易實現。 2.在某些情況下無法順利地利用 undo 操作讓對象回到 execute 之前的狀態。這時候最好的辦法是先清除，然后把剛才執行過的命令全部重新執行一遍，這一點同樣可以利用一個歷史列表堆棧辦到。記錄命令日志，然后重復執行它們，這是逆轉不可逆命令的一個好辦法。 ~~~ >[danger] ##### 書中的案例 ~~~ 1.書中的作者做了一個案例，這個案例就是記錄你按w s a d，鍵位，一個按鈕點擊完后，會重新執行你剛才的操作，這樣就更容易理解了如果遇到'Canvas '這種較為特殊的無法后退的情況，可以通過 '聲明一個數組，取值的時候通過堆棧' 2.可以看出在每一次操作的時候都有都會有個一'push數組的操作，用來記錄你每次的操作'，在通過'shift()'依次執行 3.通過這案例也拓展了一個思路，如何記錄上一次的操作，可以利用數組但數組就不用保存每一步的操作，個人自己思路數組長度為2固定的，初始的時候數組第一位記錄初始化的效果，當數組長度超過二的時候刪除數組中的第一位，這樣在push進來的新的讓數組長度再次變成2 ~~~ ~~~ <html> <head> <meta charset="utf-8"> </head> <body> <button id="replay">播放錄像</button> </body> <script> var Ryu = { attack: function(){ console.log( '攻擊' ); }, defense: function(){ console.log( '防御' ); }, jump: function(){ console.log( '跳躍' ); }, crouch: function(){ console.log( '蹲下' ); } }; // ----------------正常思路用法------------------------ // // 需要以此類推寫四個命令 // var AttackCommand = function(reciver){ // this.reciver = reciver // } // AttackCommand.prototype.execute = function(){ // this.reciver.attack() // } // // invoker 調用者 // var setCommand = function(command){ // command.execute() // } // -------------------------------------------------- // 利用策略模式配合解決需要寫四個命令 var makeCommand = function( receiver, state ){ // 創建命令 return function(){ receiver[ state ](); } }; var commands = { "119": "jump", // W "115": "crouch", // S "97": "defense", // A "100": "attack" // D }; var commandStack = []; // 保存命令的堆棧 document.onkeypress = function( ev ){ var keyCode = ev.keyCode, command = makeCommand( Ryu, commands[ keyCode ] ); if ( command ){ command(); // 執行命令 commandStack.push( command ); // 將剛剛執行過的命令保存進數組隊列中 } }; document.getElementById( 'replay' ).onclick = function(){ // 點擊播放錄像 var command; while( command = commandStack.shift() ){ // 從隊列里依次取出命令并執行 command(); } }; </script> </html> ~~~