HTML5新特性之多线程工人SharedWorker的示例分析 - 行业资讯

　　介绍

这篇文章给大家分享的是有关HTML5新特性之多线程工人SharedWorker的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

一、工人类

1,方法介绍

(1)构造函数新工人(arg),:参数表示你的线程要执行的代码所在的js文件,例如mywork。js”,构造函数当然是返回一个工人类的实例

(2) worker.postMessage(消息):这个方法表示从主线程向子线程发送消息或者子线程向主线程发送消息,消息一般是一个字符串,也可以将一个js对象转成字符串发过去

(3)工人上还有一个消息事件,当有人向这个工人实例发送消息时,该事件被触发,我们可以从他的事件对象的数据属性中获得帖子过来的值

可以看到锅类的API是相当简洁的,只有两个最常用的方法,一个事件、下面我们来通过实际的例子看看。

//main.html 　　& lt; ! DOCTYPE html> & lt; html lang=癳n"祝辞& lt; head> 　　,,,& lt; meta charset=癠TF-8"比; 　　,,,& lt; title> main & lt;/head> & lt; body> 　　,,,& lt; p id=皁ut"祝辞& lt;/p> 　　,,,& lt; input 类型=皌ext", name=啊? id=皌xt"比; 　　,,,& lt; button id=癰tn"在发送& lt;/button> 　　,,,& lt; script 类型=拔谋?javascript"比; 　　,,,,,,,var out =, . getelementbyid (“out");,,,,,,,, 　　,,,,,,,var btn =, . getelementbyid (“btn");,,,,,,,, 　　,,,,,,,var txt =, . getelementbyid (“txt");,,,,,,,, 　　,,,,,,,var worker =, new 工人(“thread1.js"); 　　,,,,,,,btn.addEventListener (“click",函数(){,,,,,,,,,,, 　　,,,,,,,var postData =, txt.value; 　　,,,,,,,,,,,worker.postMessage (postData); 　　,,,,,,,},假); 　　,,,,,,,worker.addEventListener(& # 39;消息# 39;函数(e) { 　　,,,,,,,,,,,out.innerText =, e.data; 　　,,,,,,,},假),,,,,& lt;/script> & lt;/body> & lt;/html> //thread1.js 　　时间=onmessage 函数(事件){,,, 　　var res =, event.data +“帅气!“; 　　,,,postMessage (res); 　　}

当我在文本框输入“大~熊”点击发送按钮就会出现如下效果

HTML5新特性之多线程工人SharedWorker的示例分析

简单分析分析,我在主线程由thead1.js创建了一个工人的实例工人,当点击按钮时会调用他的postMessage方法,将文本框中的内容发送到thread1.js,我们的thread1。js怎么做的呢?是这样,他侦听消息事件,主线程发送消息过来就触发这个事件,执行回调函数,回调函数从事件对象取得发送来的值,然后将这个值加上“帅气!”,然后在发送回去。主线程呢也侦听了工人的消息事件,所以有消息过去时会触发,将消息内容显示在p中,如此就看到了上面的效果。

或许你会将这有什么用呢?这里确实没什么用,这里我们大可以在主线程还总完成加“帅气!”的操作,因为他的复杂度为O(1)(哈哈,最近在学算法!),但是假如不是做这么简单的操作呢?这种方法的好处就是不过你的子线程做多么复杂的工作,都不会让主线程停下来,主线程改干嘛还干嘛,等到子线程把数据处理好了他直接拿过来就好了。

陆老师将可以在子线程中在调用新工人()创建新的子线程,我发现这样是不可以的,会报未定义的错误,也就是说子线程中是不能调用工人构造函数的,一开始以为是自己错了,后来查阅了官方文档,发现也没有相关的描述。

下面看一个在主线程调用多个子线程的例子:

//main.html 　　& lt; ! DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　,,,& lt; meta charset=癠TF-8"比; 　　,,,& lt; title> main 　　& lt;/head> 　　& lt; body> 　　,,,& lt; div id=皁ut"祝辞& lt;/div> 　　,,,& lt; input 类型=皌ext", name=啊? id=皌xt"比; 　　,,,& lt; button id=癰tn"在发送& lt;/button> 　　,,,& lt; script 类型=拔谋?javascript"比; 　　　　,,,,,,,var out =, . getelementbyid (“out"); 　　,,,,,,,var btn =, . getelementbyid (“btn"); 　　,,,,,,,var txt =, . getelementbyid (“txt"); 　　,,,,,,,var worker1 =, new 工人(“thread1.js"); 　　,,,,,,,var worker2 =, new 工人(“thread2.js"); 　　,,,,,,,btn.addEventListener (“click",函数(){ 　　,,,,,,,,,,,var postData =, txt.value; 　　,,,,,,,,,,,worker1.postMessage (postData); 　　,,,,,,,},假); 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null