navigator.getBattery (). log ( "배터리 레벨 :"배터리. 줄*100 "%"); 배터리 상태 API가 지원되지 않으면 배터리 상태를 얻기 위해 할 수있는 일이 많지 않습니다. 기능 감지를 사용하여 API가 지원되는지 확인하고 그렇지 않은 경우 사용자에게 대체 기능 또는 메시지를 제공 할 수 있습니다.
이 미니 시리즈의 첫 번째 부분에서, 우리는 우리가 구축하는 서비스의 세부 사항과 배울 내용에 대해 논의했습니다. 그런 다음 서버가 필요한 이유와 편안한 서비스를 만들기로 선택한 이유를 다루었습니다. 서버를 개발하는 방법에 대해 논의하면서 현재 운영 체제를 식별하는 방법과 Node.js를 사용하여 명령을 실행하는 방법에 대해 논의 할 기회를 얻었습니다.
이 시리즈의 두 번째이자 마지막 부분에서는 클라이언트 부품을 구축하여 사용자에게 좋은 방법으로 정보를 제시하는 방법을 알게됩니다. 이 목표를 달성하려면 페이지를 다시로드하지 않고 X 분 (또는 초)마다 배터리의 상태를 업데이트해야합니다. 또한 정보가 필요하지 않을 때 또는 페이지를 보지 않을 때도 시스템을 침수하지 않도록 업데이트를 일시 중지/재개 할 수 있어야합니다. 그렇게하려면 우리는 다음과 같습니다.
반응성 디자인
Ajax 및 비동기 통화에 대해 논의하는 것은 확실히이 기사의 범위를 벗어났습니다 (게시물 끝에 몇 가지 유용한 링크를 제공 할 것입니다). 우리의 목적을 위해 우리는 그것들을 서버에게 일부 데이터를 요청하고 데이터를 다시 전송되면 일부 조치를 실행할 수있는 블랙 박스로 취급 할 수도 있습니다.
대신 1 분 동안 반응성 디자인과 선언 프레임 워크에 대해 논의하겠습니다.
HTML 페이지는 기본적으로 정적 엔티티입니다. 즉, 순수한 HTML 페이지의 경우 페이지에 표시된 내용이 브라우저에서 렌더링 될 때마다 동일하게 유지됩니다. 그러나 우리는 JavaScript와 콧수염과 같은 일부 템플릿 라이브러리를 사용하면 동적으로 업데이트 할 수 있음을 알고 있습니다.
개발자가 DOM 노드에 데이터를 바인딩하는 데 도움이되는 많은 라이브러리가 있습니다. 대부분의 사람들은 JavaScript를 사용하여 데이터를 변환 해야하는 DOM 요소를 설명하고 페이지에 대한 업데이트를 수동으로 (JavaScript를 통해) 트리거해야합니다. 따라서 시각화를 업데이트 해야하는시기와 데이터 변경에 대한 응답으로 변경해야 할 사항을 결정하기위한 응용 프로그램의 논리에 의존하게됩니다.
선언 프레임 워크는 데이터를 DOM 요소에 바인딩하고 데이터가 변경 될 때마다 DOM을 자동으로 업데이트합니다. 이 바인딩은 JavaScript가 아닌 프레젠테이션 (HTML 마크 업)에서 템플릿을 사용하여 제공됩니다.
이러한 프레임 워크의 부가 가치는 몇 가지 핵심 사항으로 식별 할 수 있습니다.
.
<..> ractive.js
RACTIVE.JS의 경우 우리가 사용할 라이브러리 인 데이터와 DOM 간의 동기화는 컨테이너 객체
를 통해 얻습니다. 라이브러리는 데이터를 감싸는 객체를 만듭니다. 이 객체는 데이터에 액세스 할 수 있으므로 속성을 설정하거나 얻을 때마다 라이브러리는 작업을 캡처하여 모든 가입자에게 내부적으로 방송 할 수 있습니다.
실습
이제 Ractive.js가 유용한 것을 보았으므로 이제 첫 번째 Ractive 템플릿을 페이지에 추가해야합니다. 이를 위해 내부의 어느 곳에서나 선택한 ID가있는 스크립트 태그를 추가 할 수 있습니다. 나중에 필요할 때 현명하게 ID를 선택하는 것이 좋습니다. 또한 type = '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> 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>
Battery state: {{batteryState}}
{{#batteryLife}}
Time to empty: {{batteryLife}}
{{/batteryLife}}
{{/batteryState}}
{{^batteryState}}
LOADING...
{{/batteryState}}
>
약속 한 바와 같이, 여기서는 휴식 서비스에서 데이터를 검색하는 데 도움이되는 기능이 있습니다. jQuery Deferred 객체를 사용하여 서버에서 일부 데이터를 수신하자마자 콜백을 호출 할 콜백을 설정했습니다. 우리는이 콜백 내에서 ractive.js를 사용하고 있기 때문에 프레젠테이션 계층을 업데이트하는 방법에 대한 논리를 살 필요는 없습니다. 실제로 템플릿 스크립트에 사용되는 변수의 값 만 업데이트하면 Ractive.js는 모든 것을 처리합니다.
방금 설명한 것은 아래에보고 된 코드에서 구현됩니다.
물론,이 모든 작업을 함께 만들기 위해 더 많은 배선을 마련 할 수 있습니다. 우리는 대시 보드 ux의 디자인을 모두 건너 뛰었습니다. 템플릿 시스템에서 작동하는 방법을 얻으면 궁극적으로 당신에게 달려 있습니다! 예를 들어, 이미지와 애니메이션을 사용하여 텍스트와 시각적으로 시각적으로 표시되는 충전 백분율을 가질 수 있다면 얼마나 멋진가요? 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>
배터리 관리자 개체에 이벤트 리스너를 추가하여 배터리 상태 변경을 처리 할 수 있습니다. 배터리 상태 API는‘충전 체인지’,‘LevelChange’,‘ChargingTimeChange’및‘RESARGINGTIMECHANGE’와 같은 여러 이벤트를 제공합니다. 다음은 이러한 이벤트를 사용하는 방법의 예입니다.
}); }); 이 코드는 새 배터리 레벨을 로그인합니다. 배터리 레벨이 변경 될 때마다 콘솔.
Node.js를 사용하여 배터리 상태를 얻을 수있는 방법은 무엇입니까?
node.js는 배터리 상태를 얻을 수있는 내장 방법이 없습니다. 그러나 하위 프로세스를 사용하여 배터리 상태를 가져 오는 시스템 명령을 실행 한 다음 출력을 구문 분석 할 수 있습니다. 특정 명령은 운영 체제에 따라 다릅니다.
사용자 권한없이 배터리 상태를 얻을 수 있습니까?
예, 배터리 상태 API에는 사용자 권한을 사용하지 않아도됩니다. 그러나 시스템에 대한 데이터를 수집하는 경우 항상 사용자에게 알리는 것이 좋습니다.
배터리 상태 API에서 제공하는 배터리 레벨이 얼마나 정확한가? 배터리 상태 API는 0.0에서 1.0 사이의 숫자이며, 현재 배터리 레벨을 전체 충전의 일부로 나타냅니다. 이 값의 정확도는 장치와 배터리에 따라 다릅니다. 예, 배터리 상태 API는 웹 작업자에서 사용할 수 있습니다. 그러나 모든 브라우저가 웹 작업자를 지원하는 것은 아니며 웹 작업자를 지원하는 모든 브라우저가 웹 워커의 배터리 상태 API를 지원하는 것은 아닙니다.
배터리 상태 API가 지원되지 않으면 어떻게해야합니까?
위 내용은 node.js : client를 사용하여 배터리 viz 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
