Immutable.js如何實現(xiàn)撤銷重做功能

這篇文章主要介紹了Immutable.js如何實現(xiàn)撤銷重做功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都做網(wǎng)站、網(wǎng)站設(shè)計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元阜城做網(wǎng)站,已為上家服務(wù),為阜城各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

瀏覽器的功能越來越強(qiáng)大，許多原來由其他客戶端提供的功能漸漸轉(zhuǎn)移到了前端，前端應(yīng)用也越來越復(fù)雜。許多前端應(yīng)用，尤其是一些在線編輯軟件，運行時需要不斷處理用戶的交互，提供了撤消重做功能來保證交互的流暢性。不過為一個應(yīng)用實現(xiàn)撤銷重做功能并不是一件容易的事情。 Redux官方文檔中 介紹了如何在 redux 應(yīng)用中實現(xiàn)撤銷重做功能?；?redux 的撤銷功能是一個自頂向下的方案：引入 redux-undo 之后所有的操作都變?yōu)榱恕缚沙蜂N的」，然后我們不斷修改其配置使得撤銷功能變得越來越好用（這也是 redux-undo 有那么多配置項 的原因)。

本文將采用自底向上的思路，以一個簡易的在線畫圖工具為例子，使用TypeScript 、 Immutable.js 實現(xiàn)一個實用的「撤消重做」功能。大致效果如下圖所示：

Immutable.js如何實現(xiàn)撤銷重做功能

第一步：確定哪些狀態(tài)需要歷史記錄，創(chuàng)建自定義的 State 類

并非所有的狀態(tài)都需要歷史記錄。許多狀態(tài)是非?，嵥榈模绕涫且恍┡c鼠標(biāo)或者鍵盤交互相關(guān)的狀態(tài)，例如在畫圖工具中拖拽一個圖形時我們需要設(shè)置一個「正在進(jìn)行拖拽」的標(biāo)記，頁面會根據(jù)該標(biāo)記顯示對應(yīng)的拖拽提示，顯然該拖拽標(biāo)記不應(yīng)該出現(xiàn)在歷史記錄中；而另一些狀態(tài)無法被撤銷或是不需要被撤銷，例如網(wǎng)頁窗口大小，向后臺發(fā)送過的請求列表等。

排除那些不需要歷史記錄的狀態(tài)，我們將剩下的狀態(tài)用 Immutable Record 封裝起來，并定義 State 類：

// State.ts
import { Record, List, Set } from 'immutable'
const StateRecord = Record({
 items: List<Item>
 transform: d3.ZoomTransform
 selection: number
})
// 用類封裝，便于書寫 TypeScript，注意這里最好使用Immutable 4.0 以上的版本
export default class State extends StateRecord {}

這里我們的例子是一個簡易的在線畫圖工具，所以上面的 State 類中包含了三個字段，items 用來記錄已經(jīng)繪制的圖形，transform 用來記錄畫板的平移和縮放狀態(tài)，selection 則表示目前選中的圖形的 ID。而畫圖工具中的其他狀態(tài)，例如圖形繪制預(yù)覽，自動對齊配置，操作提示文本等，則沒有放在 State 類中。

第二步：定義 Action 基類，并為每種不同的操作創(chuàng)建對應(yīng)的 Action 子類

與 redux-undo 不同的是，我們?nèi)匀徊捎?命令模式 ：定義基類 Action，所有對 State 的操作都被封裝為一個 Action 的實例；定義若干 Action 的子類，對應(yīng)于不同類型的操作。

在 TypeScript 中，Action 基類用 Abstract Class 來定義比較方便。

// actions/index.ts
export default abstract class Action {
 abstract next(state: State): State
 abstract prev(state: State): State
 prepare(appHistory: AppHistory): AppHistory { return appHistory }
 getMessage() { return this.constructor.name }
}

Action 對象的 next 方法用來計算「下一個狀態(tài)」，prev 方法用來計算「上一個狀態(tài)」。getMessage 方法用來獲取 Action 對象的簡短描述。通過 getMessage 方法，我們可以將用戶的操作記錄顯示在頁面上，讓用戶更方便地了解最近發(fā)生了什么。prepare 方法用來在 Action 第一次被應(yīng)用之前，使其「準(zhǔn)備好」，AppHistory 的定義在本文后面會給出。

Action 子類舉例

下面的 AddItemAction 是一個典型的 Action 子類，用于表達(dá)「添加一個新的圖形」。

// actions/AddItemAction.ts
export default class AddItemAction extends Action {
 newItem: Item
 prevSelection: number
 constructor(newItem: Item) {
 super()
 this.newItem = newItem
 }
 prepare(history: AppHistory) {
 // 創(chuàng)建新的圖形后會自動選中該圖形，為了使得撤銷該操作時 state.selection 變?yōu)樵瓉淼闹?
 // prepare 方法中讀取了「添加圖形之前 selection 的值」并保存到 this.prevSelection
 this.prevSelection = history.state.selection
 return history
 }
 next(state: State) {
 return state
  .setIn(['items', this.newItem.id], this.newItem)
  .set('selection', this.newItemId)
 }
 prev(state: State) {
 return state
  .deleteIn(['items', this.newItem.id])
  .set('selection', this.prevSelection)
 }
 getMessage() { return `Add item ${this.newItem.id}` }
}

