javascript - JavaScript 中的函数式编程 - 事件

Question

我已经阅读了大量关于函数式编程优点的文章，并且正在尝试编写一些代码来遵循可能被认为是函数式编程的内容。不变性、纯函数、局部状态等

我遇到的具体问题如下所示。我不确定是否有某种方法可以在不违反这些规则的情况下做我想做的事。我想我是来找答案的。

let mouseDown = false;

document.addEventListener('mousedown', () => mouseDown = true);
document.addEventListener('mouseup', () => mouseDown = false);
document.addEventListener('mousemove', e => {
  if (mouseDown) console.log({ x: e.movementX, y: e.movementY });
});

在使用 OOP 10 多年之后，我发现很难掌握 FP。然而，这不是重点。

所以，我的问题是:

1. 是否有使用函数式编程来解决这个特定问题的更好方法？
2. 我们是否应该担心无处不在使用函数式编程？

Answer 1

Rxjs 将适合这里的代码

http://reactivex.io/rxjs/manual/overview.html

通常您会注册事件监听器。

var button = document.querySelector('button');
button.addEventListener('click', () => console.log('Clicked!'));

使用 RxJS，您可以创建一个可观察对象。

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .subscribe(() => console.log('Clicked!'));

RxJS 之所以强大，是因为它能够使用纯函数生成值。这意味着您的代码不太容易出错。

纯度

var count = 0;
var button = document.querySelector('button');
button.addEventListener('click', () => console.log(`Clicked ${++count} times`));

使用 RxJS 可以隔离状态。

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .scan(count => count + 1, 0)
  .subscribe(count => console.log(`Clicked ${count} times`));