99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

小編給大家分享一下Html5中多線程Worker類的使用方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

10年積累的成都做網(wǎng)站、成都網(wǎng)站制作經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有青龍免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

一、Worker類

　　1、方法介紹

　　（1）構(gòu)造函數(shù) new Worker(arg)  :參數(shù)表示你的線程要執(zhí)行的代碼所在的js文件，例如‘myworker.js’,構(gòu)造函數(shù)當然是返回一個Worker類的實例

　　（2）worker.postMessage(message):這個方法表示從主線程向子線程發(fā)送消息或者子線程向主線程發(fā)送消息，message一般是一個字符串，也可以將一個js對象轉(zhuǎn)成字符串發(fā)過去

　　（3）worker上還有一個message事件，當有人向這個worker實例發(fā)送消息時，該事件被觸發(fā)，我們可以從他的事件對象的data屬性中獲得post過來的值

　　可以看到Woker類的API是相當簡潔的，只有兩個最常用的方法，一個事件，下面我們來通過實際的例子看看。

//main.html



    
    


    

    
    發(fā)送
    


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

　　當我在文本框輸入“大～熊”點擊發(fā)送按鈕就會出現(xiàn)如下效果

　　簡單分析分析，我在主線程由thead1.js創(chuàng)建了一個Worker的實例worker，當點擊按鈕時會調(diào)用他的postMessage方法，將文本框中的內(nèi)容發(fā)送到thread1.js，我們的thread1.js怎么做的呢？是這樣，他偵聽message事件，主線程發(fā)送消息過來就觸發(fā)這個事件，執(zhí)行回調(diào)函數(shù)，回調(diào)函數(shù)從事件對象取得發(fā)送來的值，然后將這個值加上“帥氣！”,然后在發(fā)送回去。主線程呢也偵聽了worker的message事件，所以有消息過去時會觸發(fā)，將消息內(nèi)容顯示在p中，如此就看到了上面的效果。

　　或許你會將這有什么用呢？這里確實沒什么用，這里我們大可以在主線程還總完成加“帥氣！”的操作，因為他的復(fù)雜度為O(1)(哈哈，最近在學算法！)，但是假如不是做這么簡單的操作呢？這種方法的好處就是不過你的子線程做多么復(fù)雜的工作，都不會讓主線程停下來，主線程改干嘛還干嘛，等到子線程把數(shù)據(jù)處理好了他直接拿過來就好了。

　　陸老師將可以在子線程中在調(diào)用new Worker()創(chuàng)建新的子線程，我發(fā)現(xiàn)這樣是不可以的，會報undefined錯誤，也就是說子線程中是不能調(diào)用Worker構(gòu)造函數(shù)的，一開始以為是自己錯了，后來查閱了官方文檔，發(fā)現(xiàn)也沒有相關(guān)的描述。

　　下面看一個在主線程調(diào)用多個子線程的例子：

//main.html



    
    


    

    
    發(fā)送
    


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

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

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

//main.html



    
    


    

    
    發(fā)送
    


//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()導(dǎo)入了一個js文件，然后就可以調(diào)用里邊暴露出來的方法了。

二、SharedWorker類

　　SharedWorker的實質(zhì)在于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事件，不需要調(diào)用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è)置的數(shù)據(jù)，這說明我們的sharedWorker事實上是單例的，就像java中的static類一樣，不管new多少個，實際上只有一個，這樣我們的不同線程就可以共享到sharedWorker中的數(shù)據(jù)了。這里把圖給上，記得有篇文章沒給圖，然后有人給我建議了，問能不能給圖。

看完了這篇文章，相信你對“Html5中多線程Worker類的使用方法”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享標題：Html5中多線程Worker類的使用方法-創(chuàng)新互聯(lián)
標題URL：http://ef60e0e.cn/article/dgscjg.html