使用node.js创建电池：客户端

钥匙要点

• >本文介绍了如何使用Node.js构建电池可视化服务的客户端部件，该服务在不重新加载页面的情况下定期更新电池状态。客户可以暂停或恢复更新，以避免在不需要信息时使系统重载。
>
• 反应性设计和声明框架用于自动有效地更新文档对象模型（DOM），以响应数据的变化。这是使用ractive.js来实现的，ractive.js是一个将数据绑定到DOM元素并每次数据更改时都会更新DOM的库。
>作者演示了如何使用ractive.js创建电池可视化，包括设置暂停/简历更新的机制，并从静止服务中异步检索数据。
• >
>本文以一个呼吁结束，以进一步探索所讨论的工具和概念，例如使用node.js设置http服务器，RESTFULE API，在Node.js服务器上运行OS终端命令以及声明框架的基础知识和ractive.js。
在这个迷你系列的第一部分中，我们讨论了我们正在构建的服务的细节以及您将学到的东西。然后，我们介绍了为什么我们需要服务器以及为什么我选择创建RESTFUL服务的原因。在讨论如何开发服务器时，我借此机会讨论了如何识别当前操作系统以及如何使用node.js在其上运行命令。 在本系列的第二个也是最后一部分中，您将发现如何以不错的方式构建客户部分以向用户提供信息。为了实现此目标，我们应该每x分钟（或秒）更新电池状态，而无需重新加载页面。此外，我们应该能够暂停/简历更新，以避免在不需要信息时泛滥到我们的系统，甚至当我们不查看页面时。为此，我们将：

>安排Ajax通过常规时间间隔来打电话给我们的后端服务; >
• >使用一个声明的框架，该框架会自动有效地对数据的更改进行自动更新; >
使用一些jQuery效用功能使我们的生活更轻松;
• >
>使用一些不错的图像和CSS使仪表板视觉吸引人（作为奖励！）。
• 。

反应性设计

讨论Ajax和异步电话肯定不在本文的范围之内（我将在帖子结尾提供一些有用的链接）。出于我们的目的，我们甚至可以将它们视为黑匣子，使我们可以向服务器询问一些数据，并在将数据发送回数据后执行某些操作。 相反，让我们花一点时间讨论反应性设计和声明性框架。 HTML页面默认是静态实体。这意味着，对于纯HTML页面，每次在浏览器中渲染时，页面上显示的内容保持不变。但是，我们知道，通过使用JavaScript以及一些模板库（例如Mustache），我们可以动态更新它们。 有许多库可以帮助开发人员将数据绑定到DOM节点。他们中的大多数使用JavaScript来描述应转换数据的DOM元素，并需要对页面进行更新，以手动触发（通过JavaScript）。因此，我们最终依靠应用程序的逻辑来确定应何时更新可视化以及应对数据更改应进行的更改。 声明框架将数据绑定到DOM元素，并在数据更改时自动更新DOM。还使用演示文稿中的模板（HTML标记）而不是JavaScript中的模板提供了这种绑定。 这些框架的附加值可以在几个关键点中标识：

他们在内容和呈现之间实施更大程度的分离。这是通过让您在演示层中定义数据，事件处理程序甚至视图的结构（例如迭代和复合对象，例如表）; 来实现的。
• >他们提供了一种简单的方法，可以使您的数据模型和您的演示文稿保持同步;
>他们通常以极其有效的方式进行操作，确保仅将DOM树的最小可能子集重新流动。在这方面，请记住，回流和重新粉刷通常是客户端浏览器应用程序的瓶颈。

> ractive.js

对于ractive.js，我们将要使用的库，数据和DOM之间的同步是通过>容器对象获得的。该库创建对象围绕数据包裹的对象。这些对象可以访问数据，因此每次您设置或获取任何属性时，库都可以捕获您的操作并内部广播给所有订户。 >动手 现在，我们已经看到了什么是ractive.js有用的，现在该将我们的第一个ractive模板添加到我们的页面了。为此，您可以在内的任何位置添加带有您选择的ID的脚本标签。我建议您明智地选择ID，因为我们以后需要它。我们还需要添加类型='text/ractive'属性：

