Skip to content

SwitchModulePattern

uupaa edited this page May 26, 2015 · 3 revisions

同じモジュールを何度もロードしてしまうと、そのままでは恐らく困った事になります。

WebModule はそのようなトラブルを回避し、モジュールを多重ロードする仕組みがあります。
このようなモジュール名を衝突させない仕組みを SwitchModulePattern と呼んでいます。

以下のコードは、"MyExample" in GLOBAL が true なら alias = "MyExample_"; を行い、false なら alias = "MyExample"; を行っています。

(function moduleExporter(moduleName, moduleBody) { // http://git.io/WebModule

    var alias  = moduleName in GLOBAL ? (moduleName + "_") : moduleName; // switch
    var entity = moduleBody(GLOBAL);

    GLOBAL[alias] = entity;

})("MyExample", ...) {

});

SwitchModulePattern には、以下の使いどころがあります。

  1. 同じモジュールが何度もロードされてしまうと、後からロードしたモジュールが、先にロードされ既に動作しているモジュールを上書きしてしまい、不正な挙動を起こすようなトラブルを未然に防ぐことができます。

    • [A] 先に読み込んだモジュールは GLOBAL["MyExample"] = MyExample; としてロードします
    • [B] 後から同じモジュールは、GLOBAL["MyWebModule_"] = MyExample; としてロードします。先にロードしたモジュールの動作を阻害しません
    <script src="lib/MyExample.js">  <!-- [A] -->
    <script src="lib/MyExample.js">  <!-- [B] -->
  2. Minifyしていないコードと、Minify後のコードをGLOBAL以下に共存させ同時にテストできます

    • [C] GLOBAL["MyExample"] に Minify前のモジュールをロードしテストします
    • [D] GLOBAL["MyExample_"] に Minify後のモジュールをロードしテストします
    <script src="lib/MyExample.js">          <!-- [C] -->
    <script src="release/MyExample.min.js">  <!-- [D] -->
Clone this wiki locally