Workerをちょっとだけさわった。

ちょっとWorkerを使ってみようかと思って試してみた。

使い方

var worker = new Worker("worker.js");

みたいにする。
workerにお仕事してもらう内容は、worker.jsって別ファイルに記述する。

worker.js

onmessage = function (evt) {
    var data = evt.data
    //お仕事
}

onmessageイベントをトリガーに処理をさせるらしい。
で、workerと呼び出し元の親とのやり取りは

worker.postMessage(/* 渡したいデータ */);

みたくする。
受け取りはeventオブジェクトのdataプロパティから取り出せる。
どうやらここで渡せるのはchromeだと文字列になってしまうらしい。
なので、objectをわたすと[object object]になってしまう。
FFだとうまくいった。
あとそもそもFunctionは渡せない。
データの受け渡しならJSON.stringifyとJSON.parseをかませて
受け渡すようにすればどうにか解消される。

応用編？

用途や処理内容によると思うけど、
1worker(ファイル)に複数のお仕事ができるようにさせてみる
（そもそも、workerは重い処理をさせる想定でこういったつくりになっているから
今からやるやり方は正しいやり方（使い方？）とはいえないと思う）

workerで足し算してみる（本来はこんな軽い処理で使わないけど）

var worker = new Worker("worker.js");
worker.postMessage([2, 3]);
worker.onmessage = function (evt) {
    alert(evt.data);
};

worker.js

onmessage = function (evt) {
    postMessage(evt.data[0] + evt.data[1]);
};

これに引き算もできるようにしてみる

var worker = new Worker("worker.js");
worker.postMessage(["add", 2, 3]);// 足し算
worker.postMessage(["sub", 2, 3]);// 引き算
worker.onmessage = function (evt) {
    alert(evt.data);
};

worker.js

var works = {
    "add": function (a, b) {
        return a + b;
    },
    "sub": function (a, b) {
        return a - b;
    }
};
onmessage = function (evt) {
    var data = evt.data;
    var work = data.shift();
    var args = data;
    if (works[work]) {
       postMessage(works[work].apply(this, args));
    } else {
       postMessage(null);
    }
};

こうすれば割とできる。
これだと何の結果が戻ってきているのかわからないので
worker.js同様なんらかの目印をつけて処理を分岐する必要はある。

とりあえずこんな感じだ。

workerは呼び出し側とworker側で似たようなことを書かないと
いけないのがちょっと不便と感じた。