type ='text/ractive' 实际上，对您的浏览器没有任何意义，因为除非您也将ractive的脚本添加到页面上，否则它会忽略脚本：

现在，在RACTIVE脚本内部，您可以添加HTML标签，模板变量以及条件/循环。 ractive.js将负责评估{{}}组内的所有内容。

<span><span><span><script> id<span >='meterVizTemplate'</script></span> type<span>='text/ractive'</span>></span><span><span></span>></span></span>

在上面的示例中，您可以看到：

<span><span><span><script> src<span >='http://cdn.ractivejs.org/latest/ractive.js'</script></span>></span><span><span></span>></span></span>

<span><span><span><script> id<span >='meterVizTemplate'</script></span> type<span>='text/ractive'</span>></span><span>
</span></span><span><span>    <span>{{#batteryState}}
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>      <span><div class="battery-div">
<span><span>        <span><div class="battery-shell">
<span><span>          <span><div class="battery-percent-text">{{batteryPercent.toFixed(1) + '%'}}</div>
</span></span></span><span><span>        <span></span></span></span>
</div>
</span></span></span><span><span>        <span><div class="battery-level">
<span><span>          <span><div class="battery-mask" style="width:{{(100 - batteryPercent) + '%'}};">
<span><span>          <span></span></span></span>
</div>                
</span></span></span><span><span>        <span></span></span></span>
</div>
</span></span></span><span><span>        <span>{{#batteryCharging}}
</span></span></span><span><span>          <span><div class="battery-plug" intro-outro="fade:1000"></div>
</span></span></span><span><span>        <span>{{/batteryCharging}}
</span></span></span><span><span>        <span>{{#batteryPercent </span></span><span><span>          <span><div class="battery-warning" intro-outro="fade:1000"></div>
</span></span></span><span><span>        <span>{{/batteryLife}}                
</span></span></span><span><span>      <span></span></span></span></span>
</div>
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>        <span><span class="key">Battery state:</span> <span class="value {{batteryStateClass(batteryState)}}">{{batteryState}}</span>
</span></span></span><span><span>        <span><br>
</span></span></span><span><span>        <span>{{#batteryLife}}
</span></span></span><span><span>          <span><span class="key">Time to empty:</span> <span class="value {{batteryLifeClass(batteryPercent)}}">{{batteryLife}}</span>
</span></span></span><span><span>        <span>{{/batteryLife}}                  
</span></span></span><span><span>    <span>{{/batteryState}}
</span></span></span><span><span>    <span>{{^batteryState}}
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>      <span>LOADING...
</span></span></span><span><span>    <span>{{/batteryState}}
</span></span></span><span><span></span><span><span></span>></span></span>

>变量：{{{电池state}}

• 条件：{{#batterystate}}}
• >函数召唤：{{{BattuctStateClass（Battertstate）}}}

为了使这些事情有效，我们必须在JavaScript中添加一些约束力。为此，我们必须创建一个新的ractive.js对象：

<span><span><span><script> id<span >='meterVizTemplate'</script></span> type<span>='text/ractive'</span>></span><span><span></span>></span></span>

我们传递给构造函数的选项非常重要。首先，EL需要匹配ractive.js内部的DOM元素的ID。在这种情况下，我们需要添加一个Div到OUT HTML页面：

<span><span><span><script> src<span >='http://cdn.ractivejs.org/latest/ractive.js'</script></span>></span><span><span></span>></span></span>

您插入此标签的点很重要。对于ractive.js模板系统呈现的所有元素，它将是parent 元素。您必须谨慎的第二个重要参数是模板。它的值必须匹配页面上文本/ractive脚本的ID。最后，我们将键是我们在模板中引用的变量名称或我们调用的函数的对象。 使用ractive.js，我们甚至可以定义库将回应的自定义事件：

<span><span><span><script> id<span >='meterVizTemplate'</script></span> type<span>='text/ractive'</span>></span><span>
</span></span><span><span>    <span>{{#batteryState}}
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>      <span><div class="battery-div">
<span><span>        <span><div class="battery-shell">
<span><span>          <span><div class="battery-percent-text">{{batteryPercent.toFixed(1) + '%'}}</div>
</span></span></span><span><span>        <span></span></span></span>
</div>
</span></span></span><span><span>        <span><div class="battery-level">
<span><span>          <span><div class="battery-mask" style="width:{{(100 - batteryPercent) + '%'}};">
<span><span>          <span></span></span></span>
</div>                
</span></span></span><span><span>        <span></span></span></span>
</div>
</span></span></span><span><span>        <span>{{#batteryCharging}}
</span></span></span><span><span>          <span><div class="battery-plug" intro-outro="fade:1000"></div>
</span></span></span><span><span>        <span>{{/batteryCharging}}
</span></span></span><span><span>        <span>{{#batteryPercent </span></span><span><span>          <span><div class="battery-warning" intro-outro="fade:1000"></div>
</span></span></span><span><span>        <span>{{/batteryLife}}                
</span></span></span><span><span>      <span></span></span></span></span>
</div>
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>        <span><span class="key">Battery state:</span> <span class="value {{batteryStateClass(batteryState)}}">{{batteryState}}</span>
</span></span></span><span><span>        <span><br>
</span></span></span><span><span>        <span>{{#batteryLife}}
</span></span></span><span><span>          <span><span class="key">Time to empty:</span> <span class="value {{batteryLifeClass(batteryPercent)}}">{{batteryLife}}</span>
</span></span></span><span><span>        <span>{{/batteryLife}}                  
</span></span></span><span><span>    <span>{{/batteryState}}
</span></span></span><span><span>    <span>{{^batteryState}}
</span></span></span><span><span>      <span><br>
</span></span></span><span><span>      <span>LOADING...
</span></span></span><span><span>    <span>{{/batteryState}}
</span></span></span><span><span></span><span><span></span>></span></span>

在几行中，我们设置了一种机制来暂停/恢复我们的更新。但是，我们仍然需要定义updatebatterystatus（） 功能。

异步检索数据

如所承诺的，这是一个功能，可以照顾从我们的休息服务中检索数据。通过使用jQuery延期对象，我们设置了一个回调，一旦从服务器收到某些数据，就会被调用。由于我们还在此回调中使用ractive.js，因此我们不必仔细研究如何更新演示层的逻辑。实际上，我们只是更新模板脚本中使用的变量的值，ractive.js将负责所有内容。 我刚刚描述的是由下面报告的代码实现的：

ractive <span>= new Ractive({
</span>    <span>el: 'panels',
</span>    <span>template: '#meterVizTemplate',
</span>    <span>data: {
</span>        <span>// Percentage at which the battery goes to 'red' zone (export for Ractive templates)
</span>        <span>batteryRedThreshold: BATTERY_RED_THRESHOLD,
</span>        <span>// Percentage at which the battery enters 'yellow' zone (export for Ractive templates)
</span>        <span>batteryYellowThreshold: BATTERY_YELLOW_THRESHOLD,
</span>        <span>// The capacity of the battery, in percentage. Initially empty
</span>        <span>batteryPercent: NaN,
</span>        <span>// How much more time can the battery last?
</span>        <span>batteryLife: "",
</span>        <span>// True  the update daemon for the battery has been paused
</span>        <span>batteryPaused: false,
</span>        <span>// True  the update daemon for the battery has reported an error at its last try
</span>        <span>batteryUpdateError: false,
</span>        <span>// Is the battery connected to power?
</span>        <span>batteryCharging: false,
</span>        <span>batteryStateClass: function (state) {
</span>            <span>return state === 'discharging' ? BATTERY_RED_CLASS : BATTERY_GREEN_CLASS;
</span>        <span>},
</span>        <span>batteryLifeClass: function (percent) {
</span>            <span>return percent         <span>}
</span>    <span>}
</span><span>});</span></span>

将它们全部放在一起

当然，还有更多的接线可以将所有这些连接在一起。我们完全跳过了仪表板UX的设计。最终，这取决于您，一旦您获得了如何使其与模板系统一起使用！例如，如果我们可以使用图像和动画将充电百分比显示为文本，并且在视觉上以某些凉爽的功率指示器显示为文本和视觉上，那会有多酷？使用ractive.js，这并不难！看看最终结果： 如果您想检查代码，则可以在GitHub上再次找到它。

结论

我们的多平台电池仪表板现在应该准备就绪。但这应该是一个起点，而不是最终结果，我希望您在此过程中了解到的重要一点是：

• 如何使用node.js
设置HTTP服务器
• > RESTFUL API
• >如何在node.js服务器上运行OS终端命令
• 声明框架和ractive.js的基础知识尤其

如果您想将其提升到一个新的水平，我的建议是开始尝试这些工具并挖网，以加深这些领域的知识。如果您想加深本文所涵盖的主题，我强烈建议您查看这些良好的资源：

• 建筑风格和基于网络的软件体系结构的设计
• >创建RESTFUL API
的指南
• 在本机库中使用REST API的优点/缺点是什么？
模板方法模式
• JavaScript中的异步请求
• >克罗克福德（Crockford）在JavaScript上 - 第四集：Ajax的变态 - 像往常一样的洞察力，以及关于Ajax一词起源的超级有趣的故事，作为奖励！
>
• > jQuery $ .getjson方法
• ractivejs教程
>常见问题（常见问题解答）关于使用node.js客户端创建电池可视化的问题

>如何使用JavaScript获得电池状态？

>

使用JavaScript获得电池状态，您可以使用电池状态API。该API提供有关系统电池充电水平的信息，并让您通过电池级别或充电状态更改时发送的事件通知您。这是一个如何使用它的简单示例：

navigator.getBattery（）。然后（function（battery）{
console.log（“电池级别：“电池级别：“电池）。 ）;
}）;
此代码将当前的电池电量记录到控制台。

什么是navigator.getBattery方法？

如何可视化电池状态数据？

为了可视化电池状态数据，您可以使用任何JavaScript图表库，例如Chart.js或d3.js。这些库允许您从数据中创建各种类型的图表和图形。您还可以使用HTML和CSS创建一个简单的栏或饼图。

>我可以在所有设备上获取电池状态吗？

>电池状态API受到大多数现代浏览器的支持，但是不是全部。还值得注意的是，某些设备（例如台式计算机）可能无法提供准确或任何电池状态信息。

>

>如何处理电池状态更改？

您可以通过将事件侦听器添加到电池管理器对象中来处理电池状态更改。电池状态API提供了多个事件，例如“ ChargingChange”，“ LevelChange”，“ ChargingTimeChange”和“ AnergingTimeChange”。这是如何使用这些事件的一个示例：


navigator.getBattery（）。然后（function（Batterion）{
battery.addeventlistener（'levelChange'，function'，function（）{
console。 log（“电池级别：”电池级*100“％”）;
}）;
}）;

该代码将记录新的电池级别每当电池级别更改时，要进入控制台。

>我如何使用node.js获得电池状态？我可以在未经用户许可的情况下获得电池状态吗？但是，如果您收集了有关其系统的任何数据，请告知用户。

>电池状态API提供的电池级别的准确性如何？按电池状态API为0.0至1.0之间，代表当前电池电量的一小部分充电。该值的准确性取决于设备及其电池。

>我可以在Web Worker中获得电池状态吗？但是，请记住，并非所有浏览器都支持网络工人，而不是所有支持Web工作人员支持网络工作人员中电池状态API的浏览器。

>如果不支持电池状态API，该怎么办？

>

如果不支持电池状态API，那么您没有什么可以做的来获得电池状态。您可以使用功能检测来检查是否支持API，并为用户提供替代功能或消息。

以上是使用node.js创建电池：客户端的详细内容。更多信息请关注PHP中文网其他相关文章！