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

首先，我們需要實(shí)例一個(gè)Worker的對(duì)象，瀏覽器會(huì)根據(jù)新創(chuàng)建的worker對(duì)象新開(kāi)一個(gè)接口，此接口會(huì)處理客戶端與indexedDB數(shù)據(jù)庫(kù)之間的通信。這里的數(shù)據(jù)庫(kù)是指瀏覽器數(shù)據(jù)庫(kù)。如果，你需要判斷瀏覽器是否支持worker對(duì)象，詳見(jiàn)如下代碼。或者瀏覽器是否支持indexedDB數(shù)據(jù)庫(kù)，詳見(jiàn)同下，二者判斷最好選擇前者。因?yàn)镮E不支持indexedDB 。

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

之后，worker對(duì)象會(huì)通過(guò)postMessage線程向indexedDB數(shù)據(jù)庫(kù)發(fā)送數(shù)據(jù)，當(dāng)indexedDB數(shù)據(jù)庫(kù)接收到客戶端發(fā)送的數(shù)據(jù)，首先把數(shù)據(jù)的鍵值儲(chǔ)存并記錄到indexedDB數(shù)據(jù)庫(kù)表里面，其實(shí)相當(dāng)于把數(shù)據(jù)保存在一張結(jié)構(gòu)完整的表內(nèi)。

于是，indexedDB數(shù)據(jù)庫(kù)會(huì)把接收到的數(shù)據(jù)值扔給新接口處理，當(dāng)新接口獲得數(shù)據(jù)并解析之后，會(huì)通過(guò)postMessage扔回一條數(shù)據(jù)給數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)接收返回的數(shù)據(jù)處理的方式和上面一樣，此時(shí)indexedDB數(shù)據(jù)庫(kù)會(huì)把返回的數(shù)據(jù)扔給客戶端接受參數(shù)的onmessage線程，主線程后面onmessage線程主要是接收傳回的數(shù)據(jù)。

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){ //接收到的數(shù)據(jù) e
   result.textContent = s.data;
  }
 }

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

想必大家看了以上的分析之后，肯定在想用Worker能做什么？對(duì)于這個(gè)問(wèn)題，目前能解決線程的非阻塞問(wèn)題，如何說(shuō)起，當(dāng)用戶改變browser的的尺寸、以及拖動(dòng)瀏覽器時(shí)，主線程訪問(wèn)后臺(tái)數(shù)據(jù)時(shí)，并不會(huì)中斷數(shù)據(jù)之間的進(jìn)程。

支持Worker的browser有哪些？

分享一個(gè)鏈接caniuse，通過(guò)這個(gè)工具你能更加全面的看到各個(gè)瀏覽器的（hack）。

// *注Worker的首字母必須是大寫(xiě)的

// *注Worker的腳本目錄必須是HTML能夠訪問(wèn)到的目錄

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家深入理解JavaScript中worker事件api有所幫助。

最新評(píng)論