Worker

/*“父线程和worker线程有它们各自的独立空间,信息主要是来回交换而不是共享。”
*worker遵守同源策略 

*/

Worker 用于创建线程,不会阻塞页面。互相可以发送数据和接收数据。

var wk=new Worker('.js') 创建对象。

wk.postMessage('') 发送数据到线程

wk.addEventListener('message',fn(event){}) 接收线程发送的数据。

event.data //值

wk.terminate()//结束线程

还可绑定error 

线程内:

postMessage发送数据。

self表示本线程对象。

self.addEventListener('message')绑定接收事件。

self.color()//关闭线程。



var w;
function startWorker(){
if( typeof(Worker) !== 'undefined'){
w=new Worker('worker.js');
w.postMessage('父级传递的');
//还可通过 addEventListener 添加message事件
//参数event 有target(指向发送数据的worker) 和data 
w.onmessage=function(event){
console.log(event.data);
document.querySelector('#result').innerHTML=event.data;
}
//错误绑定
w.addEventListener('error',function(error){
console.log(error.lineno,error.message)
})

}else{
console.log('不支持')
}
}
function stopWorker(){
w.terminate();
}
/*worker分为专业线程和共享线程,以前是专业线程
*专业线程的脚本和页面一一对应。而共享线程在同源的多个页面间进行共享。
*/

/*“创建一个共享线程,直接将脚本的URL或worker的名字传入SharedWorker构造函数”
* 区别在于,共享worker与端口相关联,以保证父脚本或页面可以访问。
*/
/*由于它们具有共享的属性,你可以保持一个应用程序在不同窗口内的相同状态,
* 并且不同窗口的页面通过同一共享worker脚本保持和报告状态。

*/
var shareworker=new SharedWorker('shareworker.js');
var log = document.getElementById('result');

//当用onmessage绑定时不需要start()来启用链接
/*shareworker.port.onmessage=function(event){
console.log('share'+event.data);
}*/
//当用add绑定事件时需要调用start()来启用链接
shareworker.port.addEventListener('message', function(e) {
    log.textContent += '\n' + e.data;    
    console.log(e.data);
  }, false);
//当链接成功后线程onconnect函数可以获取到链接,并返回数据
shareworker.port.start(); // note: need this when using addEventListener
  shareworker.port.postMessage('ping');
 
  //告诉线程关闭
  //线程关闭需要在线程内触发
  //shareworker.port.postMessage('close');
  //shareworker.port.postMessage('closce');
</script>
专项线程的跨浏览器支持目前还不错,Chrome,Safari和Firefox目前的版本都支持,甚至IE这次都没有落后太多,IE10还是不错的。但是共享线程只有当前版本的Chrome和Safari支持。另外奇怪的一点是,Android 2.1的浏览器支持web worker,反而4.0版本不支持。苹果也从iOS 5.0开始支持web worker。


worker.js:



var i=0;
function timedCount(){
    i=i+1;
    postMessage(i);//发送数据postMessage
    setTimeout("timedCount()",500);
}
//进程中用self来表示当前对象,
//它可以绑定事件,还接收父级传递的值
self.addEventListener('message',function(evnet){
console.log(evnet.data);
});
//自调用结束
//self.close() 




timedCount();


shareworker.js:

/*共享线程可设置 onconnect函数。
 * 当有链接到时触发,它需要链接成功后才可获取到当前链接的对象。
 * e.prots[0]来获取链接当前链接,和绑定监听,发送数据,关闭链接
 * 
 */
var count=0;
onconnect = function(e) {
  count+=1;
  var port = e.ports[0];
  port.postMessage('Hello World!num:'+count);
  port.onmessage = function(e) {  
    port.postMessage(e.data+'pong');     
    if(e.data=='close'){
    port.close();
    }
  }
}


worker分为专业线程和共享线程,以前是专业线程

专业线程的脚本和页面一一对应。而共享线程在同源的多个页面间进行共享。

例如:同源中所有页面或脚本可以与同一个共享线程通信。

在多个页面中引用一人线程,线程内可以创建全局变量,onconnect内可以修改变量。这样第二个页面访问时可以获取这个变量。

也就是第一个页面修改后的值。而不会是新的默认值。

可以多个页面访问,全局保存信息,共多个页面使用。

由于它们具有共享的属性,你可以保持一个应用程序在不同窗口内的相同状态, 并且不同窗口的页面通过同一共享worker脚本保持和报告状态。

var shareworker=new SharedWorker('shareworker.js');

shareworker.port.addEventListener

需要在port上绑定message.

port.start()//需要手动开启链接。

当链接成功后线程onconnect函数可以获取到链接,并返回数据

port.postmessage()发送值。

线程内需要定义onconnect函数。

var port=e.ports[0]来获取当前链接对象。

通过链接对象来发送和接收数据,还有关闭此链接。

port.postMessage()

port.onmessage=fn(e)

port.close()

可以在全局创建变量,onconnect函数内来修改全局。

此线程一但被引用,有链接进入。就会缓存全局值。

其他链接成功可以访问全局值。




你可能感兴趣的:(Worker)