乐趣区

关于javascript:微信使用H5公众号Nanny-State在飞鸟JavaScript中进行盘口搭建简单的状态管理上

jiezi

​
【TG_duoteJG】多特工作室杰哥 duotee 版权所有，禁止转载

公众号 H5 搭建 Nanny State 是我编写的一个 GT 江湖小型库，旨在帮忙盘口搭建应用 Vanilla JS 轻松构建基于微信飞鸟状态的 H5 扫码 Web 应用程序。它相似于微投 React，但开销要少得多，并且须要学习新的特斯拉语法。它还应用单个防封应用程序范畴的公众号状态对象，而不是每个独自的组件都有本人的修复保护状态。它受到 HyperApp 的启发，与 Elm 有许多相似之处。

在这篇文章中，我将解释 Nanny State 的工作原理，而后通过几个示例演示它能够做什么。

单向数据流
Nanny State 应用单向数据流模型，由 3 个局部组成：

状态 ——存储所有利用数据的对象
View  – 依据以后状态返回一串 HTML 的函数
更新 ——一个函数，它是扭转状态和从新渲染视图的惟一办法

在 Nanny State，国家就是所有。状态对象是应用程序的惟一实在起源——应用程序数据的每一位都是该对象的属性。甚至视图中应用的事件处理程序也是状态对象的办法。

视图是将状态示意为 HTML。它会在状态发生变化时发生变化，并容许用户与应用程序交互。

Update 函数是扭转状态的惟一办法。它是更新状态的繁多入口点，并确保更改是确定性的、统一的和可预测的。

这 3 件事是您在 Nanny State 中构建应用程序所需的全部内容。其实能够通过问本人以下 3 个问题来总结：

我须要在我的应用程序中存储哪些数据？这将形成 State 对象的属性
我心愿如何在页面上显示利用数据？这将帮忙您创立 View 函数
当用户与之交互时，利用数据将如何变动？Update 为此将须要该 性能
你好保姆州！
理解 Nanny State 如何工作的最简略办法是编写一些代码！咱们将从一个根本示例开始，而后尝试使一些更简单的货色。

运行以下示例最简略的办法是应用 CodePen 等在线代码编辑器，或者您能够通过 nanny-state 应用 NodeJS 安装包在本地运行它。

将以下代码复制到 CodePen 的 JS 局部：

<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">import <span style="color:#c792ea">{</span> Nanny<span style="color:#c792ea">,</span>html <span style="color:#c792ea">}</span> from <span style="color:#c3e88d">'https://cdn.skypack.dev/nanny-state'</span><span style="color:#c792ea">;</span>

const <span style="color:#82aaff">View</span> <span style="color:#89ddff">=</span> state <span style="color:#89ddff">=></span> html<span style="color:#c3e88d">`</span><span style="color:#ff5572"><span style="color:#ff5572"><span style="color:#c792ea"><</span>h1</span><span style="color:#c792ea">></span></span>Hello <span style="color:#c792ea">${</span>state<span style="color:#c792ea">.</span>name<span style="color:#c792ea">}</span><span style="color:#ff5572"><span style="color:#ff5572"><span style="color:#c792ea"></</span>h1</span><span style="color:#c792ea">></span></span><span style="color:#c3e88d">`</span>

const State <span style="color:#89ddff">=</span> <span style="color:#c792ea">{</span>
  name<span style="color:#89ddff">:</span> <span style="color:#c3e88d">"Nanny State"</span><span style="color:#c792ea">,</span>
  View
<span style="color:#c792ea">}</span>

const Update <span style="color:#89ddff">=</span> <span style="color:#82aaff">Nanny</span><span style="color:#c792ea">(</span>State<span style="color:#c792ea">)</span>
</code></span></span>

这显示了 Nanny-State 的 3 个局部如何协同工作。让咱们别离认真看看每个局部：


<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">const <span style="color:#82aaff">View</span> <span style="color:#89ddff">=</span> state <span style="color:#89ddff">=></span> html<span style="color:#c3e88d">`</span><span style="color:#ff5572"><span style="color:#ff5572"><span style="color:#c792ea"><</span>h1</span><span style="color:#c792ea">></span></span>Hello <span style="color:#c792ea">${</span>state<span style="color:#c792ea">.</span>name<span style="color:#c792ea">}</span><span style="color:#ff5572"><span style="color:#ff5572"><span style="color:#c792ea"></</span>h1</span><span style="color:#c792ea">></span></span><span style="color:#c3e88d">`</span>
</code></span></span>

Nanny state 应用 µhtml 来出现 HTML。该 View 函数 始终 承受状态对象作为其 惟一 参数。而后它应用 html µhtml 提供的函数依据作为参数提供的模板文字创立 HTML。

