WebModuleIdiom

このエントリでは、WebModule に使われている Idiom(トリック) について解説しています。

---

WebModule はどこでも動きます。

この「どこでも動く」JavaScriptを実現するためのイディオムが WebModuleIdiom です。 この idiom を使うと、各プラットフォームにおけるルートオブジェクト(GLOBAL object)を獲得する事ができます。

// WebModuleIdiom
var GLOBAL = (this || 0).self || global;

GLOBAL が既に宣言されている環境では global の値で GLOBAL を上書きします、electron や Node.js がこのケースです。
GLOBAL が undefined の場合は (this || 0).self || global を各プラットフォームの都合に合わせて評価します。

platform	expression and result
Node.js and NW.js (Node context)	((global ││ 0).self ││ global) → ((GLOBAL).self ││ global) → ((undefined ││ global) → (global) → Global Object
WebWorkers	((WorkerGlobalScope ││ 0).self ││ undefined) → ((WorkerGlobalScope).self) → (WorkerGlobalScope.self) → Global Object
Browser and NW.js (Browser context)	((window ││ 0).self ││ undefined) → ((window).self) → (window.self) → Global Object

WebModuleIdiom with ES6 Modules

ES6 Module スコープ内はデフォルトで strict モードになります。
また strict モードにおいて this は undefined になるため、WebModule idiom の ((this ││ 0).self ││ global) がエラーになる環境も存在します。

var MY_GLOBAL = (this || 0).self || global; // -> Error "global" is not defined.

そのような場合は var GLOBAL = GLOBAL || self; を使い問題を解決します。

var GLOBAL = GLOBAL || self;

(function(global) {


})(GLOBAL);