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

2019-01-28 21:41:22于丽

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 }); }; })();