//thread1.js
onmessage = function(event){    
var res = event.data+"帥氣！";
        postMessage(res);    
}

//thread2.js
onmessage = function(event){    
var res = event.data+"沒騙你喲！";
    postMessage(res);
    close();
}

主線程要完成一個任務需要兩個線程，它創(chuàng)建了兩個線程worker1,2,先向worker1請求，得到返回的數(shù)據(jù)后，再請求worker2,同時將worker1處理之后的數(shù)據(jù)交給worder2處理，然后拿到最終結果，顯示在頁面上。

在子線程中可以引入其他的js文件然后調用，比如下邊這個例子。

//main.html

    
    
    

    
    發(fā)送
    

        var out = document.getElementById("out");        
        var btn = document.getElementById("btn");        
        var txt = document.getElementById("txt");        
        var worker1 = new Worker("thread1.js");
        btn.addEventListener("click",function(){            
        var postData = txt.value;
            worker1.postMessage(postData);
        },false);
        worker1.addEventListener('message',function(e){
            out.innerText = e.data;
            
        },false);    

//thread1.js
importScripts('tools.js')
onmessage = function(event){
    var res = handler(event.data);
        postMessage(res);    
}

//tools.js
function handler(data){
    return data+"加油加油！"
}

可以看到我們的thread1.js并沒有一個叫做tools.js的文件，但是它通過importScripts()導入了一個js文件，然后就可以調用里邊暴露出來的方法了。

SharedWorker的實質在于share，不同的線程可以共享一個線程，他們的數(shù)據(jù)也是共享的。

直接用例子來探討。

使用方法一：

//main.html

    
    

//shared.js

onconnect = function(e) {
  var port = e.ports[0];
  port.postMessage('Hello World!');
}

這是從w3c拿得一個例子，下面先看第二種方法，再做分析

//shared
onconnect = function(e) {
  var port = e.ports[0];
  port.postMessage('Hello World!');
  port.onmessage = function(e) {
    port.postMessage('pong'); // not e.ports[0].postMessage!
    // e.target.postMessage('pong'); would work also
  }
}

第一種方法中是使用事件句柄的方式將聽message事件，不需要調用worker.port.start(),第二種方法是通過addEventListener()方法監(jiān)聽message事件，需要worker.port.start()方法激活端口。他們不同于worker，當有人和他通信時觸發(fā)connect事件，然后他的message事件是綁定在messagePort對象上的，不想worker那樣，你可以回頭看看worker是怎么做的。

那么sharedWorker是怎么共享數(shù)據(jù)的呢？請看下面的例子。

//main1 和main2都是這樣



    
    
    
    

    
    get
    set
    

//shared
var data;
onconnect = function(e) {
  var port = e.ports[0];
  port.onmessage = function(e) {
    
    if(e.data=='get'){
        port.postMessage(data);
    }else{
        data=e.data;
    }
  }
}

這里分析一波，我們在main1.html的文本框輸入數(shù)據(jù)，點擊set，然后在main2.html中點擊get法現(xiàn)能夠獲取到我們在main1.html中設置的數(shù)據(jù)，這說明我們的sharedWorker事實上是單例的，就像java中的static類一樣，不管new多少個，實際上只有一個，這樣我們的不同線程就可以共享到sharedWorker中的數(shù)據(jù)了。這里把圖給上，記得有篇文章沒給圖，然后有人給我建議了，問能不能給圖。

感謝各位的閱讀！關于“HTML5新特性之多線程Worker SharedWorker的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！