In网页重构on 2015-06-26 15:29:17 by鬼爪手
话说前一篇文章，作者为展现其逼格，在前面大讲前端/重构历史，以2年为一个节点。。我并不知道这是不是意味着什么。直到我开始写这篇文章。在刚复制完他的标题，粘贴到发表文章页面的文章标题一栏时，我似乎明白了一些什么。我本来是想直接写《后HTML5时代（Ⅲ）》的，但是基于团队有为数不少的处女座，其中也包含了我的领导，故怕被拍死。所以还是用了《后HTML5时代Ⅱ》，但这真不是我的本意。回头我还是要去找上篇文章的作者理论，如果这篇文章成了我的绝笔，各位记得帮我拨打110。
上面描述的那么一堆。似乎和这篇文章没有什么太大的关系，如果我再没完没了地逼逼下去，估计没被某人打死，也要被你们喷死了。
目录：
一、让音乐随心而动 - 音频处理 Web audio API
二、捕捉用户摄像头 - 媒体流 Media Capture
三、你是逗逼？ - 语音识别 Web Speech API
四、让我尽情呵护你 - 设备电量 Battery API
五、获取用户位置 - 地理位置 Geolocation API
六、把用户捧在手心 - 环境光 Ambient Light API
后HTML5时代 II
七、陀螺仪 Deviceorientation
八、Websocket
九、NFC
十、震动 - Vibration API
十一、网络环境 Connection API
那么，各位看官起来摇一摇，活动活动筋骨，热热身。。。（PS：为什么我会联想到喝前摇一摇，吃(fan)货(tong)天赋？）。
DeviceMotion：
简介：
装逼说法：设备移动传感器。
通俗说法：检测设备运动及运动状况，可以通过该接口获取到设备运动的方向和速度等相关信息
核心代码：
这货其实就是一个事件，简单地通过事件监听就可以获取到相关的设备运动信息
window.addEventListener("devicemotion", function(event) {}, false);
最简单的设备运动，我们基本上可以认为是前后、左右、上下这么6个方向上的，装换成3D环境中来讲的话，就是在x、y和z轴上运动，这三个轴上的信息，都包含在了event对象中。我们可以通过这种方式获得
window.addEventListener("devicemotion", function(event) {
var eventacceleration = event.acceleration;
document.querySelector('#devicemotion').innerHTML = "acceleration:
"+
eventacceleration.x+"
"+
eventacceleration.y+"
"+
eventacceleration.z
}, false);
想看效果的话，这个时候就可以掏出手机，扫描下面的这个二维码
http://aaaa.sinaapp.com/deviceDemo/acceleration.html
不要问我为什么手机躺在桌面上，上面的数字还在不停地抖动，咱们文化人应该都知道什么叫相对静止。上面的三个不断变化的数字，就是你设备的运动数据了。如果你在惊讶为什么我都已经移动过手机，为什么上面的数字貌似也没什么大的变化~那么我会告诉你说：有本事你的眼睛跟着你的手机一样快速移动啊，运动过程中你就能发现这个值的变化了。没有这个本事吧！~自己尝试修改下那个demo。把运动中值的变化都记录下来看看。。。（PS：反正我不弄。）
还有一种比较理想的设备运动方式就是不产生位移，只是快速的旋转手机。这个旋转的信息同样也被反馈在了event对象中
window.addEventListener("devicemotion", function(event) {
eventrotationRate = event.rotationRate;
document.querySelector('#devicemotion').innerHTML = 'rotationRate:
'+
eventrotationRate.alpha+'
'+
eventrotationRate.beta+"
"+
eventrotationRate.gamma
}, false);
同样的，下面的二维码也就是为了说明上面的这段代码，alpha、beta以及gamma就是旋转设备时的加速度。
http://aaaa.sinaapp.com/deviceDemo/rotationRate.html
可能有的童鞋会觉得~有了这个旋转应该就能实现一些手机左右旋转产生视差的效果了，其实是不行的~因为这货和上面的一样，设备停止后，我们可以认为他的值归0~。真正想要实现手机旋转视差，我们需要用到的就是另外一个event的属性accelerationIncludingGravity。从字面上理解这个属性就是重力加速度。
window.addEventListener("devicemotion", function(event) {
eventaccelerationIncludingGravity = event.accelerationIncludingGravity;
document.querySelector('#devicemotion').innerHTML = "accelerationIncludingGravity:
"+
eventaccelerationIncludingGravity.x+"
"+
eventaccelerationIncludingGravity.y+"
"+
eventaccelerationIncludingGravity.z
}, false);
下面的这个二维码应该可以帮助到你来理解这个属性
http://aaaa.sinaapp.com/deviceDemo/accelerationIncludingGravity.html
至此，devicemotion这个事件就差不多了，可见，这货功能还是蛮强大的，如果你有一定的的数学和物理学的基础，那么，轻巧几行代码，实现个高尔夫球游戏玩玩，立马给人感觉高大上了。看谁还敢说程序员没有妹纸。。
通过这个devicemotion吧，还能实现些什么就各自去脑洞大开吧，比如说玩烂了的摇一摇，设备倾斜视差，重力感应类的小游戏。我们貌似还能通过这个属性，去做个基于HTML5的计步器玩玩？
其实，devicemotion还有一个好基友，这里也推荐给大家看一眼吧：
deviceorientation
这个事件和devicemotion的使用方法基本一致
window.addEventListener("deviceorientation", function(event) {
document.querySelector('#deviceorientation').innerHTML =
event.alpha+'
'+
event.beta+"
"+
event.gamma+'
';
}, false);
这里的alpha、beta和gamma所指的就是手机设备的各种倾斜角度，如果你不能理解哪个是alpha、哪个是beta和gamma，那么你还是自己掏出手机，扫描下这个二维码。自己感受吧。（PS：我是真不爱画图，可能辛苦半天画出来的图，也有童鞋没明白）。
有前面devicemotion好基友的帮忙，似乎能做的东西又可以更多一点了。咱们前面貌似提及过“喝前摇一摇”。摇完之后，自然是要打开瓶盖痛饮一番了，结合旋转加速度，我们是不是可以尝试些一个拧瓶盖比赛的游戏了？怕长胖？要不，拧个螺丝钉也行。
说到游戏，特别上面还提及到了比赛。那么实时通信必然是不可少了。以往为了达到实时通信，也有不少的方法：轮询、长轮询、长连接、flash等各种方式。这些方法各自的弊端也是比较明显的，这里就不逐个展开细说了。这里主要给大家提交到的就是下面这货：
webSocket
简介：
浏览器与服务器全双工通信(full-duplex)。
核心代码：
var ws = new WebSocket('ws://127.0.0.1:8808/');//建立服务器连接ws.onopen = function(){
systemInfo.innerHTML = '
和websocket服务器连接成功
';
}//接收到服务器返回的数据ws.onmessage = function(e){
systemInfo.innerHTML += '
'+e.data+'
';
}//断开服务器连接ws.onclose = function(){
systemInfo.innerHTML += '
WebSocket服务器连接关闭
';
}//ws发生错误ws.onerror = function(e){
console.log(e);
systemInfo.innerHTML += '
WebSocket发生错误
';
}
对于webSocket，有兴趣了解更多的朋友直接转移到我的另外一篇文章《移动前端系列——websocket实时互动小游戏》
websocket的数据发送和接收，其实也都是依赖于网络的，webSocket自己也对网络状况这块通过事件的方式做出了相应，比如说上面的onclose、onerror。但是就目前来说，很多页面上可能并没有用webSocket，这么一来，对于网络何时断开了，可能捕获就没那么容易了，更何况，webSocket在网络信息这块，可能还并不是那么的完美。比如说，我想获取当前连接的网络类型。
网络类型这块我们暂且先放半分钟，我们先看一下如何动态判断网络连接是否断开，所指动态判断网络连接断开，指的是，页面不刷新的情况下，实时地知道当前网络是否可用。以往，我们想得到这种数据，我们一般的实现方法是通过轮询去访问服务器上的一个文件，如果文件正常响应，说明网络是通的；如果文件不响应，那么就认为网络是不通的。这种方式感觉挺靠谱，但是可以想象，轮询请求，会耗费多少服务器资源。下面这货出来之后，以往的这种方式就可以进博物馆了。
onLine
简介：
判断当前网络是否有效
用法也是相当地简单：
if (navigator.onLine) {
alert('online');
} else {
alert('offline');
}
我们可以通过事件的监听，去实时获取到网络状态的变化
window.addEventListener('offline', function(e) {alert('offline');})
window.addEventListener('online', function(e) {alert('online');})
这样以来，实时获取网络状态俨然和服务器已经没有半毛钱关系了。
好了，半分钟时间已到，我们回头来看看我前面说的那个问题，获取网络类型，所指网络类型，值的是2G、3G、4G、蓝牙等等。其实，我个人觉得，这个网络类型完全可以放到online那个事件对象里面去。但是很遗憾，至少目前没放，暂不清楚是基于什么考虑的。我们目前想要获取这个网络类型，需要通过另外一个属性
connection
connection也是navigator的一个属性，他包含了一些当前连接的基本信息，其中connection.type值的就是当前的网络类型。其值包含了一下几个：
bluetooth cellular ethernet none wifi wimax wimax unknown
当网络类型发生变化时，同样的也是可以通过事件监听的方式来实时获取到网络类型。代码实现如下：
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
var type = connection.type;
function updateConnectionStatus() {
alert("网络由 " + type + " 变化为 " + connection.type);
}
//监听网络类型发生变化
connection.addEventListener('typechange', updateConnectionStatus);
有了这些，我们就可以根据不同的网络环境去加载不同的资源去最大程度上丰富用户体验。
我们上面所提及到的，很多都是和网络（互联网）相关，但是有的时候，我们想在没有网络的环境下，也想传送一些数据该怎么办。这种情况可能在不久的将来，在我们的网页里面也能实现了，这个就是接下来的NFC（为什么我会想到KFC）
NFC
简介：
近场通信/近距离无线通信技术。
其实说实在的，这个功能我并没有在我的页面里面调试出来。主要的一个原因是~这货目前只是在firefox os系统里面的firefox浏览器里面实现了，手头上没这设备。不过从他们官网的例子中，我大概地可以感受得到这货的好用，有兴趣的同学自行前往学习：https://developer.mozilla.org/en-US/docs/Web/API/NFC_API/Using_the_NFC_API。
当然了，如果你手头上刚好有两部带有NFC芯片的三星手机，可以试试。解锁屏幕，将两部三星手机后壳贴近，听见“滴”的一声后，注意看屏幕上的变化。然后点击屏幕，再去看看另外一个手机上发生了什么。
清脆“滴”的一声，多好的用户行为反馈，忍不住还多尝试了几次，忽然就感觉这种靠声音的提醒，似乎忽略了一些失聪的人群。如果加上点震动的话~似乎就完美了。不是于是乎，咱们本片的最后一个话题引出。
vibrate
简介：
设备震动
核心代码：
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate ||
navigator.mozVibrate || navigator.msVibrate;
navigator.vibrate(value);
navigator.vibrate(0);
vibrate的参数为震动的时间，
如果值为0，说明停止震动
值为一个数组的话，奇数项表示的是震动时间，偶数项表示的为间隔时间。
比如：vibrate(1000,1000,2000) 就是表示震动1秒之后暂停1秒，再震动2秒
有兴趣的，扫下这个二维码可体验
http://1.aaaa.sinaapp.com/deviceDemo/Vibration.html
一口气说了这么一堆，其实后面的这几个点，都还在标准化的路上，不同机型/平台支持不太一致，在实际项目中使用还是要注意点区别对待的~你们先回味着，我一个人先伤一会儿心去。
网友评论