JavaScript撤銷(xiāo)恢復(fù)操作的實(shí)現(xiàn)方法詳解

更新時(shí)間：2023年02月22日 10:31:49 作者：白瑕

這篇文章主要介紹了JavaScript撤銷(xiāo)恢復(fù)操作的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

前言

這是一個(gè)基于原生JavaScript+Three.js的系統(tǒng), 我需要在里面增加撤銷(xiāo)恢復(fù)的功能, 這并非針對(duì)一個(gè)功能, 而是各種操作.

主要記錄思路.

一、初期設(shè)想

棧似乎很合適, 用棧存儲(chǔ)狀態(tài).

最近的一次操作入棧存在于棧頂, 而撤銷(xiāo)操作只需要對(duì)棧頂?shù)臓顟B(tài)進(jìn)行操作, 這遵循棧的后進(jìn)先出原則(LIFO).

然后再設(shè)置一系列方法去操作棧, 增加一點(diǎn)安全性.

首先是各種功能應(yīng)該在什么地方發(fā)起出入棧操作, 這里有一大堆js文件.

其次對(duì)于不同的功能需要收集什么參數(shù)來(lái)組織狀態(tài)入棧.

不同的功能出棧應(yīng)該分別進(jìn)行什么操作, 回撤出?？隙ㄒ{(diào)這堆文件里的方法來(lái)把老狀態(tài)填回去.

二、如何收集狀態(tài)

先寫(xiě)個(gè)demo，我建了一個(gè)數(shù)組棧放在class Manager, 設(shè)置了入棧方法push, 出棧方法pop以及查看棧頂?shù)?code>peek方法.

class Manager {
    constructor() {
        this.stats= [];
    }
    push(action) {
        this.stats.push(action);
    }
    pop() {
        const nowAction = this.doActions.pop();
    }
    peek(which) {
        return this.doActions[this.doCount];
    }
}
export { Manager }

收集狀態(tài)就不得不去滿地的找了, 操作都寫(xiě)好了, 還是不要亂動(dòng).

除非單獨(dú)寫(xiě)一套獨(dú)立的邏輯, 執(zhí)行系統(tǒng)的同時(shí)也執(zhí)行我自己的, 但這基本是要重寫(xiě)一套系統(tǒng)了(

1.通信嘗試

但還是要想辦法把各處的數(shù)據(jù)都劃拉到Manager里.

呃, 老實(shí)說(shuō)我并沒(méi)有什么原生開(kāi)發(fā)的經(jīng)驗(yàn), 我在多個(gè)文件里引入了Manager類(lèi)并且期望著這些文件可以基于Manager建立聯(lián)絡(luò)實(shí)現(xiàn)數(shù)據(jù)共享, 比如在a.js和b.js內(nèi):

只是舉個(gè)例子, 不要用一個(gè)字母去命名文件.

// a.js
import { manager } from "./backup/manager.js";
const manager = new Manager();
const action = {
  name: 'saveWorldList',
  params: {
    target: '108',
    value: [
      world: {
        psr: {},
        annotation: {}
      }
    ]
  }
}
for (let i = 0; i < 3; i++) {
  manager.push(action);
}

// b.js
import { manager } from "./backup/manager.js";
const manager = new Manager();
const undoAction = manager.pop();
console.log(undoAction);

然而這樣做并不能實(shí)現(xiàn)數(shù)據(jù)共享, 每一個(gè)剛剛實(shí)例化出來(lái)的對(duì)象都是嶄新的.

const manager = new Manager();

只是使用原始干凈的class Manger實(shí)例化了一個(gè)僅存在于這個(gè)模塊里的對(duì)象manager.

2.如何通信

如果將一個(gè)對(duì)象放在公用的模塊里, 從各個(gè)文件觸發(fā)去操作這一個(gè)對(duì)象呢…公用模塊里的數(shù)據(jù)總不至于對(duì)來(lái)自不同方向的訪問(wèn)做出不同的回應(yīng)吧?

class Manager {
    constructor() {
        this.stats= [];
    }
    push(action) {
        this.stats.push(action);
    }
    pop() {
        const nowAction = this.doActions.pop();
    }
    peek(which) {
        return this.doActions[this.doCount];
    }
}
const manager = new Manager();
export { manager }

之后分別在各個(gè)js文件引入manager, 共同操作該模塊內(nèi)的同一個(gè)manager, 可以構(gòu)成聯(lián)系, 從不同位置向manager同步數(shù)據(jù).

manager幾乎像服務(wù)器里的數(shù)據(jù)庫(kù), 接受存儲(chǔ)從各處發(fā)送的數(shù)據(jù).

三、管理者與執(zhí)行者

現(xiàn)在入棧方案基本確定了, 一個(gè)入棧方法push就能通用, 那出棧怎么辦呢.

不同的操作必須由不同的出棧方法執(zhí)行.

最初設(shè)想是寫(xiě)一個(gè)大函數(shù)存在class manager里, 只要發(fā)起回撤就調(diào)這個(gè)函數(shù), 至于具體執(zhí)行什么, 根據(jù)參數(shù)去確定.

但是這方法不太好.

首先, 我會(huì)在用戶觸發(fā)ctrl + z鍵盤(pán)事件時(shí)發(fā)起回撤調(diào)用回撤函數(shù), 但是我只在這一處調(diào)用, 如何判定給回撤函數(shù)的參數(shù)該傳什么呢? 如果要傳參, 我怎么在ctrl + z事件監(jiān)聽(tīng)的地方獲取到該回撤什么操作以傳送正確的參數(shù)呢?

另外, 如果這樣做, 我需要在manager.js這一個(gè)文件里拿到所有回撤操作需要的方法和它們的參數(shù), 這個(gè)項(xiàng)目中的大部分文件都以一個(gè)巨大的類(lèi)起手, 構(gòu)造函數(shù)需要傳參, 導(dǎo)出的還是這個(gè)類(lèi), 我如果直接在manager里引入這些文件去new它們, 先不說(shuō)構(gòu)造函數(shù)傳參的問(wèn)題, 生成的對(duì)象是嶄新的, 會(huì)因?yàn)橐恍┓椒](méi)有調(diào)用導(dǎo)致對(duì)象里的數(shù)據(jù)不存在或者錯(cuò)誤, 而我去使用這些數(shù)據(jù)自然也導(dǎo)致錯(cuò)誤.

