使用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</span> id<span>='meterVizTemplate'</span> type<span>='text/ractive'</span>></span><span><span></script</span>></span></span>

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

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

<span><span><span><script</span> id<span>='meterVizTemplate'</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><span><span>        <span><div class='battery-shell'>
</span></span></span><span><span>          <span><div class='battery-percent-text'>{{batteryPercent.toFixed(1) + '%'}}</div>
</span></span></span><span><span>        <span></div>
</span></span></span><span><span>        <span><div class='battery-level'>
</span></span></span><span><span>          <span><div class='battery-mask' style="width:{{(100 - batteryPercent) + '%'}};">
</span></span></span><span><span>          <span></div>                
</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 <= batteryRedThreshold}}
</span></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></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></script</span>></span></span>

>變量：{{{電池state}}

• 條件：{{#batterystate}}}
• >函數召喚：{{{BattuctStateClass（Battertstate）}}}

為了使這些事情有效，我們必須在JavaScript中添加一些約束力。為此，我們必須創建一個新的ractive.js對象：

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

我們傳遞給構造函數的選項非常重要。首先，EL需要匹配ractive.js內部的DOM元素的ID。在這種情況下，我們需要添加一個Div到OUT HTML頁面：

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

您插入此標籤的點很重要。對於ractive.js模板系統呈現的所有元素，它將是parent 元素。您必須謹慎的第二個重要參數是模板。它的值必須匹配頁面上文本/ractive腳本的ID。最後，我們將鍵是我們在模板中引用的變量名稱或我們調用的函數的對象。 使用ractive.js，我們甚至可以定義庫將回應的自定義事件：

<span><span><span><script</span> id<span>='meterVizTemplate'</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><span><span>        <span><div class='battery-shell'>
</span></span></span><span><span>          <span><div class='battery-percent-text'>{{batteryPercent.toFixed(1) + '%'}}</div>
</span></span></span><span><span>        <span></div>
</span></span></span><span><span>        <span><div class='battery-level'>
</span></span></span><span><span>          <span><div class='battery-mask' style="width:{{(100 - batteryPercent) + '%'}};">
</span></span></span><span><span>          <span></div>                
</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 <= batteryRedThreshold}}
</span></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></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></script</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 <= BATTERY_RED_THRESHOLD ? BATTERY_RED_CLASS : (percent <= BATTERY_YELLOW_THRESHOLD ? BATTERY_YELLOW_CLASS : BATTERY_GREEN_CLASS);
</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中文網其他相關文章！