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);//中止獲取當前用戶的地理位置信息