HTML5 Web Workers的简单应用

1.生成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(""); //启动 worker

    上述代码中的第一行创建了一个新的worker线程。第二行为worker设置了message事件的监听 函数。当worker调用自己的postMessage()函数时，就会调用这个事件处理函数。最后，第五行启动了worker线程。

2.传递数据

    在主页面与worker之间传递的数据是通过拷贝，而不是共享来完成的。传递给worker的对象需要经过序列化，接下来在另一端还需要反序列化。页面与worker不会共享同一个实例，最终的结果就是在每次通信结束时生成数据的一个副本。大部分浏览器使用结构化拷贝来实现该特性。

    在此，创建一个名为emulateMessage()的函数，它将模拟从worker到主页面（反之亦然）之间通信过程中的变量的“拷贝而非共享”行为，代码如下：

    function emulateMessage (vVal) {

    return eval("(" + JSON.stringify(vVal) +")");

    )

    // Tests 

    // test #1

    var examplel = new Number (3);

    alert(typeof examplel);                // object

    alert(typeof emulateMessage(examplel));    // 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(examples));    // 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(examples).constructor);     // Object

    拷贝而并非共享的那个值称为消息，可以使用postMessage()将消息传递给主线程或从主线程传送回来，message事件的data属性就包含了从worker传回来的数据，代码如下：

    example.html:(主页面）:

    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与主页面之间传输的消息始终是JSON消息，即使它是一个原始类型的值。所以，完全可以传输JSON数据或任何能够序列化的数据类型。

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