值得开发者关注的8个HTML5 API

摘要： HTML5革命给Web开发者们带来许多超棒的JavaScript和HTML API，有些API已逐渐成为他们的好帮手。本文为大家总结了8个非常实用的HTML5 API。

之前，我们曾发布过 你应该知道的HTML5五大特性。下面，再向大家介绍一些非常实用的HTML5 JavaScript API。话说，JavaScript+CSS+HTML一直都是前端开发者的秘密武器，开发者利用它们可以开发出任何想要的东西，比如使用JavaScript访问硬件（摄像头、麦克风、游戏手柄、GPU）、访问文件系统和WebSocket。

1.Battery Status API

电池状态API，顾名思义，该API的主要用途是检查设备（笔记本电脑、手机、平板电脑）的电池状态。

1 2 3 4

var  battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery console.log( "Battery charging: " , battery.charging); // true console.log( "Battery level: " , battery.level); // 0.58 console.log( "Battery discharging time: " , battery.dischargingTime);

在经过一番研究后，向大家推荐 battery.js 库，专门用来检查设备的电池状态。

1 2 3 4 5 6 7 8 9 10 11 12 13

if (Battery.isSupported()) {      // Get the battery status      var  status = Battery.getStatus();      console.log( 'Level: '  + Math.floor(status.level * 100) +  '%' ); // 30%      console.log( 'Charging: '  + status.charging);                   // true      console.log( 'Time until charged: '  + status.chargingTime);     // 3600 (seconds) or Infinity      console.log( 'Battery time left: '  + status.dischargingTime);   // 3600 (seconds) or Infinity        // Register a handler to get notified when battery status changes      Battery.onUpdate =  function (status) {          console.log(status); // {level, charging, chargingTime, dischargingTime}      }; }

2.Gamepad API

游戏手柄API，该API允许你连接计算机和游戏控制台，使用它来玩网页游戏。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

navigator.gamepads = navigator.webkitGamepads || navigator.MozGamepads; var  requestAnimationFrame = window.webkitRequestAnimationFrame ||                              window.mozRequestAnimationFrame; var  cancelAnimationFrame = window.webkitCancelAnimationFrame ||                             window.MozCancelAnimationFrame; var  controllers = {}; // Stash connected controllers. var  reqId =  null ; function  onConnected(e) {      controllers[e.gamepad.index] = e.gamepad;      runAnimation(); } function  onDisconnected(e) {      delete  controllers[e.gamepad.index];      cancelAnimationFrame(reqId); } window.addEventListener( 'webkitgamepadconnected' , onConnected,  false ); window.addEventListener( 'webkitgamepaddisconnected' , onDisconnected,  false ); window.addEventListener( 'MozGamepadDisconnected' , onDisconnected,  false ); window.addEventListener( 'MozGamepadConnected' , onConnected,  false );

以上 代码 源码，顺便向大家推荐 gamepadjs 这个库，它可以让你更方便地使用该库。

.Device Orientation API

设备定位API，该API允许你收集设备的方向和移动信息。此外，该API只在具备陀螺仪功能的设备上使用。

if  (window.DeviceOrientationEvent) {

     window.addEventListener( 'deviceorientation' ,  function (event) {

         var  a = event.alpha,

             b = event.beta,

             g = event.gamma;

         console.log( 'Orientation - Alpha: '  + a +  ', Beta: ' + b +  ', Gamma: '  + g);

     },  false );

}  else  {

     console.log( 'This device does not support deviceorientation' );

}

4.Geolocation API

地理定位API，开发者使用该API可以请求用户的位置信息，在网页上分享自己的位置信息等。位置信息由纬度、经度坐标和一些其他元数据组成。

1 2 3 4 5 6 7 8 9 10

if  (navigator.geolocation) {      navigator.geolocation.getCurrentPosition( function (position) {          var  lat = position.coords.latitude,              lon = position.coords.longitude;          console.log( 'Geolocation - Latitude: ' + lat + ', Longitude: ' + lon);      }); } else  {      console.log( 'Geolocation is not supported for this Browser/OS version yet.' ); } 5.Page Visibility API 页面可见度API，该API向开发者提供了一个监听事件，可以告诉开发者当前用户浏览页面或标签的状态变化。 1 2 3 4 document.addEventListener( 'visibilitychange' ,  function (e) {      console.log( 'hidden:'  + document.hidden,                'state:'  + document.visibilityState) },  false ); 6.Fullscreen API  全屏API，该API可以让开发人员进入到浏览器的全屏模式，用户在使用的时候可以随意启动和取消该模式。这个API特别适合游戏开发者： 1 2 3 4 5 6 7 8 9 10 11 12 13 // Find the right method, call on correct element  function  launchFullScreen(element) {     if (element.requestFullScreen) {       element.requestFullScreen();     }  else  if (element.mozRequestFullScreen) {       element.mozRequestFullScreen();     }  else  if (element.webkitRequestFullScreen) {       element.webkitRequestFullScreen();     }  }  // Launch fullscreen for browsers that support it!  launchFullScreen(document.documentElement); // the whole page  launchFullScreen(document.getElementById( "videoElement" )); // any individual ele 7.getUserMedia API 这是个非常有趣的API，开发者使用该API可以访问多媒体设备，无需插件，比如笔记本的摄像头（要有用户权限）。与<video>和canvas元素一起使用，还可以在浏览器里面捕获许多漂亮的图片。  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 // Put event listeners into place  window.addEventListener( "DOMContentLoaded" ,  function () {     // Grab elements, create settings, etc.     var  canvas = document.getElementById( "canvas" ),       context = canvas.getContext( "2d" ),       video = document.getElementById( "video" ),       videoObj = {  "video" :  true  },       errBack =  function (error) {         console.log( "Video capture error: " , error.code);        };        // Put video listeners into place     if (navigator.getUserMedia) { // Standard       navigator.getUserMedia(videoObj,  function (stream) {         video.src = stream;         video.play();       }, errBack);     }  else  if (navigator.webkitGetUserMedia) { // WebKit-prefixed       navigator.webkitGetUserMedia(videoObj,  function (stream){         video.src = window.webkitURL.createObjectURL(stream);         video.play();       }, errBack);     }  },  false ); 点击查看 教程 与 示例 。  8.Link Prefetching 链接预取API，该API提供页面预览功能，方便开发者改善用户体验。 1 2 3 4 <!-- full page --> <link rel= "prefetch"  href= "http://davidwalsh.name/css-enhancements-user-experience"  /> <!-- just an image --> <link rel= "prefetch"  href= "http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png"  />