1.x SubModule

Summary

beez では、サブモジュール を前提とした開発を前提にしています。

サブモジュール開発とは

小・中規模のサービスの場合、複数の jsファイル を一つの jsファイル に optimize するのが一般的ですが、 大規模サービスを構築する上でのユーザエクスペリエンス向上のためにも、 画面別, 機能別にモジュールを分割し遅延ロードさせる仕組み(サブモジュール開発) が非常に重要です。

beez.Controller や beez.Router を、うまく使用することでシンプルで柔軟なサブモジュール開発が行えます。

beezの想定しているアーキテクチャに関してはArchitectureを参照してください。

ディレクトリ構成

プロジェクトのディレクトリ下の s をソースディレクトリとして、その直下のディレクトリが各モジュールのディレクトリとなることを想定しています。

モジュール毎のディレクトリ構造は一般的に下記のようになります。

example (Project Directory)
│
└── module_a
    │
    ├── hbs
    │   └── a.hbs
    │
    ├── img
    │   └── a_1.png
    │
    ├── index.js
    │
    ├── model
    │   └── amodel.js
    │
    ├── styl
    │   └── a.styl
    │
    └── view
        └── aview.js

module_a/index.js がこのモジュールのコントローラであることを想定しています。

これはbeezにおける制約です。

module_a/index.jsを起点に、module_aのリソースがrequireされていくことになります。

他モジュールとの連携

他のモジュールとの連携を行う際は、モジュールの独立性を高めるためにも、必ずコントローラを経由して行うべきです。

beezでは beez.Controller や beez.Routerを使ってモジュール間の連携を想定しています。 詳細はそれぞれのページを参照してください。

モジュールの追加

ディレクトリとソースの追加

前述したように、モジュールのディレクトリはs直下のディレクトリ群となります。 module_aというモジュールを作成する場合s/module_aというディレクトリを作成してください。 またコントローラとしてs/module_a/index.jsを作成してください。

設定の追加

設定ファイルの全容については Configuration を参照してください。

ビルド設定ファイル

build.[env].jsに設定を追加します。

この設定は requirejsの設定 そのものです。

下記は core モジュールと foo モジュールが存在するプロジェクトに module_a というモジュールを追加する例です。

({
//...
    modules: [
        {
            name: "core/index",
            include: [],
            exclude: ["beez"]
        },
        {
            name: "foo/index",
            include: [],
            exclude: ["beez", "core/index"]
        },
        // --
        // 追加したmodule
        {
            name: "module_a/index",        // path
            exclude: ["beez", "core/index"]// 依存しているが、ビルドに含めないmodule
        }
    ]
//...
})

Routingの設定

routerを使ってモジュールを読み込み、ハッシュフラグメントとコントローラのメソッドを 対応付けることができます。

そのための設定の例は下記のようになります。

詳細は beez.Router を参照してください。

// ...
//
"config": {
    "beez.core": {
        // ...
        "router": {
            "module_a": { // route識別名。わかりやすいもので良いです
                "route": "module_a",         // 設定するハッシュフラグメント
                "name": "module_a",          // 対応するメソッド名
                "require": "module_a/index", // 利用するmodule
                "xpath": "/@/module_a"       // managerに登録する際のpath
            }
        }
    }
}