可以看到我们的thread1.js并没有一个叫做tools.js的文件，但是它通过importScripts()导入了一个js文件，然后就可以调用里边暴露出来的方法了。
二、SharedWorker类
SharedWorker的实质在于share，不同的线程可以共享一个线程，他们的数据也是共享的。
直接用例子来探讨。
使用方法一：
| //main.html <!DOCTYPE HTML> <head> <title>Shared workers: demo 1</title> </head> <body> <div id="log"></div> <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拿得一个例子，下面先看第二种方法，再做分析
| <!DOCTYPE HTML> <html> <head> <title>Shared workers: demo 2</title> </head> <body> <div id="log"></div> <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事件，不需要调用worker.port.start(),第二种方法是通过addEventListener()方法监听message事件，需要worker.port.start()方法激活端口。他们不同于worker，当有人和他通信时触发connect事件，然后他的message事件是绑定在messagePort对象上的，不想worker那样，你可以回头看看worker是怎么做的。
那么sharedWorker是怎么共享数据的呢？请看下面的例子。
| //main1 和main2都是这样 <!DOCTYPE HTML> <html> <head> <title>Shared workers: demo 2</title> </head> <body> <div id="log"></div> <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; } } } |