应用模板字面量意味着咱们能够应用 ${variable} 符号将状态的属性插入到视图中。在这个例子中，咱们应用它 在 元素 name 内插入属性 的值。`

<h1>

<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">const State <span style="color:#89ddff">=</span> <span style="color:#c792ea">{</span>
  name<span style="color:#89ddff">:</span> <span style="color:#c3e88d">"Nanny State"</span><span style="color:#c792ea">,</span>
  View
<span style="color:#c792ea">}</span>
</code></span></span>

该 State 对象是 所有 应用程序数据的存储地位。View 它包含将在应用程序的生命周期中 显示并可能更改的任何属性和值，例如 name 本示例中的属性。

请留神，这 View 也是 State using 对象速记符号的一个属性。请记住，状态就是所有 ——应用程序的每个局部都是状态的属性。


<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">const Update <span style="color:#89ddff">=</span> <span style="color:#82aaff">Nanny</span><span style="color:#c792ea">(</span>State<span style="color:#c792ea">)</span>
</code></span></span>

最初一行将函数定义为 Update 函数的返回值 Nanny。这当初可用于更新 State. 事实上，这是  能够更新 任何属性 的惟一办法。State 它还 View 依据 State. 这意味着将显示一个题目，下面写着“Hello Nanny State”，如上面的 CodePen 所示：

你好保姆州

这个例子基本上只是一个动态页面。让咱们通过增加一个输入框来使其动态化，该输入框容许用户输出他们想要打招呼的名字。更新代码，使其如下所示：


<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">import <span style="color:#c792ea">{</span> Nanny<span style="color:#c792ea">,</span>html <span style="color:#c792ea">}</span> from <span style="color:#c3e88d">'https://cdn.skypack.dev/nanny-state'</span><span style="color:#c792ea">;</span>

const <span style="color:#82aaff">View</span> <span style="color:#89ddff">=</span> state <span style="color:#89ddff">=></span> html<span style="color:#c3e88d">`</span><span style="color:#ff5572"><span style="color:#ff5572"><span style="color:#c792ea"><</span>h1</span><span style="color:#c792ea">></span></span>Hello <span style="color:#c792ea">${</span>state<span style="color:#c792ea">.</span>name<span style="color:#c792ea">}</span><span style="color:#ff5572"><span style="color:#ff5572"><span style="color:#c792ea"></</span>h1</span><span style="color:#c792ea">></span></span><span style="color:#ff5572"><span style="color:#ff5572"><span style="color:#c792ea"><</span>input</span> <span style="color:#ffcb6b">oninput</span><span style="color:#ff5572"><span style="color:#c792ea">=</span><span style="color:#c792ea">${</span>state<span style="color:#c792ea">.</span>changeName<span style="color:#c792ea">}</span></span><span style="color:#c792ea">></span></span><span style="color:#c3e88d">`</span>

const <span style="color:#82aaff">changeName</span> <span style="color:#89ddff">=</span> event <span style="color:#89ddff">=></span> <span style="color:#82aaff">Update</span><span style="color:#c792ea">(</span><span style="color:#c792ea">{</span>name<span style="color:#89ddff">:</span> event<span style="color:#c792ea">.</span>target<span style="color:#c792ea">.</span>value<span style="color:#c792ea">}</span><span style="color:#c792ea">)</span>

const State <span style="color:#89ddff">=</span> <span style="color:#c792ea">{</span>
  name<span style="color:#89ddff">:</span> <span style="color:#c3e88d">"Nanny State"</span><span style="color:#c792ea">,</span>
  changeName<span style="color:#c792ea">,</span>
  View
<span style="color:#c792ea">}</span>

const Update <span style="color:#89ddff">=</span> <span style="color:#82aaff">Nanny</span><span style="color:#c792ea">(</span>State<span style="color:#c792ea">)</span>
</code></span></span>

在这个例子中，咱们增加了一个 <input> 元素到 View. 事件侦听器是在视图中内联定义的，因而在此示例中，咱们将 oninput 事件侦听器附加到 <input> 元素。每当检测到任何输出时，这将调用作为 changeName 状态对象的办法的事件处理程序。这个事件监听器须要定义，所以让咱们认真看看它：


<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-javascript">const <span style="color:#82aaff">changeName</span> <span style="color:#89ddff">=</span> event <span style="color:#89ddff">=></span> <span style="color:#82aaff">Update</span><span style="color:#c792ea">(</span><span style="color:#c792ea">{</span>name<span style="color:#89ddff">:</span> event<span style="color:#c792ea">.</span>target<span style="color:#c792ea">.</span>value<span style="color:#c792ea">}</span><span style="color:#c792ea">)</span>
</code></span></span>

这是一个用 Vanilla JS 编写的规范事件处理程序。它像平常一样承受一个事件对象作为参数，当它被调用时，咱们想要更新 State 对象，所以咱们应用该 Update 函数，因为这是咱们能够更新 State.

咱们提供给 Update 函数的参数是一个对象，其中蕴含咱们想要在状态中更新的任何属性以及相应的新值。在这种状况下，咱们心愿将 name 属性更新为用户在输出字段中输出的值，该字段是事件对象的一部分并应用 event.target.value. 这将应用输出字段中的新值更新状态并立刻从新出现页面。应用 µhtml 进行渲染意味着只有 View 理论更改的局部才会失去更新。这意味着 State 更新后的从新渲染既高效又疾速。

就是这样——你的第一个 Nanny State 应用程序！试试打字，你会看到它对用户输出的反馈有多快……而且只需几行代码。您能够在上面的 CodePen 中看到代码：

动静输出

Nanny State 让编写基于状态的响应式应用程序变得超级容易。如您所见，构建对用户交互作出反应的基于动静状态的应用程序不须要太多代码。这就是保姆州的漂亮。

​

退出移动版