So implementieren Sie die Rückgängig- und Wiederherstellungsfunktion in Immutable.js (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich die auf Immutable.js basierende Funktion zum Rückgängigmachen und Wiederherstellen vorgestellt, und einige Dinge, die Aufmerksamkeit erfordern, können darauf verwiesen werden

Die Funktionen von Browsern werden immer leistungsfähiger und viele von ihnen wurden ursprünglich von anderen entwickelt. Die vom Client bereitgestellten Funktionen werden nach und nach auf das Front-End übertragen und Front-End-Anwendungen werden immer komplexer. Viele Front-End-Anwendungen, insbesondere einige Online-Bearbeitungssoftware, müssen Benutzerinteraktionen während der Ausführung kontinuierlich verarbeiten und eine Rückgängig- und Wiederherstellungsfunktion bereitstellen, um eine reibungslose Interaktion sicherzustellen. Allerdings ist die Implementierung der Rückgängig- und Wiederherstellungsfunktion für eine Anwendung keine leichte Aufgabe. In der offiziellen Redux-Dokumentation wird vorgestellt, wie die Rückgängig- und Wiederherstellungsfunktion in Redux-Anwendungen implementiert wird. Die auf Redux basierende Rückgängig-Funktion ist eine Top-Down-Lösung: Nach der Einführung von redux-undo werden alle Vorgänge „rückgängig gemacht“, und dann ändern wir ihre Konfiguration weiter, um die Rückgängig-Funktion immer benutzerfreundlicher zu machen (dies ist auch der Fall). redux-undo Der Grund, warum es so viele Konfigurationselemente gibt).

In diesem Artikel wird ein Bottom-up-Ansatz verfolgt, ein einfaches Online-Zeichentool als Beispiel genommen und TypeScript und Immutable.js verwendet, um eine praktische „Rückgängig- und Wiederherstellungs“-Funktion zu implementieren. Der ungefähre Effekt ist in der folgenden Abbildung dargestellt:

Schritt 1: Bestimmen Sie, welche Bundesstaaten historische Aufzeichnungen erfordern, und erstellen Sie eine benutzerdefinierte State-Klasse

Nicht alle Bundesstaaten verlangen eine Historie. Viele Zustände sind sehr trivial, insbesondere solche im Zusammenhang mit der Maus- oder Tastaturinteraktion. Wenn wir beispielsweise eine Grafik im Zeichenwerkzeug ziehen, müssen wir eine „Drag-in-Progress“-Markierung setzen und auf der Seite wird die entsprechende Drag-Eingabeaufforderung angezeigt , natürlich sollte die Drag-Markierung nicht im Verlauf erscheinen; und andere Zustände können nicht widerrufen werden oder müssen nicht widerrufen werden, wie z. B. die Fenstergröße der Webseite, die Liste der an den Hintergrund gesendeten Anforderungen usw.

Mit Ausnahme der Zustände, die keine Verlaufsdatensätze erfordern, kapseln wir die übrigen Zustände mit Immutable Record und definieren die Zustandsklasse:

// 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 {}

Our Als Beispiel handelt es sich hier um ein einfaches Online-Zeichentool. Die obige State-Klasse enthält drei Felder, die zum Aufzeichnen der gezeichneten Grafiken verwendet werden, und „transform“ dient zum Aufzeichnen des Schwenk- und Zoomstatus der Zeichenfläche, und „selection“ gibt die aktuelle Auswahl an der Grafik. Andere Zustände im Zeichentool, wie z. B. grafische Zeichnungsvorschau, automatische Ausrichtungskonfiguration, Eingabeaufforderungstext usw., werden nicht in der Statusklasse platziert.

Schritt 2: Definieren Sie die Action-Basisklasse und erstellen Sie entsprechende Action-Unterklassen für jede unterschiedliche Operation

Im Gegensatz zu Redux-Undo übernehmen wir immer noch den Befehlsmodus: Definieren Sie die Die Basisklasse Action und alle Operationen auf State sind als Instanzen von Action gekapselt. Sie definieren mehrere Unterklassen von Action, die verschiedenen Arten von Operationen entsprechen.

In TypeScript ist es bequemer, die Action-Basisklasse mit Abstract Class zu definieren.

// 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 }
}

