複数のスクリプトファイルを読み込んで利用する
Web Workersはワーカーオブジェクトを生成するときに実行するスクリプトファイルを指定しますが、ワーカー内でも別のスクリプトファイルを読み込めます。
ワーカー内でスクリプトファイルを読み込むには、importScripts()メソッドを使います。importScripts()は読み込みたいスクリプトファイルのURLを指定します。URLはカンマ区切りで複数指定できます。
例1:
importScripts("abc.js")
abc.jsを読み込み実行する
例2:
importScripts("abc.js","def.js")
abc.jsを読み込み実行し、その次にdef.jsを読み込み実行する
importScripts()で指定したファイルは読み込まれるとすぐに実行されます。また、スクリプトの途中でも使用できます。実際に複数のスクリプトファイルを読み込んで実行したのがサンプル3です。ワーカー(sub.js)ではmain.jsを呼び出し、さらにmain.jsでcalc.jsを呼び出しています。
サンプル3は呼び出し元からワーカーに渡された数値を、importScripts()で呼び出されるスクリプト(cals.js)で利用しています。このとき以下のようにvarを使ってcount変数を定義すると、importScripts()で呼び出されるスクリプトで参照できなくなります。
var count = event.data;
importScripts("calc.js");
importScripts()で呼び出されるスクリプトはワーカー内のグローバル変数にしかアクセスできないので、count変数はvar宣言しません。
count = event.data;
importScripts("calc.js");
一方、サンプル3のcalc.jsは以下のようにtotal変数を定義していますが、このtotal変数はimportScripts()で呼び出したスクリプト(main.js)からも参照できます。
var total = 0;
このようにワーカーでスクリプトを多重連結することは実際には少ないと思いますが、変数のスコープについては注意しましょう。
●サンプル3[HTML]
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Web Workersを使ってメッセージをやりとりする(3)</title>
</head>
<body>
<h1>Web Workersを使ってメッセージをやりとりする(3)</h1>
<form action="./ww.cgi" method="get">
<input type="button" id="sendMessage" value="ワーカーにメッセージを送信" />
</form>
<script>
document.getElementById("sendMessage").addEventListener("click", function(){
// ワーカー設定
var myWorker = new Worker("sub.js");
myWorker.addEventListener("message", function(event){
alert(event.data);
}, true);
myWorker.addEventListener("error", function(){} , true);
myWorker.postMessage(100);
}, true);
</script>
</body>
</html>
●サンプル3[sub.js]
importScripts("main.js");
●サンプル3[main.js]
addEventListener("message", function(event){
count = event.data;
importScripts("calc.js");
postMessage(total);
}, false);
●サンプル3[calc.js]
var total = 0;
for(var i=0; i<=count; i++){
total = total + i;
}