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`));