HTML5 Web Workers的簡單應(yīng)用

1.生成Worker

    創(chuàng)建一個新的worker十分簡單。你所要做的就是調(diào)用Worker()構(gòu)造函數(shù)，并指定一個要在 worker線程內(nèi)運(yùn)行腳本的URI。如果希望能夠收到worker的通知，可以將worker的onmessage屬性設(shè)置成一個特定的事件處理函數(shù)，代碼如下：

    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

    上述代碼中的第一行創(chuàng)建了一個新的worker線程。第二行為worker設(shè)置了message事件的監(jiān)聽 函數(shù)。當(dāng)worker調(diào)用自己的postMessage()函數(shù)時，就會調(diào)用這個事件處理函數(shù)。最后，第五行啟動了worker線程。

2.傳遞數(shù)據(jù)

    在主頁面與worker之間傳遞的數(shù)據(jù)是通過拷貝，而不是共享來完成的。傳遞給worker的對象需要經(jīng)過序列化，接下來在另一端還需要反序列化。頁面與worker不會共享同一個實例，最終的結(jié)果就是在每次通信結(jié)束時生成數(shù)據(jù)的一個副本。大部分瀏覽器使用結(jié)構(gòu)化拷貝來實現(xiàn)該特性。

    在此，創(chuàng)建一個名為emulateMessage()的函數(shù)，它將模擬從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傳回來的數(shù)據(jù)，代碼如下：

    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與主頁面之間傳輸?shù)南⑹冀K是JSON消息，即使它是一個原始類型的值。所以，完全可以傳輸JSON數(shù)據(jù)或任何能夠序列化的數(shù)據(jù)類型。

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