HTML5之web workers_动力节点Java学院整理
|
// asynchronous alert message... asyncEval("3 + 2", function (sMessage) { alert("3 + 2 = " + sMessage); }); // asynchronous print message... asyncEval(""Hello World!!!"", function (sHTML) { document.body.appendChild(document.createTextNode(sHTML)); }); // asynchronous void... asyncEval("(function () {ntvar oReq = new XMLHttpRequest();ntoReq.open("get", "", false);ntoReq.send(null);ntreturn oReq.responseText;n})()"); 例子 #2：传输 JSON 的高级方式和创建一个交换系统 如果你需要传输非常复杂的数据，还要同时在主页与 Worker 内调用多个方法，那么可以考虑创建一个类似下面的系统。 example.html(the main page): <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>MDN Example - Queryable worker</title> <script type="text/javascript"> /* QueryableWorker instances methods: * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function * postMessage(string or JSON Data): see Worker.prototype.postMessage() * terminate(): terminates the Worker * addListener(name, function): adds a listener * removeListener(name): removes a listener QueryableWorker instances properties: * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly */ function QueryableWorker (sURL, fDefListener, fOnError) { var oInstance = this, oWorker = new Worker(sURL), oListeners = {}; this.defaultListener = fDefListener || function () {}; oWorker.onmessage = function (oEvent) { if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("vo42t30") && oEvent.data.hasOwnProperty("rnb93qh")) { oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh); } else { this.defaultListener.call(oInstance, oEvent.data); } }; if (fOnError) { oWorker.onerror = fOnError; } this.sendQuery = function (/* queryable function name, argument to pass 1, argument to pass 2, etc. etc */) { if (arguments.length < 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; } oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) }); }; this.postMessage = function (vMsg) { //I just think there is no need to use call() method //how about just oWorker.postMessage(vMsg); //the same situation with terminate //well,just a little faster,no search up the prototye chain Worker.prototype.postMessage.call(oWorker, vMsg); }; this.terminate = function () { Worker.prototype.terminate.call(oWorker); }; this.addListener = function (sName, fListener) { oListeners[sName] = fListener; }; this.removeListener = function (sName) { delete oListeners[sName]; }; }; // your custom "queryable" worker var oMyTask = new QueryableWorker("my_task.js" /* , yourDefaultMessageListenerHere [optional], yourErrorListenerHere [optional] */); // your custom "listeners" oMyTask.addListener("printSomething", function (nResult) { document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!")); }); oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) { alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)"); }); </script> </head> <body> <ul> <li><a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li> <li><a href="javascript:oMyTask.sendQuery('waitSomething');">Wait 3 seconds</a></li> <li><a href="javascript:oMyTask.terminate();">terminate() the Worker</a></li> </ul> </body> </html> my_task.js (the worker): // your custom PRIVATE functions function myPrivateFunc1 () { // do something } function myPrivateFunc2 () { // do something } // etc. etc. // your custom PUBLIC functions (i.e. queryable from the main page) var queryableFunctions = { // example #1: get the difference between two numbers: getDifference: function (nMinuend, nSubtrahend) { reply("printSomething", nMinuend - nSubtrahend); }, // example #2: wait three seconds waitSomething: function () { setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000); } }; // system functions function defaultQuery (vMsg) { // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly // do something } function reply (/* listener name, argument to pass 1, argument to pass 2, etc. etc */) { if (arguments.length < 1) { throw new TypeError("reply - not enough arguments"); return; } postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) }); } onmessage = function (oEvent) { if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("bk4e1h0") && oEvent.data.hasOwnProperty("ktp3fm1")) { queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1); } else { defaultQuery(oEvent.data); } }; 这是一个非常合适的方法，用于切换 主页-worker - 或是相反的 - 之间的消息。 通过转让所有权(可转让对象)来传递数据 （编辑：常州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
