使用 RxJS 模拟命令队列和撤消堆栈

Question

我正在尝试使用 RxJS 复制 这个演示。该演示是一个小型应用程序，用户可以在其中控制机器人。机器人可以向前或向后移动、向左或向右旋转以及拾起或放下物品。用户可以对命令进行排队（例如“前进”、“旋转”），并且当用户单击“执行”按钮时执行队列中的命令。用户还可以撤消已经执行的命令。

传统上，使用尚未执行的命令的队列来实现此应用程序非常容易。执行的命令被推入堆栈，每当按下撤消按钮时，顶部命令就会弹出并撤消。

我能够“收集”命令并通过这样做来执行它们：

var id = 0;
var add = Rx.Observable.fromEvent($("#add"), 'click').map(function(){
  var ret = "Command_"+id;
  id++;
  return ret
})
var invoke = Rx.Observable.fromEvent($("#invoke"), 'click')
var invokes = add.buffer(invoke)

buffer() 方法将流转换为数组流。我可以订阅调用流并获取命令数组：

invokes.subscribe(function(command_array){...})

或者我可以创建一个 Rx.Subject() ，我只需将命令一一推送：

var invoked_commands = new Rx.Subject()
invokes.subscribe(function(command_array){
  for(var i=0; i < command_array.length; i++){
    invoked_commands.onNext(command_array[i])
  }
});

invoked_commands.subscribe(function(command){ ...});

说实话，我不知道哪种方法更好，但我又不知道这是否与我现在太相关。我一直在试图弄清楚如何实现撤消功能，但我完全不知道如何做到这一点。

在我看来，它必须是这样的（抱歉格式）：

-c1---c2-c3--------->

----------------u---u->（“u”=单击撤消按钮）

----------------c3--c2>（从最新到最旧获取命令，调用undo()方法）

所以我的问题是双重的：

1. 我收集命令的方法好吗？
2. 如何实现撤消功能？

编辑：我正在比较变革性风格和反应性风格，并且我正在使用这两种风格来实现这个演示。因此，我想尽可能坚持使用 Rx* 功能。

Answer 1

您必须继续维护撤消堆栈的状态。我认为你收集命令的方法是合理的。如果您保留

Subject

，您可以通过对该主题进行另一个订阅来将撤消功能与命令执行分离：

var undoQueue = [];
invoked_commands.subscribe(function (c) { undoQueue.unshift(c); });
Rx.Observable
    .fromEvent($("#undo"), "click")
    .map(function () { return undoQueue.pop(); })
    .filter(function (command) { return command !== undefined; })
    .subscribe(function (command) { /* undo command */ });

编辑：仅使用 Rx，而不使用可变数组。这看起来不必要地复杂，但是哦，它很实用。我们使用

scan

来维护撤消队列，并发出一个包含当前队列以及是否应执行撤消命令的元组。我们将执行的命令与撤消事件合并。执行命令添加到队列中，撤消事件从队列中弹出。

var undo = Rx.Observable
    .fromEvent($("#undo"), "click")
    .map(function () { return "undo"; });
invoked_commands
    .merge(undo)
    .scan({ undoCommand: undefined, q: [] }, function (acc, value) {
        if (value === "undo") {
            return { undoCommand: acc.q[0], q: acc.q.slice(1) };
        }

        return { undoCommand: undefined, q: [value].concat(acc.q) };
     })
     .pluck("undoCommand")
     .filter(function (c) { return c !== undefined })
     .subscribe(function (undoCommand) { ... });

Answer 2

我刚刚创建了类似的东西，尽管有点复杂。 也许它对某人有帮助。

  // Observable for all keys
  const keypresses = Rx.Observable
    .fromEvent(document, 'keydown')

  // Undo key combination was pressed
  //  mapped to function that undoes the last accumulation of pressed keys
  const undoPressed = keypresses
    .filter(event => event.metaKey && event.key === 'z')
    .map(() => (acc) => acc.slice(0, isEmpty(last(acc)) && -2 || -1).concat([[]]))

  // a 'simple' key was pressed
  const inputChars = keypresses
    .filter(event => !event.altKey && !event.metaKey && !event.ctrlKey)
    .map(get('key'))
    .filter(key => key.length === 1)

  // the user input, respecting undo
  const input = inputChars
    .map((char) => (acc) =>
      acc.slice(0, -1).concat(
        acc.slice(-1).pop().concat(char)
      )
    ) // map input keys to functions that append them to the current list
    .merge(undoPressed)
    .merge(
      inputChars
        .auditTime(1000)
        .map(() => (acc) => isEmpty(last(acc)) && acc || acc.concat([[]]))
    ) // creates functions, that start a new accumulator 1 sec after the first key of a stroke was pressed
    .scan(
      (acc, f) => f(acc),
      [[]],
    ) // applies the merged functions to a list of accumulator strings
    .map(join('')) // join string
    .distinctUntilChanged() // ignore audit event, because it doesn't affect the current string

Answer 3

先DIY一下真是太好了。但是，在了解之后，您可能希望从现有的（经过测试的、通用的、可重用的……）包中受益，以节省一些时间并确保稳定性：

rx-不可撤销

---