運行時行為

應(yīng)用運行時，用戶交互產(chǎn)生一個 Action 流，每次產(chǎn)生 Action 對象時，我們調(diào)用該對象的 next 方法來計算后一個狀態(tài)，然后將該 action 保存到一個列表中以備后用；用戶進(jìn)行撤銷操作時，我們從 action 列表中取出最近一個 Action 并調(diào)用其 prev 方法。應(yīng)用運行時，next/prev 方法被調(diào)用的情況大致如下：

// initState 是一開始就給定的應(yīng)用初始狀態(tài)
// 某一時刻，用戶交互產(chǎn)生了 action1 ...
state1 = action1.next(initState)
// 又一個時刻，用戶交互產(chǎn)生了 action2 ...
state2 = action2.next(state1)
// 同樣的，action3也出現(xiàn)了 ...
state3 = action3.next(state2)
// 用戶進(jìn)行撤銷，此時我們需要調(diào)用最近一個action的prev方法
state4 = action3.prev(state3)
// 如果再次進(jìn)行撤銷，我們從action列表中取出對應(yīng)的action，調(diào)用其prev方法
state5 = action2.prev(state4)
// 重做的時候，取出最近一個被撤銷的action，調(diào)用其next方法
state6 = action2.next(state5)
Applied-Action

為了方便后面的說明，我們對 Applied-Action 進(jìn)行一個簡單的定義：Applied-Action 是指那些操作結(jié)果已經(jīng)反映在當(dāng)前應(yīng)用狀態(tài)中的 action；當(dāng) action 的 next 方法執(zhí)行時，該 action 變?yōu)?applied；當(dāng) prev 方法被執(zhí)行時，該 action 變?yōu)?unapplied。

第三步：創(chuàng)建歷史記錄容器 AppHistory

前面的 State 類用于表示某個時刻應(yīng)用的狀態(tài)，接下來我們定義 AppHistory 類用來表示應(yīng)用的歷史記錄。同樣的，我們?nèi)匀皇褂?Immutable Record 來定義歷史記錄。其中 state 字段用來表達(dá)當(dāng)前的應(yīng)用狀態(tài)，list 字段用來存放所有的 action，而 index 字段用來記錄最近的 applied-action 的下標(biāo)。應(yīng)用的歷史狀態(tài)可以通過 undo/redo 方法計算得到。apply 方法用來向 AppHistory 中添加并執(zhí)行具體的 Action。具體代碼如下：

// AppHistory.ts
const emptyAction = Symbol('empty-action')
export const undo = Symbol('undo')
export type undo = typeof undo // TypeScript2.7之后對symbol的支持大大增強(qiáng)
export const redo = Symbol('redo')
export type redo = typeof redo
const AppHistoryRecord = Record({
 // 當(dāng)前應(yīng)用狀態(tài)
 state: new State(),
 // action 列表
 list: List<Action>(),
 // index 表示最后一個applied-action在list中的下標(biāo)。-1 表示沒有任何applied-action
 index: -1,
})
export default class AppHistory extends AppHistoryRecord {
 pop() { // 移除最后一項操作記錄
 return this
  .update('list', list => list.splice(this.index, 1))
  .update('index', x => x - 1)
 }
 getLastAction() { return this.index === -1 ? emptyAction : this.list.get(this.index) }
 getNextAction() { return this.list.get(this.index + 1, emptyAction) }
 apply(action: Action) {
 if (action === emptyAction) return this
 return this.merge({
  list: this.list.setSize(this.index + 1).push(action),
  index: this.index + 1,
  state: action.next(this.state),
 })
 }
 redo() {
 const action = this.getNextAction()
 if (action === emptyAction) return this
 return this.merge({
  list: this.list,
  index: this.index + 1,
  state: action.next(this.state),
 })
 }
 undo() {
 const action = this.getLastAction()
 if (action === emptyAction) return this
 return this.merge({
  list: this.list,
  index: this.index - 1,
  state: action.prev(this.state),
 })
 }
}

第四步：添加「撤銷重做」功能

假設(shè)應(yīng)用中的其他代碼已經(jīng)將網(wǎng)頁上的交互轉(zhuǎn)換為了一系列的 Action 對象，那么給應(yīng)用添上「撤銷重做」功能的大致代碼如下：

