欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

HTML5新特性之多線程WorkerSharedWorker的示例分析-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)HTML5新特性之多線程Worker SharedWorker的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司是專業(yè)的水城網(wǎng)站建設(shè)公司，水城接單;提供成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行水城網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!一、Worker類

1、方法介紹

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

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

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

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

//main.html
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>main</title></head><body>
    <p id="out"></p>
    <input type="text" name="" id="txt">
    <button id="btn">發(fā)送</button>
    <script type="text/javascript">
        var out = document.getElementById("out");        
        var btn = document.getElementById("btn");        
        var txt = document.getElementById("txt");        
        var worker = new Worker("thread1.js");
        btn.addEventListener("click",function(){            
        var postData = txt.value;
            worker.postMessage(postData);
        },false);
        worker.addEventListener('message',function(e){
            out.innerText = e.data;
        },false);    </script></body></html>
//thread1.js
onmessage = function(event){    
var res = event.data+"帥氣！";
    postMessage(res);
}

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

HTML5新特性之多線程Worker SharedWorker的示例分析

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

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

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

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

//main.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>main</title>
</head>
<body>
    <div id="out"></div>
    <input type="text" name="" id="txt">
    <button id="btn">發(fā)送</button>
    <script type="text/javascript">

        var out = document.getElementById("out");
        var btn = document.getElementById("btn");
        var txt = document.getElementById("txt");
        var worker1 = new Worker("thread1.js");
        var worker2 = new Worker("thread2.js");
        btn.addEventListener("click",function(){
            var postData = txt.value;
            worker1.postMessage(postData);
        },false);
        worker1.addEventListener('message',function(e){
            worker2.postMessage(e.data);
            
        },false);
        worker2.addEventListener('message',function(e){
            out.innerText = e.data;
        },false);
    </script>
</body>
</html>
//thread1.js
onmessage = function(event){    
var res = event.data+"帥氣！";
        postMessage(res);    
}
//thread2.js
onmessage = function(event){    
var res = event.data+"沒騙你喲！";
    postMessage(res);
    close();
}

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

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

//main.html
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>main</title></head><body>
    <p id="out"></p>
    <input type="text" name="" id="txt">
    <button id="btn">發(fā)送</button>
    <script type="text/javascript">

        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);    </script></body></html>
//thread1.js
importScripts('tools.js')
onmessage = function(event){
    var res = handler(event.data);
        postMessage(res);    
}
//tools.js
function handler(data){
    return data+"加油加油！"
}

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

二、SharedWorker類

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

直接用例子來探討。

使用方法一：

//main.html
<!DOCTYPE HTML><head>
    <title>Shared workers: demo 1</title></head><body>
    <p id="log"></p><script>
  var worker = new SharedWorker('shared.js');  
  var log = document.getElementById('log');
  worker.port.onmessage = function(e) { 
  // note: not worker.onmessage!    
  log.textContent += '\n' + e.data;
  }</script></body></html>
//shared.js

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

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

<!DOCTYPE HTML>
<html>
<head>
    <title>Shared workers: demo 2</title>
    </head>
    <body>
    <p id="log"></p>
    <script>
  var worker = new SharedWorker('shared.js');  
  var log = document.getElementById('log');
  worker.port.addEventListener('message', function(e) {
    log.textContent += '\n' + e.data;
  }, false);
  worker.port.start(); // note: need this when using addEventListener  
  worker.port.postMessage('ping');</script>
  </body></html>　　
//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，當(dāng)有人和他通信時(shí)觸發(fā)connect事件，然后他的message事件是綁定在messagePort對象上的，不想worker那樣，你可以回頭看看worker是怎么做的。

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

//main1 和main2都是這樣
<!DOCTYPE HTML>
<html>
<head>
    <title>Shared workers: demo 2</title>
    </head>
    <body>
    <p id="log"></p>
    <input type="text" name="" id="txt">
    <button id="get">get</button>
    <button id="set">set</button>
    <script>
  var worker = new SharedWorker('shared.js');  
  var get = document.getElementById('get');  
  var set = document.getElementById('set');  
  var txt = document.getElementById('txt');  
  var log = document.getElementById('log');

  worker.port.addEventListener('message', function(e) {
    log.innerText = e.data;
  }, false);
  worker.port.start(); // note: need this when using addEventListener
  set.addEventListener('click',function(e){
      worker.port.postMessage(txt.value);
  },false);

  get.addEventListener('click',function(e){
      worker.port.postMessage('get');
  },false);</script></body></html>
//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ù)，點(diǎn)擊set，然后在main2.html中點(diǎn)擊get法現(xiàn)能夠獲取到我們在main1.html中設(shè)置的數(shù)據(jù)，這說明我們的sharedWorker事實(shí)上是單例的，就像java中的static類一樣，不管new多少個(gè)，實(shí)際上只有一個(gè)，這樣我們的不同線程就可以共享到sharedWorker中的數(shù)據(jù)了。這里把圖給上，記得有篇文章沒給圖，然后有人給我建議了，問能不能給圖。

HTML5新特性之多線程Worker SharedWorker的示例分析

HTML5新特性之多線程Worker SharedWorker的示例分析

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

標(biāo)題名稱：HTML5新特性之多線程WorkerSharedWorker的示例分析-創(chuàng)新互聯(lián)
文章URL：http://chinadenli.net/article4/hpeie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、全網(wǎng)營銷推廣、品牌網(wǎng)站制作、網(wǎng)站排名、網(wǎng)站收錄、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化