LoaderOrganizer
継承:Organizer
概要
LoaderOrganizerはクラスファイル・設定ファイル・テンプレートHTMLファイルのロードなど、ロードに関する機能を担当します。注記事項として、LoaderOrganizerの仕事はローダを呼び出すだけであって、実際の処理はローダによって行われます。
オーガナイズ処理
全体の処理として、DOMがロードされた時にページ内のロードが必要なタグのファイルを読み込みます。
特定のコンポーネントにアタッチされた場合、“molds”/“components”セクションから設定を読み込み、コンポーネントを追加します。どちらのセクションもコンポーネントを追加するという意味では同じですが、大きな違いはデフォルトで同期するかどうかです。“molds”セクションに書かれているコンポーネントの場合は、前のコンポーネントの追加を待ってから次のコンポーネントを追加します。“molds”の全ての処理が完了後、“components”に記載されているコンポーネントの追加を開始します。こちらは前のコンポーネントの追加を待たずに、次のコンポーネントの追加に取り掛かります。そのためロードの開始は順番通りに行われますが、ロードの終了は順番通りにならない可能性があります。
セクション
- molds
- components
処理タイミング
- DOMContentLoaded (Native event)
- afterStart
設定 (グローバル)
書式:
{ "system": { "appBaseUrl": <appBaseUrl>, "componentPath": <componentPath>, "loaderName": <loaderName>, "templatePath": <templatePath>, "splitComponent": <splitComponent> }, "organizers": { "LoaderOrganizer": { "settings": { "autoLoadOnStartup": <autoLoadOnStartup> } } } }
appBaseUrl
型:String
アプリケーションのベースとなるURLを指定します。
autoLoadOnStartup
型:Boolean
デフォルト:true
Trueの場合、DOMが読み込まれた時点でオートロード処理を開始します。
componentPath
型:String
コンポーネントの共通のパスを指定します。
loaderName
型:String
デフォルト:“DefaultLoader”
コンポーネントをロードするローダの名前を指定します。
templatePath
型:String
コンポーネントのテンプレートの共通のパスを指定します。
splitComponent
型:String
デフォルト:false
コンポーネントのファイルが分割されているかを指定します。Trueの場合、ローダーは2つのファイルを読み込みます。
設定
追加コンポーネント設定は“components”または“molds”セクションに記述します。
書式:
{ "molds"/"components": { <componentName>: { "loadings": { "autoLoad": <autoLoad>, "autoMorph": <autoMorph>, "fileName": <fileName>, "loaderName": <loaderName>, "overwrite": <overwrite>, "path": <path>, "rootNode": <rootNode>, "splitComponent": <splitComponent>, "sync": <sync>, "tag": <tag>, "tagName": <tagName>, } } }, }
<componentName>の値として設定するオブジェクトは、追加するコンポーネントに対する設定となります。ここで記述された値は、そのコンポーネントの設定にマージされます。ここではLoaderOrganizerによって処理される“loadings”セクションのみ接召しますが、その他のセクションも同様にここで設定することができます。
例:
{ "molds": { "PadSidebar": { "loadings": { "rootNode": "#content" }, "settings": { "name": "PadSidebar" } } }, "components": { "PadSetting": { "loadings": { "rootNode": "#main" }, "settings": { "name": "PadSetting" } } } }
autoLoad
型:String/true
コンポーネントに必要なファイルを自動的にロードすることを示します。値としてTrue、コンポーネントのJSファイルへのURL、テンプレートHTMLファイルへのURLのいずれかを指定することができます。Trueの場合は、デフォルトのパスとファイル名が使用されます。
autoMorph
型:String/true
Default:“BITSMIST.v1.Component”
コンポーネントをインスタンス化する際に使用するクラス名を指定します。このクラスを継承した新しいクラスが作成され、それがタグに紐づけられます。指定するクラスがまだ存在しない場合は、autoLoadオプションも同時に使用してクラスをロードする必要があります。
componentName
型:String
コンポーネントの名前を指定します。また、この値がクラス名となります。
fileName
型:String
デフォルト:<タグ名>
コンポーネントのファイル名を拡張子なしで指定します。指定がない場合は、タグ名がファイル名となります。 クラスファイル、テンプレートファイルの両方に使用されます。
loaderName
型:String
デフォルト:“DefaultLoader”
コンポーネントをロードするローダの名前を指定します。
overwrite
型:Boolean
デフォルト:false
親ノードを上書きするかを指定します。Trueの場合、親ノードはコンポーネントで上書きされます。
path
型:String
コンポーネントのファイルをロードするパスを指定します。
rootNode
型:String
このコンポーネントがアタッチするノードを指定します。
splitComponent
型:Boolean
デフォルト:false
コンポーネントのファイルが分割されているかを指定します。Trueの場合、ローダーは2つのファイルを読み込みます。
sync
型:String/Boolean
デフォルト:false
文字列が指定された場合、追加したコンポーネントが指定したステートになるのを待ちます。Trueの場合は、“ready”になるのを待ちます。
tag
型:String
コンポーネントのタグを指定します。この値でHTMLに挿入されます。tagNameと違い、属性やクラスも指定できます。
tagName
型:String
デフォルト:(説明参照)
このコンポーネントのタグの名前を指定します。指定されてない場合、タグ名はクラス名から生成されます。クラス名はパスカルケースと仮定し、2つ目の大文字の文字を境に2つの単語に区切られ、ハイフンで連結されます。
タグ属性
いくつかの設定はタグの属性に指定することもできます。タグ属性は他の設定より高い優先順位を持っています。
bm-autoload
型:String
コンポーネントに必要なファイルを自動的にロードすることを示します。値としてコンポーネントのJSファイルへのURLか、テンプレートHTMLファイルへのURLを指定することができます。指定がない場合は、デフォルトのパスとファイル名が使用されます。"loadings.autoLoad"と同じです。
bm-automorph
型:String/(none)
タグをインスタンス化する際、指定されたクラスを使用します。"loadings.autoMorph"と同じです。指定がない場合は、BITSMIST.v1.Componentを使用します。
bm-filename
型:String
コンポーネントのファイル名を指定します。拡張子は不要です。"loadings.fileName"と同じです。
bm-loadername
型:String
デフォルト:“DefaultLoader”
コンポーネントをロードするローダを指定します。"loadings.loaderName"と同じです。
bm-path
型:String
コンポーネントのファイルをロードするパスを指定します。 "loadings.path"と同じです。
bm-split
型:(none)
コンポーネントのファイルが分割されているかを指定します。値は不要です。"loadings.splitComponent"と同じです。
拡張プロパティ
components
型:Object
Inject:component
get
このコンポーネントに追加されたコンポーネントを保持するオブジェクトです。
拡張メソッド
addComponent(componentName, settings, sync)
型:undefined
非同期
Inject:component
コンポーネント内に新たなコンポーネントを追加します。追加したコンポーネントのインスタンスは、componentsプロパティに追加されます。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
componentName 必須 | String | 追加するコンポーネント名です。これがクラス名となります。 |
settings | Object | 追加するコンポーネントの設定情報です。 |
sync Default:false | Object | Trueならコンポーネントのロード完了を待ちます。 |
戻り値
なし。
参照する設定
getLoader(loaderName)
型:Function
Inject:Component
指定された名前のローダを返します。名前が指定されてない場合は、デフォルトのローダ(DefaultLoader)を返します。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
loaderName デフォルト:“DefaultLoader” | String | 取得するローダの名称です。 |
戻り値
ローダオブジェクト。
loadComponent(tagName, className, settings, loadOptions)
型:undefined
Inject:Component
非同期
コンポーネントのファイルをロードします。実際の処理はローダが行います。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
tagName 必須 | Object | コンポーネントに紐づけるタグ名です。 |
className 必須 | String | コンポーネントのクラス名です。 |
settings | Object | コンポーネントの設定です。 |
loadOptions | Object | ロードする際のオプションです。有効なキーには以下のものがあります。 |
“path” | String | ロードするコンポーネントのパスを指定します。 |
戻り値
なし。
参照する設定
loadTags(rootNode, options)
型:undefined
Inject:Component
非同期
指定されたrootNode配下にある、ロードが必要なコンポーネントをロードします。実際の処理はローダが行います。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
rootNode 必須 | HTMLElement | ロード対象の基点となるノードです。 |
options | Object | ロードのオプションです。有効なキーは以下のものがあります。 |
“waitForTags” デフォルト:false | Boolean | Trueの場合、各コンポーネントが“ready”状態になるのを待ちます。 |
戻り値
なし。
参照する設定
loadSetting(settingName, loadOptions)
型:undefined
Inject:Component
非同期
コンポーネントの設定ファイルをロードします。ロードした設定は、コンポーネントの設定にマージされます。実際の処理はローダが行います。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
settingName 必須 | String | 設定ファイルの名前です。拡張子は不要です。 |
loadOptions | Object | ロードする際のオプションです。有効なキーは以下です。 |
“path” | String | ロードする設定のパスを指定します。 |
戻り値
なし。
参照する設定
loadSettingFile(settingName, path, loadOptions)
型:undefined
Inject:Component
非同期
設定ファイルをロードします。実際の処理はローダが行います。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
settingName 必須 | String | 設定ファイルの名前です。拡張子は不要です。 |
path | String | 設定ファイルへのパスです。 |
loadOptions | Object | ロードする際のオプションです。有効なキーは以下です。 |
“type” デフォルト:“js” | String | ロードする設定の種類を指定します。“json”または“js”です。種類が“js”の場合、スクリプトの中身が実行されます。 |
“bindTo” | Object | “type”が“js”の場合に、スクリプトを実行する際にバインドされるオブジェクトを指定します。 |
戻り値
なし。
loadTemplate(templateName, loadOptions)
型:undefined
Inject:Component
非同期
テンプレートHTMLファイルをロードします。実際の処理はローダが行います。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
templateName 必須 | String | テンプレートのファイル名です。拡張子は不要です。 |
loadOptions | Object | ロードする際のオプションです。有効なキーは以下です。 |
“path” | String | ロードするテンプレートのパスを指定します。 |
戻り値
なし。