欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年02月22日 10:31:49   作者：白瑕  
這篇文章主要介紹了JavaScript撤銷恢復(fù)操作的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

前言

這是一個基于原生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)文章

最新評論