Die next-Methode des Action-Objekts wird zur Berechnung des „nächsten Zustands“ und die prev-Methode zur Berechnung des „vorherigen Zustands“ verwendet. Die getMessage-Methode wird verwendet, um eine kurze Beschreibung des Action-Objekts zu erhalten. Mithilfe der getMessage-Methode können wir die Vorgangsaufzeichnungen des Benutzers auf der Seite anzeigen, sodass Benutzer leichter verstehen können, was kürzlich passiert ist. Mit der Prepare-Methode wird die Aktion „vorbereitet“, bevor sie zum ersten Mal angewendet wird. Die Definition von AppHistory wird später in diesem Artikel gegeben.

Beispiel für eine Action-Unterklasse

Die folgende AddItemAction ist eine typische Action-Unterklasse, die verwendet wird, um „eine neue Grafik hinzufügen“ auszudrücken.

// actions/AddItemAction.ts
export default class AddItemAction extends Action {
 newItem: Item
 prevSelection: number
 constructor(newItem: Item) {
 super()
 this.newItem = newItem
 }
 prepare(history: AppHistory) {
 // 创建新的图形后会自动选中该图形，为了使得撤销该操作时 state.selection 变为原来的值
 // 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}` }
}

Laufzeitverhalten

Wenn die Anwendung ausgeführt wird, generiert die Benutzerinteraktion eine Aktion flow: Jedes Mal, wenn ein Aktionsobjekt generiert wird, rufen wir die nächste Methode des Objekts auf, um den nächsten Status zu berechnen, und speichern die Aktion dann zur späteren Verwendung in einer Liste. Wenn der Benutzer einen Rückgängig-Vorgang ausführt, übernehmen wir die neueste Aktion die Aktionsliste und rufen Sie ihre vorherige Methode auf. Wenn die Anwendung ausgeführt wird, wird die nächste/vorherige Methode ungefähr wie folgt aufgerufen:

// initState 是一开始就给定的应用初始状态
// 某一时刻，用户交互产生了 action1 ...
state1 = action1.next(initState)
// 又一个时刻，用户交互产生了 action2 ...
state2 = action2.next(state1)
// 同样的，action3也出现了 ...
state3 = action3.next(state2)
// 用户进行撤销，此时我们需要调用最近一个action的prev方法
state4 = action3.prev(state3)
// 如果再次进行撤销，我们从action列表中取出对应的action，调用其prev方法
state5 = action2.prev(state4)
// 重做的时候，取出最近一个被撤销的action，调用其next方法
state6 = action2.next(state5)
Applied-Action

Um die folgende Erklärung zu erleichtern, erstellen wir eine einfache Definition von Angewandte Aktion: Angewandte Aktion bezieht sich auf die Aktionen, deren Operationsergebnisse sich im aktuellen Anwendungsstatus widerspiegeln. Wenn die nächste Methode der Aktion ausgeführt wird, wird die Aktion angewendet, wenn die vorherige Methode ausgeführt wird.

Schritt 3: Erstellen Sie den Verlaufscontainer AppHistory

Die vorherige State-Klasse wird verwendet, um den Status der Anwendung zu einem bestimmten Zeitpunkt darzustellen. Als nächstes definieren wir die AppHistory Klasse zur Darstellung des App-Verlaufs. Ebenso verwenden wir immer noch Immutable Record, um Verlaufsdatensätze zu definieren. Das Statusfeld wird verwendet, um den aktuellen Anwendungsstatus auszudrücken, das Listenfeld wird zum Speichern aller Aktionen verwendet und das Indexfeld wird verwendet, um den Index der zuletzt angewendeten Aktion aufzuzeichnen. Der historische Status der Anwendung kann über die Undo/Redo-Methode berechnet werden. Die apply-Methode wird verwendet, um bestimmte Aktionen zur AppHistory hinzuzufügen und auszuführen. Der spezifische Code lautet wie folgt:

// AppHistory.ts
const emptyAction = Symbol('empty-action')
export const undo = Symbol('undo')
export type undo = typeof undo // TypeScript2.7之后对symbol的支持大大增强
export const redo = Symbol('redo')
export type redo = typeof redo
const AppHistoryRecord = Record({
 // 当前应用状态
 state: new State(),
 // action 列表
 list: List<Action>(),
 // index 表示最后一个applied-action在list中的下标。-1 表示没有任何applied-action
 index: -1,
})
export default class AppHistory extends AppHistoryRecord {
 pop() { // 移除最后一项操作记录
 return this
  .update(&#39;list&#39;, list => list.splice(this.index, 1))
  .update(&#39;index&#39;, 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),
 })
 }
}

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

假设应用中的其他代码已经将网页上的交互转换为了一系列的 Action 对象，那么给应用添上「撤销重做」功能的大致代码如下：

type HybridAction = undo | redo | Action
// 如果用Redux来管理状态，那么使用下面的reudcer来管理那些「需要历史记录的状态」
// 然后将该reducer放在应用状态树中合适的位置
function reducer(history: AppHistory, action: HybridAction): AppHistory {
 if (action === undo) {
 return history.undo()
 } else if (action === redo) {
 return history.redo()
 } else { // 常规的 Action
 // 注意这里需要调用prepare方法，好让该action「准备好」
 return action.prepare(history).apply(action)
 }
}
// 如果是在 Stream/Observable 的环境下，那么像下面这样使用 reducer
const action$: Stream<HybridAction> = generatedFromUserInteraction
const appHistory$: Stream<AppHistory> = action$.fold(reducer, new AppHistory())
const state$ = appHistory$.map(h => h.state)
// 如果是用回调函数的话，大概像这样使用reducer
onActionHappen = function (action: HybridAction) {
 const nextHistory = reducer(getLastHistory(), action)
 updateAppHistory(nextHistory)
 updateState(nextHistory.state)
}

第五步：合并 Action，完善用户交互体验

通过上面这四个步骤，画图工具拥有了撤消重做功能，但是该功能用户体验并不好。在画图工具中拖动一个图形时，MoveItemAction 的产生频率和 mousemove 事件的发生频率相同，如果我们不对该情况进行处理，MoveItemAction 马上会污染整个历史记录。我们需要合并那些频率过高的 action，使得每个被记录下来的 action 有合理的撤销粒度。

每个 Action 在被应用之前，其 prepare 方法都会被调用，我们可以在 prepare 方法中对历史记录进行修改。例如，对于 MoveItemAction，我们判断上一个 action 是否和当前 action 属于同一次移动操作，然后来决定在应用当前 action 之前是否移除上一个 action。代码如下：

// actions/MoveItemAction.ts
export default class MoveItemAction extends Action {
 prevItem: Item
 // 一次图形拖动操作可以由以下三个变量来进行描述：
 // 拖动开始时鼠标的位置(startPos)，拖动过程中鼠标的位置(movingPos)，以及拖动的图形的 ID
 constructor(readonly startPos: Point, readonly movingPos: Point, readonly itemId: number) {
 // 上一行中 readonly startPos: Point 相当于下面两步：
 // 1. 在MoveItemAction中定义startPos只读字段
 // 2. 在构造函数中执行 this.startPos = startPos
 super()
 }
 prepare(history: AppHistory) {
 const lastAction = history.getLastAction()
 if (lastAction instanceof MoveItemAction && lastAction.startPos == this.startPos) {
  // 如果上一个action也是MoveItemAction，且拖动操作的鼠标起点和当前action相同
  // 则我们认为这两个action在同一次移动操作中
  this.prevItem = lastAction.prevItem
  return history.pop() // 调用pop方法来移除最近一个action
 } else {
  // 记录图形被移动之前的状态，用于撤销
  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) {
 // 撤销的时候我们直接使用已经保存的prevItem即可
 return state.setIn(['items', this.itemId], this.prevItem)
 }
 getMessage() { /* ... */ }
}

从上面的代码中可以看到，prepare 方法除了使 action 自身准备好之外，它还可以让历史记录准备好。不同的 Action 类型有不同的合并规则，为每种 Action 实现合理的 prepare 函数之后，撤消重做功能的用户体验能够大大提升。

一些其他需要注意的地方

撤销重做功能是非常依赖于不可变性的，一个 Action 对象在放入 AppHistory.list 之后，其所引用的对象都应该是不可变的。如果 action 所引用的对象发生了变化，那么在后续撤销时可能发生错误。本方案中，为了方便记录操作发生时的一些必要信息，Action 对象的 prepare 方法中允许出现原地修改操作，但是 prepare 方法只会在 action 被放入历史记录之前调用一次，action 一旦进入纪录列表就是不可变的了。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

vue页面离开后执行函数的实例

vue轮播图插件vue-concise-slider的使用

vue加载自定义的js文件方法

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Rückgängig- und Wiederherstellungsfunktion in Immutable.js (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!