JavaScript撤銷恢復(fù)操作的實現(xiàn)方法詳解
前言
這是一個基于原生JavaScript
+Three.js的系統(tǒng), 我需要在里面增加撤銷恢復(fù)的功能, 這并非針對一個功能, 而是各種操作.
主要記錄思路.
一、初期設(shè)想
棧似乎很合適, 用棧存儲狀態(tài).
最近的一次操作入棧存在于棧頂, 而撤銷操作只需要對棧頂?shù)臓顟B(tài)進行操作, 這遵循棧的后進先出原則(LIFO).
然后再設(shè)置一系列方法去操作棧, 增加一點安全性.
首先是各種功能應(yīng)該在什么地方發(fā)起出入棧操作, 這里有一大堆js文件.
其次對于不同的功能需要收集什么參數(shù)來組織狀態(tài)入棧.
不同的功能出棧應(yīng)該分別進行什么操作, 回撤出棧肯定要調(diào)這堆文件里的方法來把老狀態(tài)填回去.
二、如何收集狀態(tài)
先寫個demo,我建了一個數(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)就不得不去滿地的找了, 操作都寫好了, 還是不要亂動.
除非單獨寫一套獨立的邏輯, 執(zhí)行系統(tǒng)的同時也執(zhí)行我自己的, 但這基本是要重寫一套系統(tǒng)了(
1.通信嘗試
但還是要想辦法把各處的數(shù)據(jù)都劃拉到Manager
里.
呃, 老實說我并沒有什么原生開發(fā)的經(jīng)驗, 我在多個文件里引入了Manager
類并且期望著這些文件可以基于Manager
建立聯(lián)絡(luò)實現(xiàn)數(shù)據(jù)共享, 比如在a.js和b.js內(nèi):
只是舉個例子, 不要用一個字母去命名文件.
// 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);
然而這樣做并不能實現(xiàn)數(shù)據(jù)共享, 每一個剛剛實例化出來的對象都是嶄新的.
const manager = new Manager();
只是使用原始干凈的class Manger
實例化了一個僅存在于這個模塊里的對象manager
.
2.如何通信
如果將一個對象放在公用的模塊里, 從各個文件觸發(fā)去操作這一個對象呢…公用模塊里的數(shù)據(jù)總不至于對來自不同方向的訪問做出不同的回應(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 }
之后分別在各個js文件引入manager
, 共同操作該模塊內(nèi)的同一個manager
, 可以構(gòu)成聯(lián)系, 從不同位置向manager
同步數(shù)據(jù).
manager
幾乎像服務(wù)器里的數(shù)據(jù)庫, 接受存儲從各處發(fā)送的數(shù)據(jù).
三、管理者與執(zhí)行者
現(xiàn)在入棧方案基本確定了, 一個入棧方法push
就能通用, 那出棧怎么辦呢.
不同的操作必須由不同的出棧方法執(zhí)行.
最初設(shè)想是寫一個大函數(shù)存在class manager里
, 只要發(fā)起回撤就調(diào)這個函數(shù), 至于具體執(zhí)行什么, 根據(jù)參數(shù)去確定.
但是這方法不太好.
首先, 我會在用戶觸發(fā)ctrl + z
鍵盤事件時發(fā)起回撤調(diào)用回撤函數(shù), 但是我只在這一處調(diào)用, 如何判定給回撤函數(shù)的參數(shù)該傳什么呢? 如果要傳參, 我怎么在ctrl + z
事件監(jiān)聽的地方獲取到該回撤什么操作以傳送正確的參數(shù)呢?
另外, 如果這樣做, 我需要在manager.js這一個文件里拿到所有回撤操作需要的方法和它們的參數(shù), 這個項目中的大部分文件都以一個巨大的類起手, 構(gòu)造函數(shù)需要傳參, 導(dǎo)出的還是這個類, 我如果直接在manager
里引入這些文件去new
它們, 先不說構(gòu)造函數(shù)傳參的問題, 生成的對象是嶄新的, 會因為一些方法沒有調(diào)用導(dǎo)致對象里的數(shù)據(jù)不存在或者錯誤, 而我去使用這些數(shù)據(jù)自然也導(dǎo)致錯誤.
我最好能拿到回撤那一刻的數(shù)據(jù), 那是新鮮的數(shù)據(jù), 是有價值的.
另外manager
會在許多地方引入, 它最好不要太大太復(fù)雜.
1.數(shù)據(jù)驅(qū)動
傳參的方案十分不合理, 最好能用別的方法向回撤函數(shù)描述要執(zhí)行怎樣的回撤操作.
在入棧的時候直接于數(shù)據(jù)中描述該份數(shù)據(jù)如何進行回撤似乎也行, 但是以字符串描述出來該如何執(zhí)行?
用switch
嗎, 那需要在回撤函數(shù)內(nèi)寫全部處理方案, 哪怕處理方案抽離也需要根據(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; // ... } } }
將來萬一要加別的功能的回撤, 一個函數(shù)百十行就不太好看了, 還是在類里面的函數(shù).
那…把switch
也抽出去? 似乎沒必要.
2.管理者
參考steam
, 嗯, 就是那個游戲平臺)
steam
可以看作游戲的啟動器吧, 拋開人工操作, 如果需要啟動游戲,那么先啟動steam, steam再去啟動游戲, steam可以看作一個管理者.
管理者只需要去決定, 并且調(diào)用分派事項給正確的執(zhí)行者就好, 管理者自己不執(zhí)行.
參考你老板.
然后Manager
可以作為這樣一個角色, 它只負(fù)責(zé)維護狀態(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() { // 回撤事項分配 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ù)事項分配 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)收集是在一次請求前, 這個請求函數(shù)固定在每次世界變化之后觸發(fā), 將當(dāng)前的世界狀態(tài)上傳. 所以為了避免回撤或恢復(fù)世界操作調(diào)用請求函數(shù)將回撤或恢復(fù)的世界再次重復(fù)加入棧內(nèi)而設(shè)置.
undo
或者redo
這兩種事情發(fā)生后, 執(zhí)行者manager
通過原生數(shù)組方法獲取到本次事項的狀態(tài)對象(出棧), 借助getFunction
(看作它的秘書吧)訪問執(zhí)行者名單, 幫自己選取該事項合適的執(zhí)行者, 并調(diào)用該執(zhí)行者執(zhí)行任務(wù)(參考undo
, redo
函數(shù)體).
執(zhí)行者名單背后是一個函數(shù)庫一樣的結(jié)構(gòu), 類似各個部門.
這樣只需要無腦undo()
就好, manager
會根據(jù)本次的狀態(tài)對象分配執(zhí)行者處理.
do
這個操作比較簡單也沒有多種情況, 就沒必要分配執(zhí)行者了…
3.執(zhí)行者
執(zhí)行者名單需要為一個對象, 這樣getFunction()
秘書才能夠為manager
選出合適的執(zhí)行者, 執(zhí)行者名單應(yīng)為如下結(jié)構(gòu):
// 執(zhí)行者有擅長回撤(undo)和恢復(fù)(redo)的兩種 { planA: planAFun (data, params) { // ... }, planAUndo: planAUndoFun (data, params) { // ... }, planB: planBFun () { // ... }, planBUndo: planBUndoFun (data, params) { // ... } ... }
也好, 那就直接把所有執(zhí)行者抽離為一個類, 實例化該類后自然能形成這種數(shù)據(jù)結(jié)構(gòu):
class Exec { // executor saveWorldRedo (data, params) { // ... } saveWorldUndo (data, params) { // ... } initialWorldUndo (data, params) { // ... } } export { Exec };
實例化后:
{ saveWorldRedo: function (data, params) { // ... }, saveWorldUndo: function (data, params) { // ... }, initialWorldUndo: function (data, params) { // ... } }
正是需要的結(jié)構(gòu).
getFunction
可以由解析狀態(tài)對象進而決定枚舉executor
對象中的哪個執(zhí)行者出來調(diào)用:
const executor = getFunction (name) { return executors[name]; }
到此這篇關(guān)于JavaScript撤銷恢復(fù)操作的實現(xiàn)方法詳解的文章就介紹到這了,更多相關(guān)JS撤銷恢復(fù)操作內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript中的事件循環(huán)機制及其運行原理
JavaScript中的事件循環(huán)機制是一種異步處理機制,通過維護事件隊列和消息隊列,實現(xiàn)任務(wù)的分發(fā)和執(zhí)行。事件循環(huán)機制由主線程和任務(wù)隊列構(gòu)成,主線程運行完當(dāng)前任務(wù)后會檢查任務(wù)隊列中是否有待執(zhí)行的任務(wù),如有則執(zhí)行,否則等待2023-04-04JS獲取鼠標(biāo)坐標(biāo)并且根據(jù)鼠標(biāo)位置不同彈出不同內(nèi)容
這篇文章主要介紹了js獲取鼠標(biāo)坐標(biāo)并且根據(jù)鼠標(biāo)位置不同彈出不同內(nèi)容的實例代碼,需要的朋友可以參考下2017-06-06js實現(xiàn)的tab標(biāo)簽切換效果代碼分享
這篇文章主要介紹了js實現(xiàn)的tab標(biāo)簽切換效果,功能實現(xiàn)非常簡單,推薦給大家,有需要的小伙伴可以參考下。2015-08-08