オーガナイザによる拡張
概要
BitsmistJSの核であるComponentコンポーネントはごく単純な機能しか持ちません。各コンポーネントはオーガナイザを適用することで、機能を拡張できます。
例えばサンプルのハローコンポーネントでは、コンポーネントの名前とイベントハンドラを設定でセットしましたが、これらはそれぞれSettingOrganizerとEventOrganizerによって設定が読み込まれ、処理がされています。
オーガナイザには次の機能があります
- コンポーネントの処理中の決められたタイミングで処理を行う(オーガナイズ処理)。
- コンポーネントのインスタンスやプロトタイプにメソッド/プロパティを追加する。
デフォルトでは以下のオーガナイザがComponentコンポーネントに適用されています。
- EventOrganizer
- LoaderOrganizer
- OrganizerOrganizer
- SettingOrganizer
- StateOraganizer
- TemplateOrganizer
オーガナイザの適用
オーガナイザを適用するには、各コンポーネントの設定に記述する必要があります。その記述方法には2つあります。
- “organizers”設定に記述する
- オーガナイザが担当する設定を記述する
"organizers"設定に記述する
設定の“organizers”セクションに、適用したいオーガナイザーのクラス名を記述し、“attach”設定をTrueにします。
次の例ではEventOrganizerを適用しています。
_getSettings() { return { "organizers": { "EventOrganizer": { "settings": { "attach": true } } } }; }
オーガナイザが担当する設定を記述する
設定内にオーガナイザに紐づいているセクションを使用することで、自動的に担当するオーガナイザが適用されます。
_getSettings() { return { "events": { "this": { "click": "onClick" } } }; }
“events”というセクション名はEventOrganizerに紐づいているため、自動的にEventOrganizerが適用されます。
どのセクションにどのオーガナイザが紐づいているかは、以下をご覧ください。
オーガナイズ処理
各コンポーネントは特定のタイミング(オーガナイザイベント)でオーガナイザを呼び出す機能が備わっています。オーガナイザイベントは基本的に通常のユーザイベントと同じ名前がつけられ、同じタイミングにトリガーされます。ただし、通常はオーガナイザイベントの方がユーザイベントよりも先に発生するように設計されています。各コンポーネントにオーガナイザを適用することで、そのタイミングでオーガナイザの処理が実行されます。
例えばLoaderOrganizerは、テンプレートHTMLがノードに追加された後の“afterAppend”のタイミングで、設定内容の“molds”/“components”セクションを参照して、追加コンポーネントをロードします。
以下にどのオーガナイザがどのオーガナイザイベントで呼びだされるかを示します。各オーガナイザでどのような処理を行われるかについては、各リンク先を参照ください。
イベント | オーガナイザ | 説明 |
---|---|---|
beforeStart | EventOrganizer | 初期化をする前のタイミングです。 |
SettingOrganizer | ||
TemplateOrganizer | ||
afterStart | LoaderOrganizer | 初期化が完了した後のタイミングです。 |
afterAppend | EventOrganizer | テンプレートHTMLがコンポーネントにアタッチされた直後のタイミングです。 |
TemplateOrganizer | ||
(全て) | StateOrganizer | 全てのオーガナイザイベントで実行されます。 |
拡張メソッド/プロパティ
オーガナイザはコンポーネントのプロトタイプや各インスタンスに、プロパティやメソッドを追加する機能も持ちます。追加されたプロパティやメソッドは、それぞれ拡張プロパティ/拡張メソッドと呼びます。
以下にコアライブラリのオーガナイザの拡張プロパティ/メソッドの一覧を示します。詳細は各オーガナイザの説明をご覧ください。
オーガナイザ | 拡張プロパティ/メソッド |
---|---|
EventOrganizer | addEventHandler() |
getEventHandler() | |
initEvents() | |
removeEventHandler() | |
trigger() | |
triggerAsync() | |
LoaderOrganizer | components |
addComponent() | |
getLoader() | |
loadComponent() | |
loadTags() | |
loadSetting() | |
loadSettingFile() | |
loadTemplate() | |
OrganizerOrganizer | organizers |
callOrganizers() | |
initOrganizers() | |
StateOrganizer | state |
changeState() | |
waitFor() | |
TemplateOrganizer | activeTemplateName |
templates | |
addTemplate() | |
applyTemplate() | |
cloneTemplate() | |
hideConditionalElements() | |
showConditionalElements() |