我最好能拿到回撤那一刻的數(shù)據(jù), 那是新鮮的數(shù)據(jù), 是有價(jià)值的.

另外manager會(huì)在許多地方引入, 它最好不要太大太復(fù)雜.

1.數(shù)據(jù)驅(qū)動(dòng)

傳參的方案十分不合理, 最好能用別的方法向回撤函數(shù)描述要執(zhí)行怎樣的回撤操作.

在入棧的時(shí)候直接于數(shù)據(jù)中描述該份數(shù)據(jù)如何進(jìn)行回撤似乎也行, 但是以字符串描述出來(lái)該如何執(zhí)行?

用switch嗎, 那需要在回撤函數(shù)內(nèi)寫(xiě)全部處理方案, 哪怕處理方案抽離也需要根據(jù)switch調(diào)取函數(shù), 就像這樣:

class Manager {
  constructor () {
    this.stats = [];
  }
  pop() {
    const action = this.stats.pop();
    switch (action) {
	  planA: 
        this.planAFun(action.params);
      break;
      planB: 
        this.planBFun(action.params);
      break;
      // ...
    }
  }
}

將來(lái)萬(wàn)一要加別的功能的回撤, 一個(gè)函數(shù)百十行就不太好看了, 還是在類(lèi)里面的函數(shù).

那…把switch也抽出去? 似乎沒(méi)必要.

2.管理者

參考steam, 嗯, 就是那個(gè)游戲平臺(tái))

steam可以看作游戲的啟動(dòng)器吧, 拋開(kāi)人工操作, 如果需要啟動(dòng)游戲,那么先啟動(dòng)steam, steam再去啟動(dòng)游戲, steam可以看作一個(gè)管理者.

管理者只需要去決定, 并且調(diào)用分派事項(xiàng)給正確的執(zhí)行者就好, 管理者自己不執(zhí)行.

參考你老板.

然后Manager可以作為這樣一個(gè)角色, 它只負(fù)責(zé)維護(hù)狀態(tài)和分配任務(wù):

