Web Worker javascript多线程编程(二)【分分快三计

作者:分分快三计划

上面上三个几个html页面分享叁个SharedWorker的欧洲经济共同体轻松例子:

哪些制造shared web worker
创办shared web worker与创建dedicated web worker方法相近,调用SharedWorker()构造函数,内定二个要在 worker 线程内运营的台本的 uri。
下边包车型大巴代码展现了何等通过SharedWorker()构造函数来创立贰个共享进度对象。

index1.html

onconnect = function(e) {
    var port = e.ports[0];

    port.addEventListener('message', function(e) {
      var workerResult = 'Result: '   (e.data[0] * e.data[1]);
      port.postMessage(workerResult);
    });

    port.start(); // 使用 addEventListener 监听message时需要. onmessage 则不需要
}

只顾:假若要使分享进度能够接连到多个不等的页面,那几个页面必得归属同生龙活虎的域(相近的合同,主机以致端口卡塔尔;

端口开启后,使用port.postmessage()向SharedWorker发送新闻,使用port.onmessage监听事件选用SharedWorker传递的音讯,代码演示如下:

onconnect = function(e) {
  var port = e.ports[0];
  port.onmessage(function (e) {
    var workerResult = 'Result: '   (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  })
};

留意:SharedWorker本身就是继承自Worker,所以与Worker雷同受近似的范围,关于节制在Web Worker javascript八十多线程编程(黄金时代卡塔尔中有介绍,在Worker的功效域中额外扩张了applicationCache应用缓存(不过已经从web标准中删除),另一个就是name,在使用构造函数创建SharedWorker对象时的一个可选参数。

first.onchange = function() {
    myWorker.port.postMessage([first.value,second.value]);
    console.log('Message posted to worker');
  }

  second.onchange = function() {
    myWorker.port.postMessage([first.value,second.value]);
    console.log('Message posted to worker');
  }

  myWorker.port.onmessage = function(e) {
    result1.textContent = e.data;
    console.log('Message received from worker');
  }

运用onmessage监听事件则代码如下:

myWorker.port.start();
var squareNumber = document.querySelector('#number3'),
    result2 = document.querySelector('.result2');
if (!!window.SharedWorker) {
  var myWorker = new SharedWorker("worker.js",'sw2_');
  squareNumber.oninput = function() {
    myWorker.port.postMessage([squareNumber.value, squareNumber.value]);
    console.log('Message posted to worker');
  };
  myWorker.port.onmessage = function(e) {
    result2.textContent = e.data;
    console.log('Message received from worker');
  }
}

worker.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <title>Shared Workers basic example</title>
    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
<h1>Shared<br>Workers<br>basic<br>example</h1>
<div class="controls" tabindex="0">
    <form>
        <div>
            <label for="number1">Multiply number 1: </label>
            <input type="text" id="number1" value="0">
        </div>
        <div>
            <label for="number2">Multiply number 2: </label>
            <input type="text" id="number2" value="0">
        </div>
    </form>
    <p class="result1">Result: 0</p>
    <p><a href="index2.html" target="_blank">Go to second worker page</a></p>
</div>
</body>
<script src="index1.js"></script>
</html>
var myWorker = new SharedWorker("worker.js","workerName");

index1.js

var first = document.querySelector('#number1'),
    second = document.querySelector('#number2'),
    result1 = document.querySelector('.result1');
if (!!window.SharedWorker) {
  var myWorker = new SharedWorker("worker.js",'sw1_');
  first.oninput = function() {
    myWorker.port.postMessage([first.value, second.value]);
    console.log('Message posted to worker');
  };
  second.oninput = function() {
    myWorker.port.postMessage([first.value, second.value]);
    console.log('Message posted to worker');
  };
  myWorker.port.onmessage = function(e) {
    result1.textContent = e.data;
    console.log('Message received from worker');
  };
}

与dedicated web worker分歧的是,shared web worker访谈worker通过sharedworker.port属性创设了二个messageport对象,该指标足以用来打开通讯和对分享进度展费用配。当使用add伊芙ntListener监听message事件时,端口要求手动运行,利用其start()方法,接受onmessage()则不用。

如此在worker的全局功用域中可访问name,在上例代码中值为"workerName"。

html {
  background-color: #7D2663;
  font-family: sans-serif;
}

h1 {
  margin: 0;
  font-size: 15vw;
  letter-spacing: -0.2rem;
  position: absolute;
  top: 0;
  z-index: -1;
}

p {
  margin: 0 0 1rem 0;
}

.controls {
  padding: 4vw;
  width: 75%;
  margin: 3vw auto;
  background-color: rgba(255, 255, 255, 0.7);
  border: 5px solid black;
  opacity: 0.3;
  transition: 1s all;
}

.controls:hover, .controls:focus {
  opacity: 1;
}

.controls label, .controls p, .controls input {
  font-size: 3vw;
}

.controls div {
  padding-bottom: 1rem;
}

index2.js

shared web worker:运维的是越来越广泛性的代码,可认为五个页面服务。它能够被与之相关联的多少个页面访谈,独有当全体关乎的的页面都关闭的时候,该Shared web worker才会停止。

onconnect = function(e) {
  var port = e.ports[0];
  port.onmessage = function(e) {
    var workerResult = name   'Result: '   (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  };
};

Web Worker javascript八线程编制程序(大器晚成卡塔 尔(阿拉伯语:قطر‎中涉嫌有二种Web Worker:专项使用线程dedicated web worker,以至共享线程shared web worker。然而关键讲了专项使用线程dedicated web worker,并未有说到共享线程shared web worker。那么那后生可畏篇随笔继上生机勃勃篇讲讲分享线程shared web worker。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <title>Shared Workers basic example</title>
    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Shared<br>Workers<br>basic<br>example</h1>
    <div class="controls" tabindex="0">
    <form>
      <div>
        <label for="number3">Square number: </label>   
        <input type="text" id="number3" value="0">
      </div>
    </form>
    <p class="result2">Result: 0</p>
    </div>
  </body>
  <script src="index2.js"></script>
</html>

style.css

在SharedWorker中,使用onconnect事件监听SharedWorker的具备页面总是在平等端口,相符用port.onmessage与页面通讯选拔消息,用port.postMessage向页面发回管理后的数码。

index2.html

var myWorker = new SharedWorker("worker.js");

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划