HTML5系列四（WebWorker、地理定位）
WebWorker简单应用
先从一个简单例子说起，计算数值加法
<script> var worker = new Worker('sumCalculate.js'); worker.onmessage = function (event) { alert('The sum is ' + event.data); } function calculate() { var num = parseInt(document.getElementById('num').value, 10); worker.postMessage(num); } </script> 输入数值：<input type="text" id="num" /> <button onclick="calculate()">计算</button>
sumCalculate.js代码如下所示：
onmessage = function (event) { var num = event.data; var result = 0; for (var i = 0; i <= num; i++) { result += i; } postMessage(result); }
这段代码很简单，事实上就是主线程将需要求和的值传给计算加法的js，然后js计算好之后再传回给主界面
再看一个稍微复杂一点的应用
<script> var intArray = new Array(100); var intStr = ""; for (var i = 0; i < 100; i++) { intArray[i] = parseInt(Math.random() * 100); if (i != 0) { intStr += ";" } intStr += intArray[i]; } var worker = new Worker('inter.js'); worker.postMessage(intStr); worker.onmessage = function (event) { if (event.data != '') { var j, k, tr, td, intArray = event.data.split(";"); var table = document.getElementById('table'); for (var i = 0; i < intArray.length; i++) { j = parseInt(i / 10, 10); k = i % 10; if (k == 0) { tr = document.createElement('tr'); tr.id = 'tr' + j; table.appendChild(tr); } else { tr = document.getElementById('tr' + j); } td = document.createElement('td'); tr.appendChild(td); td.innerHTML = intArray[j * 10 + k]; td.style.backgroundColor = 'blue'; td.style.color = 'white'; td.width = '30'; } } } </script> <table id="table"></table>
上面例子中用到的inter.js代码如下所示：
onmessage = function (event) { var data = event.data; var returnStr = ""; var intArray = data.split(';'); returnStr += intArray[0]; for (var i = 1; i < intArray.length; i++) { if (parseInt(intArray[i],10) % 3 == 0) { returnStr += ";" returnStr += intArray[i]; } } postMessage(returnStr); }
产生的界面效果图如下所示：
事实上，上面的这个生成随机数的例子还可以使用嵌套线程的方式来实现，具体如下所示：
主界面代码如下所示：
<script> var worker = new Worker('w1.js'); worker.postMessage(''); worker.onmessage = function (event) { if (event.data != '') { var j, k, tr, td, intArray = event.data.split(";"); var table = document.getElementById('table'); for (var i = 0; i < intArray.length; i++) { j = parseInt(i / 10, 10); k = i % 10; if (k == 0) { tr = document.createElement('tr'); tr.id = 'tr' + j; table.appendChild(tr); } else { tr = document.getElementById('tr' + j); } td = document.createElement('td'); tr.appendChild(td); td.innerHTML = intArray[j * 10 + k]; td.style.backgroundColor = 'blue'; td.style.color = 'white'; td.width = '30'; } } } </script> <table id="table"></table>
w1.js如下所示：
onmessage = function (event) { var intArray = new Array(100); var intStr = ""; for (var i = 0; i < 100; i++) { intArray[i] = parseInt(Math.random() * 100); } var w = new Worker('w2.js'); w.postMessage(JSON.stringify(intArray)); w.onmessage=function (event) { postMessage(event.data); } }
w2.js如下所示：
onmessage = function (event) { var intArray = JSON.parse(event.data); var returnStr = ""; returnStr += intArray[0]; for (var i = 1; i < intArray.length; i++) { if (parseInt(intArray[i], 10) % 3 == 0) { returnStr += ";" returnStr += intArray[i]; } } postMessage(returnStr); close(); }
在opera浏览器下运行正常，但在chrome下就报如下所示错误（可能chrome不允许次线程里面再创建线程吧）
要详细了解WebWorker，请看我的另外一篇博文 Web Worker
地理定位
地理定位其实很简单，就是利用navigator对象的一个属性geolocation
navigator.geolocation.getCurrentPosition(show_map); //其中show_map是回调函数。加上判断浏览器是否支持： function get_location() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(show_map); } else { alert("Your browser does not support geoLocation"); } } function show_map(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; showObject(position, 0);//把数据显示出来的函数 }
如果是在电脑上使用地理定位的话，浏览器会弹出如下所示提示信息
回调函数的参数position提供了一系列的参数供开发者使用
地理信息这东西，经常会出错，各种因素，例如信号不好等等。因此getCurrentPosition其实还有第二个参数，就是处理错误的，如下：
navigator.geolocation.getCurrentPosition(show_map,handle_error);
其中handle_error也是一个回调函数，提供一个err对象，包含code和message两个属性，使用方法较简单：
function handle_error(err){ switch(err.code){ case 1 : alert("permission denied"); break; case 2: alert("the network is down or the position satellites can't be contacted"); break; case 3: alert("time out"); break; default: alert("unknown error"); break; } }
事实上，getCurrentPosition其实还有第三个参数，是一个对象，可以设置超时时间、缓存时间等，具体如下图所示：
特别注意哦：enableHighAccuracy表示是否允许使用高精度，但这个参数在很多设备上设置了都没用，设备综合考虑电量、地理情况等，很多时候都是默认的由设备自身来调整。
maximumAge是指缓存的时间，例如maximumAge:120000（1分钟是60000）。那么如果10:00整的时候获取过一次地理信息，10:01的时候，再次调用navigator.geolocation.getCurrentPosition，返回的依然是10:00时候的数据（因为设置的缓存有效时间为2分钟），超过这个时间后缓存的地理位置信息被废弃，尝试重新获取地理位置信息，如果该值被指定为0，则无条件重新获取新的地理位置信息。
int watchCurrentPosition(onSuccess,onError,options)//持续监视当前地理位置的信息 void clearWatch(watchId);//停止获取当前用户的地理位置信息