So implementieren Sie den Rückgängig- und Wiederherstellungseffekt in Immutable.js-js-Tutorial-php.cn

Dieses Mal zeige ich Ihnen, wie Sie den Undo- und Redo-Effekt mit Immutable.js erzielen. Welche Vorsichtsmaßnahmen gibt es für die Implementierung des Undo- und Redo-Effekts mit Immutable? .js. Hier sehen wir uns praktische Fälle an.

Browser werden immer leistungsfähiger. Viele ursprünglich von anderen Clients bereitgestellte Funktionen werden nach und nach auf das Frontend übertragen und Frontend-Anwendungen werden immer komplexer. Viele Front-End-Anwendungen, insbesondere einige Online-Bearbeitungssoftware, müssen Benutzerinteraktionen während des Betriebs 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 erläutert, 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 Funktion zum Rückgängigmachen und Wiederherstellen zu implementieren. Der ungefähre Effekt ist wie folgt:

Schritt eins: Bestimmen Sie, welche Bundesstaaten Verlaufsdatensätze erfordern, und erstellen Sie eine benutzerdefinierte State-Klasse

Nicht alle Staaten erfordern eine Geschichte. 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 keinen Verlauf erfordern, kapseln wir die verbleibenden 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 {}

Nach dem Login kopieren

Unser Beispiel hier ist ein einfaches Online-Zeichentool, daher enthält die obige State-Klasse drei Felder, die zum Aufzeichnen und Transformieren der gezeichneten Grafiken verwendet werden Wird zum Aufzeichnen des Schwenk- und Zoomstatus der Zeichenfläche verwendet. Die Auswahl stellt die aktuell ausgewählte Grafik dar. AUSWEIS. 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 verwenden wir immer noch den Befehlsmodus: Definieren Sie die Basisklasse Action, und alle Operationen für State werden als Instanz von Action gekapselt, um mehrere Unterklassen von Action zu definieren, die verschiedenen Operationstypen 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 }
}

Nach dem Login kopieren

Die next-Methode des Action-Objekts wird zur Berechnung des „nächsten Zustands“ und die prev-Methode zur Berechnung des „vorherigen Zustands“ verwendet. Zum Abrufen wird die getMessage-Methode verwendet Eine kurze Beschreibung des Action-Objekts. über getMessage Mit dieser Methode können wir die Vorgangsaufzeichnungen des Benutzers auf der Seite anzeigen, sodass Benutzer leichter verstehen können, was kürzlich passiert ist. Die Prepare-Methode wird in Action verwendet Machen Sie es „bereit“, bevor Sie es zum ersten Mal verwenden. Die Definition von AppHistory wird später in diesem Artikel gegeben.

Beispiel für eine Aktionsunterklasse

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

Nach dem Login kopieren

Laufzeitverhalten

Wenn die Anwendung ausgeführt wird, generiert die Benutzerinteraktion einen Aktionsstrom. Jedes Mal, wenn ein Aktionsobjekt generiert wird, rufen wir die nächste Methode des Objekts auf, um den nächsten Status zu berechnen, und fügen dann den hinzu Die Aktion wird zur späteren Verwendung in einer Liste gespeichert; wenn der Benutzer einen Rückgängig-Vorgang ausführt, nehmen wir die letzte Aktion aus der Aktionsliste und rufen deren vorherige Aktion auf Verfahren. Wenn die Anwendung ausgeführt wird, wird die nächste/vorherige Methode 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

Nach dem Login kopieren

Um die folgende Erklärung zu erleichtern, definieren wir Applied-Action einfach: Applied-Action 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, wird die Aktion nicht mehr angewendet.

第三步：创建历史记录容器 AppHistory

前面的 State 类用于表示某个时刻应用的状态，接下来我们定义 AppHistory 类用来表示应用的历史记录。同样的，我们仍然使用 Immutable Record 来定义历史记录。其中 state 字段用来表达当前的应用状态，list 字段用来存放所有的 action，而 index 字段用来记录最近的 applied-action 的下标。应用的历史状态可以通过 undo/redo 方法计算得到。apply 方法用来向 AppHistory 中添加并执行具体的 Action。具体代码如下：

// 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('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),
 })
 }
}

Nach dem Login kopieren

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

假设应用中的其他代码已经将网页上的交互转换为了一系列的 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)
}

Nach dem Login kopieren

第五步：合并 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() { /* ... */ }
}

Nach dem Login kopieren

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

一些其他需要注意的地方

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

总结

以上就是实现一个实用的撤销重做功能的所有步骤了。不同的前端项目有不同的需求和技术方案，有可能上面的代码在你的项目中一行也用不上；不过撤销重做的思路应该是相同的，希望本文能够给你带来一些启发。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！