Bitsmist Frameworks
Docs » LoaderOrganizer

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追加するコンポーネント名です。これがクラス名となります。
settingsObject追加するコンポーネントの設定情報です。
sync
Default:false
ObjectTrueならコンポーネントのロード完了を待ちます。

戻り値

なし。

参照する設定

  • loadings.autoLoad
  • loadings.autoMorph
  • loadings.loaderName
  • loadings.overwrite
  • loadings.rootNode
  • loadings.sync
  • loadings.tag
  • loadings.tagName

getLoader(loaderName)

型:Function Inject:Component

指定された名前のローダを返します。名前が指定されてない場合は、デフォルトのローダ(DefaultLoader)を返します。

パラメータ

パラメータ型説明
loaderName
デフォルト:“DefaultLoader”
String取得するローダの名称です。

戻り値

ローダオブジェクト。

loadComponent(tagName, className, settings, loadOptions)

型:undefined Inject:Component 非同期

コンポーネントのファイルをロードします。実際の処理はローダが行います。

パラメータ

パラメータ型説明
tagName
必須
Objectコンポーネントに紐づけるタグ名です。
className
必須
Stringコンポーネントのクラス名です。
settingsObjectコンポーネントの設定です。
loadOptionsObjectロードする際のオプションです。有効なキーには以下のものがあります。
“path”Stringロードするコンポーネントのパスを指定します。

戻り値

なし。

参照する設定

  • loadings.autoLoad
  • loadings.autoMorph
  • loadings.fileName
  • loadings.path
  • loadings.splitComponent
  • system.appBaseUrl
  • system.componentPath
  • system.splitComponent

loadTags(rootNode, options)

型:undefined Inject:Component 非同期

指定されたrootNode配下にある、ロードが必要なコンポーネントをロードします。実際の処理はローダが行います。

パラメータ

パラメータ型説明
rootNode
必須
HTMLElementロード対象の基点となるノードです。
optionsObjectロードのオプションです。有効なキーは以下のものがあります。
 “waitForTags”
デフォルト:false
BooleanTrueの場合、各コンポーネントが“ready”状態になるのを待ちます。

戻り値

なし。

参照する設定

  • bm-autoload
  • bm-automorph
  • bm-filename
  • bm-loadername
  • bm-path
  • bm-split

loadSetting(settingName, loadOptions)

型:undefined Inject:Component 非同期

コンポーネントの設定ファイルをロードします。ロードした設定は、コンポーネントの設定にマージされます。実際の処理はローダが行います。

パラメータ

パラメータ型説明
settingName
必須
String設定ファイルの名前です。拡張子は不要です。
loadOptionsObjectロードする際のオプションです。有効なキーは以下です。
“path”Stringロードする設定のパスを指定します。

戻り値

なし。

参照する設定

  • system.appBaseUrl
  • system.componentPath
  • loadings.path

loadSettingFile(settingName, path, loadOptions)

型:undefined Inject:Component 非同期

設定ファイルをロードします。実際の処理はローダが行います。

パラメータ

パラメータ型説明
settingName
必須
String設定ファイルの名前です。拡張子は不要です。
pathString設定ファイルへのパスです。
loadOptionsObjectロードする際のオプションです。有効なキーは以下です。
“type”
デフォルト:“js”
Stringロードする設定の種類を指定します。“json”または“js”です。種類が“js”の場合、スクリプトの中身が実行されます。
“bindTo”Object“type”が“js”の場合に、スクリプトを実行する際にバインドされるオブジェクトを指定します。

戻り値

なし。

loadTemplate(templateName, loadOptions)

型:undefined Inject:Component 非同期

テンプレートHTMLファイルをロードします。実際の処理はローダが行います。

パラメータ

パラメータ型説明
templateName
必須
Stringテンプレートのファイル名です。拡張子は不要です。
loadOptionsObjectロードする際のオプションです。有効なキーは以下です。
“path”Stringロードするテンプレートのパスを指定します。

戻り値

なし。

参照する設定

  • system.appBaseUrl
  • system.templatePath
  • loadings.path
Previous Next

© 2019-2023 Masaki Yasutake

Bitsmist Frameworks

Table of Contents

Table of Contents

  • LoaderOrganizer
    • 概要
    • オーガナイズ処理
    • 設定 (グローバル)
      • appBaseUrl
      • autoLoadOnStartup
      • componentPath
      • loaderName
      • templatePath
      • splitComponent
    • 設定
      • autoLoad
      • autoMorph
      • componentName
      • fileName
      • loaderName
      • overwrite
      • path
      • rootNode
      • splitComponent
      • sync
      • tag
      • tagName
    • タグ属性
      • bm-autoload
      • bm-automorph
      • bm-filename
      • bm-loadername
      • bm-path
      • bm-split
    • 拡張プロパティ
      • components
    • 拡張メソッド
      • addComponent(componentName, settings, sync)
      • getLoader(loaderName)
      • loadComponent(tagName, className, settings, loadOptions)
      • loadTags(rootNode, options)
      • loadSetting(settingName, loadOptions)
      • loadSettingFile(settingName, path, loadOptions)
      • loadTemplate(templateName, loadOptions)

全般

  • 概要
  • インストール
  • サンプルコンポーネントを作る

コンポーネントについて

  • ロード
  • 設定
  • イベント
  • オーガナイザによる拡張

リファレンス - コンポーネント

  • Component

リファレンス - オーガナイザ

  • EventOrganizer
  • LoaderOrganizer
  • OrganizerOrganizer
  • SettingOrganizer
  • StateOrganizer
  • TemplateOrganizer

リファレンス - ストア

  • Store
  • ChainableStore

リファレンス - ユーティリティ

  • AjaxUtil
  • ClassUtil
  • Util