JavaScript:理解worker事件api

若是你不是很瞭解Event事件，建議先看我上一篇隨文javascript:理解DOM事件。或者直接看下文worker api。

hack

首先，咱們須要實例一個Worker的對象，瀏覽器會根據新建立的worker對象新開一個接口，此接口會處理客戶端與indexedDB數據庫之間的通訊。這裏的數據庫是指瀏覽器數據庫。若是，你須要判斷瀏覽器是否支持worker對象，詳見以下代碼。或者瀏覽器是否支持indexedDB數據庫，詳見同下，兩者判斷最好選擇前者。由於IE不支持indexedDB 。

if(window.Worker){ dosomething }
// Worker
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB; 
if(!window.indexedDB){ dosomething }
// indexedDB

工做原理

以後，worker對象會經過postMessage線程向indexedDB數據庫發送數據，當indexedDB數據庫接收到客戶端發送的數據，首先把數據的鍵值儲存並記錄到indexedDB數據庫表裏面，其實至關於把數據保存在一張結構完整的表內。

因而，indexedDB數據庫會把接收到的數據值扔給新接口處理，當新接口得到數據並解析以後，會經過postMessage扔回一條數據給數據庫，數據庫接收返回的數據處理的方式和上面同樣，此時indexedDB數據庫會把返回的數據扔給客戶端接受參數的onmessage線程，主線程後面onmessage線程主要是接收傳回的數據。

/* koringz.github.io
*
* $author koringz
* $date 2015-12-24
* $version 0.1
*
*/

var txt1 = document.querySelector("#txt1");
var txt2 = document.querySelector("#txt2");

var result = document.querySelector("#result");
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
    if(!window.indexedDB)
    {
        console.log("你的瀏覽器不支持IndexedDB");
    }
    if(window.Worker){
        var _this = new Worker("../../js/build/scroll_ten1.js");
        txt1.onchange = function(){ 
            _this.postMessage([txt1.value,txt2.value]); // e = [txt1.value,txt2.value]
            console.log("message post to work");
        }
        txt2.onchange = function(){
            _this.postMessage([txt1.value,txt2.value]); // e = [txt1.value,txt2.value]
            console.log("message post to work");
        }
        _this.onmessage = function(s){ //接收到的數據 e
            result.textContent = s.data;
        }
    }

onmessage = function(e){ //e接收Worker.postmessage傳的參數
    var s = (e.data[2]*e.data[1]);
    var workerResult =  "result  : " + s;
    postMessage(workerResult); //Worker.onmessage進行回調workerResult參數
}

想必你們看了以上的分析以後，確定在想用Worker能作什麼？對於這個問題，目前能解決線程的非阻塞問題，如何提及，當用戶改變browser的的尺寸、以及拖動瀏覽器時，主線程訪問後臺數據時，並不會中斷數據之間的進程。

browser

支持Worker的browser有哪些？

分享一個連接caniuse，經過這個工具你能更加全面的看到各個瀏覽器的（hack）。

// *注Worker的首字母必須是大寫的

// *注Worker的腳本目錄必須是HTML可以訪問到的目錄

完整js代碼訪問github