type HybridAction = undo | redo | Action
// 如果用Redux來管理狀態(tài)，那么使用下面的reudcer來管理那些「需要歷史記錄的狀態(tài)」
// 然后將該reducer放在應(yīng)用狀態(tài)樹中合適的位置
function reducer(history: AppHistory, action: HybridAction): AppHistory {
 if (action === undo) {
 return history.undo()
 } else if (action === redo) {
 return history.redo()
 } else { // 常規(guī)的 Action
 // 注意這里需要調(diào)用prepare方法，好讓該action「準(zhǔn)備好」
 return action.prepare(history).apply(action)
 }
}
// 如果是在 Stream/Observable 的環(huán)境下，那么像下面這樣使用 reducer
const action$: Stream<HybridAction> = generatedFromUserInteraction
const appHistory$: Stream<AppHistory> = action$.fold(reducer, new AppHistory())
const state$ = appHistory$.map(h => h.state)
// 如果是用回調(diào)函數(shù)的話，大概像這樣使用reducer
onActionHappen = function (action: HybridAction) {
 const nextHistory = reducer(getLastHistory(), action)
 updateAppHistory(nextHistory)
 updateState(nextHistory.state)
}

第五步：合并 Action，完善用戶交互體驗

通過上面這四個步驟，畫圖工具擁有了撤消重做功能，但是該功能用戶體驗并不好。在畫圖工具中拖動一個圖形時，MoveItemAction 的產(chǎn)生頻率和 mousemove 事件的發(fā)生頻率相同，如果我們不對該情況進(jìn)行處理，MoveItemAction 馬上會污染整個歷史記錄。我們需要合并那些頻率過高的 action，使得每個被記錄下來的 action 有合理的撤銷粒度。

每個 Action 在被應(yīng)用之前，其 prepare 方法都會被調(diào)用，我們可以在 prepare 方法中對歷史記錄進(jìn)行修改。例如，對于 MoveItemAction，我們判斷上一個 action 是否和當(dāng)前 action 屬于同一次移動操作，然后來決定在應(yīng)用當(dāng)前 action 之前是否移除上一個 action。代碼如下：

// actions/MoveItemAction.ts
export default class MoveItemAction extends Action {
 prevItem: Item
 // 一次圖形拖動操作可以由以下三個變量來進(jìn)行描述：
 // 拖動開始時鼠標(biāo)的位置(startPos)，拖動過程中鼠標(biāo)的位置(movingPos)，以及拖動的圖形的 ID
 constructor(readonly startPos: Point, readonly movingPos: Point, readonly itemId: number) {
 // 上一行中 readonly startPos: Point 相當(dāng)于下面兩步：
 // 1. 在MoveItemAction中定義startPos只讀字段
 // 2. 在構(gòu)造函數(shù)中執(zhí)行 this.startPos = startPos
 super()
 }
 prepare(history: AppHistory) {
 const lastAction = history.getLastAction()
 if (lastAction instanceof MoveItemAction && lastAction.startPos == this.startPos) {
  // 如果上一個action也是MoveItemAction，且拖動操作的鼠標(biāo)起點和當(dāng)前action相同
  // 則我們認(rèn)為這兩個action在同一次移動操作中
  this.prevItem = lastAction.prevItem
  return history.pop() // 調(diào)用pop方法來移除最近一個action
 } else {
  // 記錄圖形被移動之前的狀態(tài)，用于撤銷
  this.prevItem = history.state.items.get(this.itemId)
  return history
 }
 }
 next(state: State): State {
 const dx = this.movingPos.x - this.startPos.x
 const dy = this.movingPos.y - this.startPos.y
 const moved = this.prevItem.move(dx, dy)
 return state.setIn(['items', this.itemId], moved)
 }
 prev(state: State) {
 // 撤銷的時候我們直接使用已經(jīng)保存的prevItem即可
 return state.setIn(['items', this.itemId], this.prevItem)
 }
 getMessage() { /* ... */ }
}

從上面的代碼中可以看到，prepare 方法除了使 action 自身準(zhǔn)備好之外，它還可以讓歷史記錄準(zhǔn)備好。不同的 Action 類型有不同的合并規(guī)則，為每種 Action 實現(xiàn)合理的 prepare 函數(shù)之后，撤消重做功能的用戶體驗?zāi)軌虼蟠筇嵘?/p>

一些其他需要注意的地方

撤銷重做功能是非常依賴于不可變性的，一個 Action 對象在放入 AppHistory.list 之后，其所引用的對象都應(yīng)該是不可變的。如果 action 所引用的對象發(fā)生了變化，那么在后續(xù)撤銷時可能發(fā)生錯誤。本方案中，為了方便記錄操作發(fā)生時的一些必要信息，Action 對象的 prepare 方法中允許出現(xiàn)原地修改操作，但是 prepare 方法只會在 action 被放入歷史記錄之前調(diào)用一次，action 一旦進(jìn)入紀(jì)錄列表就是不可變的了。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Immutable.js如何實現(xiàn)撤銷重做功能”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

名稱欄目：Immutable.js如何實現(xiàn)撤銷重做功能
文章網(wǎng)址：http://www.muchs.cn/article34/jpcspe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站導(dǎo)航、響應(yīng)式網(wǎng)站、全網(wǎng)營銷推廣、網(wǎng)頁設(shè)計公司、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)