Immutable.js에서 실행 취소 및 다시 실행 효과를 구현하는 방법-JS 튜토리얼-php.cn

이번에는 Immutable.js를 사용하여 실행 취소 및 다시 실행 효과를 얻는 방법과 실행 취소 및 다시 실행 효과를 얻기 위해 Immutable.js에 어떤 notes이 있는지 보여 드리겠습니다. 살펴보자.

브라우저가 점점 더 강력해지고 있습니다. 원래 다른 클라이언트에서 제공했던 많은 기능이 점차 프런트엔드로 이전되었으며 프런트엔드 애플리케이션은 점점 더 복잡해지고 있습니다. 많은 프런트 엔드 애플리케이션, 특히 일부 온라인 편집 소프트웨어는 작업 중에 사용자 상호 작용을 지속적으로 처리해야 하며 원활한 상호 작용을 보장하기 위해 실행 취소 및 다시 실행 기능을 제공해야 합니다. 그러나 애플리케이션에 대한 실행 취소 및 다시 실행 기능을 구현하는 것은 쉬운 작업이 아닙니다. 공식 Redux 문서에는 Redux 애플리케이션에서 실행 취소 및 다시 실행 기능을 구현하는 방법이 소개되어 있습니다. Redux 기반의 실행 취소 기능은 하향식 솔루션입니다. 도입됨 redux-undo 之后所有的操作都变为了「可撤销的」，然后我们不断修改其配置使得撤销功能变得越来越好用（这也是 redux-undo 구성 항목이 많은 이유).

이 기사에서는 상향식 접근 방식을 채택하고 간단한 온라인 그리기 도구를 예로 들어 TypeScript 및 Immutable.js를 사용하여 실용적인 "실행 취소 및 다시 실행" 기능을 구현합니다. 대략적인 효과는 아래 그림과 같습니다:

1단계: 기록 기록이 필요한 주를 결정하고 사용자 정의 State 클래스를 만듭니다

모든 주에서 역사가 필요한 것은 아닙니다. 많은 상태는 매우 사소한데, 특히 마우스나 키보드 상호 작용과 관련된 상태입니다. 예를 들어 그리기 도구에서 그래픽을 드래그할 때 "드래그 진행 중" 표시를 설정해야 하며 페이지에 해당 드래그 프롬프트가 표시됩니다. , 드래그 표시는 기록에 표시되어서는 안 되며, 웹 페이지 창 크기, 백그라운드로 전송된 요청 목록 등과 같은 다른 상태는 취소할 수 없거나 취소할 필요가 없습니다.

기록이 필요하지 않은 상태를 제외하고 나머지 상태를 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 클래스에는 세 개의 필드가 포함되어 있으며 항목은 그려진 그래픽을 기록하고 변환하는 데 사용됩니다. 대지의 이동 및 확대/축소 상태를 기록하는 데 사용되며 선택 항목은 현재 선택된 그래픽을 나타냅니다. ID. 그래픽 그리기 미리보기, 자동 정렬 구성, 작업 프롬프트 텍스트 등과 같은 그리기 도구의 다른 상태는 State 클래스에 배치되지 않습니다.

2단계: Action 기본 클래스를 정의하고 각 작업에 해당하는 Action 하위 클래스를 만듭니다.

redux-undo와 달리 우리는 여전히 명령 모드를 사용합니다. 기본 클래스 Action을 정의하고 State에 대한 모든 작업은 Action의 인스턴스로 캡슐화되며 다양한 작업 유형에 해당하는 Action의 여러 하위 클래스를 정의합니다.

TypeScript에서는 Abstract Class를 사용하여 Action 기본 클래스를 정의하는 것이 더 편리합니다.

rreee

Action 객체의 next 메소드는 "다음 상태"를 계산하는데 사용되고, prev 메소드는 "이전 상태"를 계산하는데 사용됩니다. getMessage 메소드는 다음을 얻기 위해 사용됩니다. Action 객체에 대한 간단한 설명입니다. getMessage를 통해 방법을 사용하면 사용자의 작업 기록을 페이지에 표시하여 사용자가 최근에 발생한 일을 더 쉽게 이해할 수 있습니다. 준비 메소드는 Action에서 사용됩니다. 처음 사용하기 전에 "준비" 상태로 만드세요. AppHistory의 정의는 이 글의 뒷부분에서 설명하겠습니다.

Action 하위 클래스 예

다음 AddItemAction은 "새 그래픽 추가"를 표현하는 데 사용되는 일반적인 Action 하위 클래스입니다.

rreee

런타임 동작

애플리케이션이 실행 중일 때 사용자 상호 작용은 Action 개체가 생성될 때마다 개체의 다음 메서드를 호출하여 다음 상태를 계산한 다음 추가합니다. 작업은 나중에 사용할 수 있도록 목록에 저장됩니다. 사용자가 실행 취소 작업을 수행하면 작업 목록에서 가장 최근 작업을 가져와서 이전 작업을 호출합니다. 방법. 애플리케이션이 실행 중일 때 next/prev 메소드는 다음과 같이 호출됩니다.

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

로그인 후 복사

다음 설명을 용이하게 하기 위해 Applied-Action을 간단히 정의합니다. 해당 액션의 다음 메소드가 실행될 때 현재 애플리케이션 상태에 작업 결과가 반영된 액션을 말합니다. prev 메소드가 실행되면 액션이 적용되지 않습니다.

第三步：创建历史记录容器 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),
 })
 }
}

로그인 후 복사

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

假设应用中的其他代码已经将网页上的交互转换为了一系列的 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 一旦进入纪录列表就是不可变的了。

总结

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

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