このエントリでは、WebModule に使われている 実装パターン(WebModulePattern) について紹介しています。

WebModulePattern は、どこでも動作し見通しの良いモジュールを記述するためのコードパターンです。以下のように記述すると、Browser, Node.js, Worker, NW.js で動作するモジュールを構築できます。

WebModule におけるGLOBAL とは JavaScript のルート要素(window や self, global)を示す定数です。この値はWebModuleIdiom を使って導き出されます。

WebModulePattern を使って定義したモジュールは GLOBAL 直下ではなく、GLOBAL.WebModule 名前空間の下に export されます。

以下は、モジュールを定義する部分のコードを抜粋したものです。
function MyExample() { ... } がGLOBAL.WebModule.MyExample として export されます。

(functionmoduleExporter(name,closure){"use strict";varentity=GLOBAL["WebModule"]["exports"](name,closure);// Node.js 用に exportif(typeofmodule!=="undefined"){module["exports"]=entity;}// entity の 初期化処理//returnentity;})("MyExample",functionmoduleClosure(global){"use strict";functionMyExample(){ ...}returnMyExample;// return entity});

GLOBAL を導き出すコード やGLOBAL.WebModule.exports 関数などの共通コードは、WebModule.js に記述し、MyExample.js より先にロードしておきます。

また、古いスタイルで書かれたコードを WebModulePattern に書き直す方法 についても参照してください。

TBD: このセクションは推敲や検証が終わっていません。

WebModulePattern で書かれたコードを ES6::Modules の export に対応させるには先頭に1行追加します。

export// この行を追加(functionmoduleExporter(name,closure){"use strict";    :returnentity;})("MyExample",functionmoduleClosure(global){functionMyExample(){ ...}returnMyExample;// return entity});