HTML5之web workers_动力节点Java学院整理

专用 Web Worker (Dedicated Web Worker) 提供了一个简朴的要领使得 web 内容可以或许在靠山运行剧本。一旦 worker 建设后，它可以向由它的建设者指定的变乱监听函数转达动静，这样该 worker 天生的全部使命就城市吸取到这些动静。worker 线程可以或许在不滋扰 UI 的环境下执利用命。其它，它还可以或许行使XMLHttpRequest(固然responseXML与channel 两个属性值始终是null)来执行I/O 操纵。本文通过提供例子和细节补全了前面的文档。提供应 worker 的函数列出了 worker 所支持的函数。

Worker接口会天生真正的操纵体系级此外线程，假如你不太警惕，那么并发(concurrency)会对你的代码发生风趣的影响。然而，对付 web worker 来说，与其他线程的通讯点会被很警惕的节制，这意味着你很难引起并发题目。你没有步伐去会见非线程安详的组件可能是 DOM，另外你还必要通过序列化工具来与线程交互特定的数据。以是你要是不费点劲儿，还真搞不堕落误来。天生 worker

建设一个新的 worker 异常简朴。你所要做的就是挪用Worker()结构函数，指定一个要在 worker 线程内运行的剧本的 URI，假如你但愿可以或许收到 worker 的关照，可以将 worker 的onmessage属性配置成一个特定的变乱处理赏罚函数。

var myWorker = new Worker("my_task.js"); myWorker.onmessage = function (oEvent) { console.log("Called back by the worker!n"); };

可能，你也可以行使addEventListener()：

var myWorker = new Worker("my_task.js"); myWorker.addEventListener("message", function (oEvent) { console.log("Called back by the worker!n"); }, false); myWorker.postMessage(""); // start the worker.

例子中的第一行建设了一个新的 worker 线程。第三举动 worker 配置了message变乱的监听函数。当 worker 挪用本身的postMessage() 函数时就会挪用这个变乱处理赏罚函数。最后，第七行启动了 worker 线程。留意： 传入Worker结构函数的参数 URI 必需遵循同源计策。今朝，差异的赏识器制造商对付哪些 URI 应该遵循同源计策另有分歧；Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) 及后续版本应承传入 data URI，而 Internet Explorer 10 则不以为 Blob URI 对付 worker 来说是一个有用的剧本。

转达数据

在主页面与 worker 之间转达的数据是通过拷贝，而不是共享来完成的。转达给worker 的工具必要颠末序列化，接下来在另一端还必要反序列化。页面与 worker不会共享统一个实例，最终的功效就是在每次通讯竣事时天生了数据的一个副本。大部门赏识器行使布局化拷贝来实现该特征。

在往下举办之前，出于解说的目标，让我们建设一个名为emulateMessage()的函数，它将模仿在从worker到主页面(反之亦然)的通讯进程中，变量的「拷贝而非共享」举动：

function emulateMessage (vVal) { return eval("(" + JSON.stringify(vVal) + ")"); } // Tests // test #1 var example1 = new Number(3); alert(typeof example1); // object alert(typeof emulateMessage(example1)); // number // test #2 var example2 = true; alert(typeof example2); // boolean alert(typeof emulateMessage(example2)); // boolean // test #3 var example3 = new String("Hello World"); alert(typeof example3); // object alert(typeof emulateMessage(example3)); // string // test #4 var example4 = { "name": "John Smith", "age": 43 }; alert(typeof example4); // object alert(typeof emulateMessage(example4)); // object // test #5 function Animal (sType, nAge) { this.type = sType; this.age = nAge; } var example5 = new Animal("Cat", 3); alert(example5.constructor); // Animal alert(emulateMessage(example5).constructor); // Object

拷贝而并非共享的谁人值称为动静。再来谈谈worker，你可以行使postMessage() 将动静转达给主线程或从主线程传送返来。message变乱的data属性就包括了从 worker 传返来的数据。

example.html: (主页面):

var myWorker = new Worker("my_task.js"); myWorker.onmessage = function (oEvent) { console.log("Worker said : " + oEvent.data); }; myWorker.postMessage("ali"); my_task.js (worker): postMessage("I'm working before postMessage('ali')."); onmessage = function (oEvent) { postMessage("Hi " + oEvent.data); };

留意：凡是来说，靠山线程 – 包罗 worker –无法操纵 DOM。假如靠山线程必要修改 DOM，那么它应该将动静发送给它的建设者，让建设者来完成这些操纵。

如你所见，worker与主页面之间传输的动静始终是「JSON 动静」，纵然它是一个原始范例的值。以是，你完全可以传输JSON数据 和/或 任何可以或许序列化的数据范例：

postMessage({"cmd": "init", "timestamp": Date.now()});

转达数据的例子

例子 #1： 建设一个通用的 「异步eval()」

下面这个例子先容了，如安在 worker 内行使eval()来按次序执行异步的任何种类的 JavaScript 代码：

// Syntax: asyncEval(code[, listener]) var asyncEval = (function () { var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D"); oParser.onmessage = function (oEvent) { if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); } delete aListeners[oEvent.data.id]; }; return function (sCode, fListener) { aListeners.push(fListener || null); oParser.postMessage({ "id": aListeners.length - 1, "code": sCode }); }; })();

示例行使：

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!