import { Exec } from './exec.js';
import { deepCopy } from "../util.js";
const executors = new Exec(); // 執(zhí)行者名單
class Manager {
  constructor() {
    this.editor = null;
    this.doCount = 0;
    this.doActions = [];
    this.undoCount = 0;
    this.undoActions = [];
    this.justUndo = false;
    this.justRedo = false;
  }
  do(action) { // 增加狀態(tài)
    if (this.justUndo || this.justRedo) { // undo/redo后, world不應(yīng)立即入棧
      this.justUndo === true && (this.justUndo = false);
      this.justRedo === true && (this.justRedo = false);
      return;
    }
    this.previousWorld = action.params.value;
    this.doActions.push(action);
    this.doCount++
    console.log("Do: under control: ", this.doActions);
  }
  undo() { // 回撤事項(xiàng)分配
    if (this.doActions.length === 1) {
      console.log(`Cannot undo: doSatck length: ${this.doActions.length}.`);
      return;
    }
    const nowAction = this.doActions.pop();
    this.doCount--;
    this.undoActions.push(nowAction);
    this.undoCount++;
    const previousAction = this.peek('do');
    const executor = this.getFunction(`${previousAction.name}Undo`);
    executor(this.editor, previousAction.params)
    this.justUndo = true;
    console.log(`Undo: Stack now: `, this.doActions);
  }
  redo() { // 恢復(fù)事項(xiàng)分配
     if (this.undoActions.length === 0) {
       console.log(`Connot redo: redoStack length: ${this.undoActions.length}.`);
       return;
     }
    const nowAction = this.undoActions.pop();
    this.undoCount--;
    this.doActions.push(nowAction);
    this.doCount++;
    const previousAction = nowAction;
    const executor = this.getFunction(`${previousAction.name}Redo`);
    executor(this.editor, previousAction.params);
    this.justRedo = true;
    console.log(`Redo: Stack now: `, this.doActions);
  }
  getFunction(name) {
    return executors[name];
  }
  reset() { // 重置狀態(tài)
    this.doCount = 0;
    this.doActions = [];
    this.undoCount = 0;
    this.undoActions = []
  }
  peek(which) { // 檢視狀態(tài)
    if (which === 'do') {
      return this.doActions[this.doCount];
    } else if (which === 'undo') {
      return this.undoAction[this.undoCount];
    }
  }
  initEditor(editor) {
    this.data = editor;
  }
}
const manager = new Manager();
export { manager }

justUndo/justRedo, 我的狀態(tài)收集是在一次請(qǐng)求前, 這個(gè)請(qǐng)求函數(shù)固定在每次世界變化之后觸發(fā), 將當(dāng)前的世界狀態(tài)上傳. 所以為了避免回撤或恢復(fù)世界操作調(diào)用請(qǐng)求函數(shù)將回撤或恢復(fù)的世界再次重復(fù)加入棧內(nèi)而設(shè)置.

undo或者redo這兩種事情發(fā)生后, 執(zhí)行者manager通過(guò)原生數(shù)組方法獲取到本次事項(xiàng)的狀態(tài)對(duì)象(出棧), 借助getFunction(看作它的秘書(shū)吧)訪問(wèn)執(zhí)行者名單, 幫自己選取該事項(xiàng)合適的執(zhí)行者, 并調(diào)用該執(zhí)行者執(zhí)行任務(wù)(參考undo, redo函數(shù)體).

執(zhí)行者名單背后是一個(gè)函數(shù)庫(kù)一樣的結(jié)構(gòu), 類(lèi)似各個(gè)部門(mén).

這樣只需要無(wú)腦undo()就好, manager會(huì)根據(jù)本次的狀態(tài)對(duì)象分配執(zhí)行者處理.

do這個(gè)操作比較簡(jiǎn)單也沒(méi)有多種情況, 就沒(méi)必要分配執(zhí)行者了…

3.執(zhí)行者

執(zhí)行者名單需要為一個(gè)對(duì)象, 這樣getFunction()秘書(shū)才能夠?yàn)?code>manager選出合適的執(zhí)行者, 執(zhí)行者名單應(yīng)為如下結(jié)構(gòu):

// 執(zhí)行者有擅長(zhǎng)回撤(undo)和恢復(fù)(redo)的兩種
{
  planA: planAFun (data, params) {
    // ...
  },
  planAUndo: planAUndoFun (data, params) {
    // ...
  },
  planB: planBFun () {
    // ...
  },
  planBUndo: planBUndoFun (data, params) {
    // ...
  }
  ...
}

也好, 那就直接把所有執(zhí)行者抽離為一個(gè)類(lèi), 實(shí)例化該類(lèi)后自然能形成這種數(shù)據(jù)結(jié)構(gòu):

class Exec { // executor
  saveWorldRedo (data, params) {
    // ...
  }
  saveWorldUndo (data, params) {
    // ...
  }
  initialWorldUndo (data, params) {
    // ...
  }
}
export { Exec };

實(shí)例化后:

{
  saveWorldRedo: function (data, params) {
    // ...
  },
  saveWorldUndo: function (data, params) {
    // ...
  },
  initialWorldUndo: function (data, params) {
    // ...
  }
}

正是需要的結(jié)構(gòu).

getFunction可以由解析狀態(tài)對(duì)象進(jìn)而決定枚舉executor對(duì)象中的哪個(gè)執(zhí)行者出來(lái)調(diào)用:

const executor = getFunction (name) {
  return executors[name];
}

到此這篇關(guān)于JavaScript撤銷(xiāo)恢復(fù)操作的實(shí)現(xiàn)方法詳解的文章就介紹到這了,更多相關(guān)JS撤銷(xiāo)恢復(fù)操作內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: