Web Worker线程进行数据交换

为了与Worker线程交换数据,Worker提供了如下方法:

▲postMessage(data):发送消息,提交data数据。

Worker提供了一个名为onmessage的事件监听器属性。当程序在前台JavaScript中调用postMessage(data)发送消息时,将会触发Worker线程启动的JavaScript脚本中的onmessage函数;当Worker线程启动的JavaScript脚本调用postMessage(data)发送消息时,将会触发为该Worker对象的onmessage事件绑定的监听器。

/

1.与Work线程交换数据

为了与Work线程交换更加复杂的数据,我们可以把复杂数据封装成JavaScript对象,在把JavaScript对象转为json字符串之后进行传递。

例子:允许用户输入两个数值,两个数值确定一个范围,而程序代码则负责计算、收集这个范围内的所有质数。

代码解释:上面程序中的粗体字代码把用户输入的两个数值封装成JavaScript对象,接下来程序把JavaScript对象转换为json字符串提交给Worker线程。当前台JavaScript脚本调用Worker对象的postMessage()方法提交消息时,将会触发Worker线程所启动的JavaScript脚本里的onmessge方法。

代码解释:使用浏览器来浏览该页面,并在两个文本框中输入两个整数,用于确定两个计算、收集质数的范围,然后单击页面上的"计算"按钮,程序将会把用户输入的数据提交给后台的Worker线程,当Worker线程计算、收集完成后,程序再次把计算结果返回给前台JavaScript。

/

2.Worker线程中可用的API

Worker线程所启动JavaScript脚本不能访问DOM API,不能动态地修改前台HTML界面组件。事实上,Worker线程所启动的JavaScript脚本甚至不能调用alert()、confirm()、prompt()等用户交互函数。

在Worker线程中可用API大致有如下几个:

①onmessage:这是一个事实监听器属性,通过为属性指定的函数可以获取前台JavaScript脚本提交过来的数据

②postMessage(data):这是Worker的核心方法。如果在Worker启动的JavaScript脚本中调用该方法提交消息,将会触发响应Worker对象的onmessage事件;如果调用前台JavaScript脚本中Worker对象的postMessage()方法提交消息,将会触发该Worker对象启动的JavaScript脚本中的nomessage事件监听器。

③importScripts(urls):这也似乎是Worker的核心方法。该方法可用于导入JavaScript脚本,该方法可以同时导入多个JavaScript脚本,例如importScripts("a.js","b.js","c.js");。

④sessionStorage/localStorage:完全可以在Worker线程中使用Storage来执行本地存储。

⑤Worker:Worker线程可以创新的Worker对象来启动嵌套线程。

⑥XMLHttpRequest:Worker线程中可以使用XMLHttpRequest来发送异步请求。

⑦navigator:这是一个WorkerNavigator对象,该对象的功能与window里的navigator属性相似。

⑧location:这是一个WorkerLocation对象,该对象的功能与window里的location属性相似。

⑨self:这是一个WorkerGlobalScope对象,该对象就代表了当前Worker线程自身的作用域。调用self的close()方法可以结束本线程。

⑩setTimeout()/setInterval()/eval()/isNaN()/parselnt()等:这些是与界面无关的JavaScript核心函数,包括使用Array/Data/Math/Number/Object/String等JavaScript核心类创建对象,以及使用这些类的对象。