Edited at

javascript node と browser と worker での挙動を比較してみた


はじめに

今更感はありますが、まとめてみようと思いました。


グローバルスコープが保持しているオブジェクトの違い

node.js: Object

browser: window

worker : workerGrobalScope

node.jsは、シンプルにオブジェクトです。

browserは、開いているウインドウを意味するインスタンスになっています。

workerのグローバルスコープは意識することが無いと思います。


必要不可欠な記述の差


node.js: サーバーを記述するという書き方。

ライブラリの読み込み

const server = require("http").createServer()

何かが起こったら何かをするという考えでイベントハンドラーを記述する。

server.on("get", (req, res) => {

res.writeHead(200, {'Content-Type' : 'text/html'});
res.end("hello world");
})

サーバーなのでtcp udp のポート番号とIPアドレスの指定をして、

通信を待ち受ける。

server.listen(8080)

ここまでがnode.js上での主要な書き方です。


browser: ビルトインオブジェクトが多い

HTMLElementの扱いとイベント処理を記述することがメインです。最近では端末のデバイスにアクセスできる方向もあります。

エレメント

const myArt = document.createElement("article");

myArt.id = "today";
myArt.class = "main article";
myArt.appendChild(new Text("hello world"));
document.body.appendChild(myArt);

イベント処理

myArt.addEventListener("drop", ((e) => e.style.backgroundColor = "#880088"));

以上がbrowserでの主要な書き方です。


worker: browser側でインスタンスを作成

インスタンスからのメッセージを受け取れるように、addEventListenerを記述します。

//browserから、workerを作成。

const worker = new Worker('worker.js');
worker.addEventListener("message", (e) => alert(e.data));
worker.postMessage('Hello World!');

self.addEventListener('message', (e) => {

console.log(e.data + "from View");
self.postMessage(e.data + "from worker");
});

worker内では、基本的にすごく遅い計算結果やpromiseの結果を返却したりします。

serviceWorkerの場合は、利用方法が違うようです。

よくまとまっている記事がありましたので、 こちら をどうぞ…

以上、javascriptの言語としての違いというより、実行環境の違いをまとめてみました。