javascript - 避免简单增量器中的状态

Question

我正在尝试使用 JavaScript 函数式编程技术来避免状态。我扎实掌握了许多基本的 fp 技术，例如闭包、柯里化(Currying)等。但我无法全神贯注地处理状态。

我想知道创建功能程序的人将如何实现以下非常简单的应用程序:

用户单击浏览器中的按钮(jQuery 实现很好)。每次用户单击按钮时，屏幕上的值应增加 1。

我们如何在不改变状态的情况下做到这一点？如果突变状态是必要的，从功能的 Angular 来看，最好的方法是什么？

Answer 1

以下是您将如何实现一个简单的计数器应用程序而不改变除 DOM 之外的任何内容的方法。

const h1 = document.querySelector("h1");

const [decrement, reset, increment] = document.querySelectorAll("button");

const render = count => {
    h1.innerHTML = count; // output
    decrement.onclick = event => render(count - 1); // -+
    reset.onclick     = event => render(0);         //  |-- transition functions
    increment.onclick = event => render(count + 1); // -+
};

render(0);
//     ^
//     |
//     +-- initial state

<h1></h1>
<button>-</button>
<button>Reset</button>
<button>+</button>

这是 Moore machine 的示例.摩尔机是 finite-state machine .它由三件事组成。

机器的初始状态。在我们的例子中，初始状态是 0 .

一个给定当前状态和一些输入的转换函数产生一个新状态。

给定当前状态的输出函数会产生一些输出。

在我们的例子中，我们将转换函数和输出函数组合成一个 render功能。这是可能的，因为转换函数和输出函数都需要当前状态。
当为渲染函数提供当前状态时，它会产生一些输出以及一个转换函数，当提供一些输入时，它会产生一个新状态并更新状态机。
在我们的例子中，我们将转换函数划分为多个共享当前状态的转换函数。

我们还可以使用事件委托(delegate)来提高性能。在下面的示例中，我们只在整个文档上注册了一个点击事件监听器。当用户点击文档中的任意位置时，我们检查目标元素是否有 onClick方法。如果是，我们将其应用于事件。
接下来，在 render函数而不是单独注册 onclick每个按钮的监听器，我们将它们存储为名为 onClick 的常规方法(不同的情况)。这更高效，因为我们没有注册多个事件监听器，这会降低应用程序的速度。

const h1 = document.querySelector("h1");

const [decrement, reset, increment] = document.querySelectorAll("button");

const render = count => {
    h1.innerHTML = count;
    decrement.onClick = event => render(count - 1);
    reset.onClick     = event => render(0);
    increment.onClick = event => render(count + 1);
};

render(0);

document.addEventListener("click", event => {
    if (typeof event.target.onClick === "function") {
        event.target.onClick(event);
    }
});

<h1></h1>
<button>-</button>
<button>Reset</button>
<button>+</button>