理解JavaScript中worker事件api_javascript技巧

如果你不是很了解Event事件，建議先這篇文章《理解javascript中DOM事件》。

首先，我們需要實例一個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線程主要是接收傳回的資料。

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的尺寸、以及拖曳瀏覽器時，主執行緒存取後台資料時，並不會中斷資料之間的進程。

支援Worker的browser有哪些？

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

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

// *註Worker的腳本目錄必須是HTML能夠存取到的目錄

以上就是本文的全部內容，希望對大家深入理解JavaScript中worker事件api有幫助。