- Notifications
You must be signed in to change notification settings - Fork8
WebModulePattern
このエントリでは、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 されます。
GLOBAL["WebModule"]["exports"]("MyExample",function(global){"use strict";functionMyExample(){ ...}returnMyExample;// return entity});
モジュールの実体(entity, この場合はfunction MyExample() { ... }) を使って何か操作を行う場合は、moduleExporter と moduleClosure 関数を使い、以下のように記述してください。
(functionmoduleExporter(name,closure){"use strict";varentity=GLOBAL["WebModule"]["exports"](name,closure);// 初期化処理: entity に対する操作や、外部への登録処理などreturnentity;})("MyExample",functionmoduleClosure(global){"use strict";functionMyExample(){ ...}returnMyExample;// return entity});
GLOBAL を導き出すコード やGLOBAL.WebModule.exports 関数などの共通コードは、別ファイル(WebModule.js)に記述し、MyExample.js より先にロードしておきます。
// http://git.io/WebModule// --- global variables ------------------------------------// https://github.com/uupaa/WebModule/wiki/WebModuleIdiomvarGLOBAL=GLOBAL||(this||0).self||global;// --- environment detection -------------------------------GLOBAL.IN_NODE_OR_NW=!!GLOBAL.global;GLOBAL.IN_BROWSER=!GLOBAL.IN_NODE_OR_NW&&"document"inGLOBAL;GLOBAL.IN_WORKER=!GLOBAL.IN_NODE_OR_NW&&"WorkerLocation"inGLOBAL;GLOBAL.IN_NODE=GLOBAL.IN_NODE_OR_NW&&!/native/.test(setTimeout);GLOBAL.IN_NW=GLOBAL.IN_NODE_OR_NW&&/native/.test(setTimeout);// --- validate and assert functions -----------------------// https://github.com/uupaa/WebModule/wiki/ValidateGLOBAL.$type=function(value,types){returnGLOBAL["Valid"] ?GLOBAL["Valid"].type(value,types) :true;};GLOBAL.$keys=function(value,keys){returnGLOBAL["Valid"] ?GLOBAL["Valid"].keys(value,keys) :true;};GLOBAL.$some=function(value,candidate,ignoreCase){returnGLOBAL["Valid"] ?GLOBAL["Valid"].some(value,candidate,ignoreCase) :true;};GLOBAL.$args=function(api,args){if(GLOBAL["Valid"]){GLOBAL["Valid"].args(api,args);}};GLOBAL.$valid=function(value,api,highlihgt){if(GLOBAL["Valid"]){GLOBAL["Valid"](value,api,highlihgt);}};// --- WebModule ------------------------------------------GLOBAL.WebModule={exports:function(name,closure){varalias=nameinGLOBAL ?(name+"_") :name;varentity=aliasinthis ?this[alias] :this[alias]=closure(GLOBAL);if(typeofexports!=="undefined"){module["exports"]=entity;}returnentity;}};
古いスタイルで書かれたコードを WebModulePattern に書き直す方法 についても参照してください。
TBD: このセクションは推敲や検証が終わっていません。
WebModulePattern で書かれたコードを ES6::Modules の export に対応させるには先頭に1行追加します。
export// この行を追加GLOBAL["WebModule"]["exports"]("MyExample",function(global){"use strict";functionMyExample(){ ...}returnMyExample;// return entity});