Bitsmist Frameworks
Docs » RouteOrganizer

RouteOrganizer

継承:Organizer

概要

RouteOrganizerはアプリケーションのルーティングに関する処理を担当します。例えばこのURLの場合には、特定の処理をするといった用途に利用します。

ルートの決定

このオーガナイザを利用する場合、どのようなルートが存在するかを設定の”routes”セクションに設定します。このルート情報と現在のURLを元に現在のルートが決定されます。以下は設定例です。

"routes": [
  {
    "name": "list",
    "path": "/:resource/list/",
    "specName": "{{:resource}}",
  },
  {
    "name": "top",
    "path": "/",
    "specName": "top",
  }
]

ルート情報配列の先頭から順番に、以下の条件が全て一致したものが、現在のルートとして採用されます。

  1. (originの指定がある場合)originと一致する。
  2. (pathの指定がある場合)URLとpathが正規表現で一致する

スペックファイル

RouteOrganizerはルートを決定した後、そのルート固有の設定ファイルを追加で読み込むことができます。その追加で読み込む設定ファイルは、スペックファイル(Spec file)と呼ばれます。スペックファイルに記述される内容は、通常のコンポーネントの設定ファイルと同じです。

ルートの変更

openRoute()メソッドを呼ぶことで、違うルート(URL)ヘ移動することができます。openRoute()は以下の流れで処理を行います。

  1. options[“jump”]がTrue、または新しいルート情報が存在しない場合は、新しいURLヘ遷移します。
  2. hitory.pushState()し、新しいURLを履歴に追加します。
  3. 新しいルートが違うスペックファイルを要求する場合、updateRoute()メソッドを呼びます。(現在未実装)
  4. URLの検証を行います。
  5. アタッチされているコンポーネントのrefresh()メソッドを呼びます。
  6. URLの正規化を行います。

現状ではupdateRoute()メソッドが機能していないため、スペックファイルが違う場合でも、URLが遷移します。本来なら、遷移せずにコンポーネントのロードなどが行われる予定です。

なお、ページが遷移した場合、自動的に現在のURLに対してopenRoute()が呼び出されます。こうすることで、URLの検証以降の作業が行われます。

Popstate処理

ブラウザの”戻る”、”進む”ボタンなどでpopstateイベントが発生した場合、RouteOrganizerがデフォルトの処理を行います。

イベント発生時には、その新しいルートに対するopenRoute()処理を行うことで、通常のロードと同じ流れの処理が行われます。またアタッチしているコンポーネントに対し、”beforePopstate”、”afterPopstate”イベントをトリガーするので、コンポーネント側でイベントハンドラを記述することで、popstateイベント時に独自の処理も行うことができます。

URLの検証と修正

RouteOrganizerではURLの検証と修正の仕組みを持っています。ただし、RouteOrganizerでは具体的な作業は行わず、イベントをトリガーするのみです。そのイベントハンドラに検証や修正のロジックを記述します。

validateRoute()メソッドを呼び出すことでこの処理が行われますが、validateRoute()メソッドはopenRoute()メソッドの中で自動的に呼び出されます。

validateRoute()は以下の流れで処理を行います。

  1. beforeValidateイベントをトリガーします。
  2. doCheckValidityオーガナイザイベントをトリガーします。
  3. 検証に失敗し、かつ“settings.autoFixURL”オプションがTrueなら、URLの自動修正を行います。
  4. doValidateURLイベントをトリガーします。
  5. afterValidateイベントをトリガーします。
  6. 検証結果がNGなら、例外をスローします。

オーガナイズ処理

”routes”セクションからルーティング情報に関する設定を読み込み、現在保持しているルーティング情報に追加します。これらの処理は設定情報が読み込まれた直後の”beforeStart”と、スペックファイルが読み込まれた直後の”afterSpecLoad”のタイミングで行われます。

セクション

  • routes

処理タイミング

  • beforeStart
  • afterSpecLoad

設定 (グローバル)

書式:

{
    "system": {
        "specPath": <specPath>,
    }
}

specPath

型:String

スペックファイルのパスを指定します。

設定

ルーティング情報は設定の“routes”セクションに記述します。“routes”セクションは配列となっており、複数のルート情報を設定できます。またいくつかの設定は、“settings”セクションに記述します。

書式:

{
    "settings": {
        "autoFixURL": <autoFixURL>,
        "validationName": <validationName>,
    },
    "routes": [{
        "name": <name>,
        "origin": <origin>,
        "path": <path>,
        "specName": <specName>,
    }],
}

autoFixURL

型:Boolean

URLの検証が失敗したときに、自動的に修正するかを指定します。

name

型:String

ルートの名前を指定します。

origin

型:String

ルートのオリジンを指定します。

path

型:String

ルートのパスを指定します。path-to-regexpで使用可能な正規表現を指定できます。パスの指定がない場合は、全てのURLが合致することになります。

specName

型:String

ルートのスペックファイル名を指定します。合致したルートのこのファイル名のファイルが、追加で読み込まれます。

validationName

型:String

検証時にどのパターンを使うかの名称を指定します。

タグ属性

いくつかのコンポーネント設定はタグの属性に指定することもできます。タグ属性は他の設定より高い優先順位を持っています。

bm-specpath

型:String

スペックファイルのパスを指定します。"system.specPath"と同じです。

イベント

afterNormalizeURL

doNormalizeURLイベントの後に発生します。

パラメータ

なし。

afterPopstate

Popstateイベント時にルータによってopen()メソッドが呼ばれ、画面が再描画された後に発生します。

パラメータ

なし。

afterSpecLoad

スペックファイルをロードした直後に発生します。

パラメータ

パラメータ型説明
specObjectロードしたスペックファイルをObjectに変換したものです。

afterValidate

doValidateイベントの後に発生します。

パラメータ

なし。

beforeNormalizeURL

normalizeURL()メソッドを呼び出した時に発生します。

パラメータ

なし。

beforePopstate

Popstate処理時に、ルータによってopenRoute()メソッドが呼ばれ、画面が再描画される前に発生します。

beforeValidate

validateRoute()メソッドが呼ばれたときに発生します。

パラメータ

なし。

doNormalizeURL

beforeNormalizeURLの後に発生します。

パラメータ

なし。

doValidate

自動修正が行われた後に、発生します。

パラメータ

なし。

拡張プロパティ

routeInfo

型:Object Inject:component get

現在のルートに関する情報を保持するオブジェクトです。

項目型説明
nameStringルートの名前です。
specNameStringルートのスペックファイル名です。
urlStringURLです。
pathStringURLのパスです。ホスト名やクエリーパラメータを含みません。
queryStringURLのクエリー部です。
parsedUrlObject現在のURLから生成されたURLクラスです。
routeParametersObjectパスのパラメータを保持するオブジェクトです。例えばルーティング設定のパスに”/:person”と指定されていた場合に”https://example.com/john”にアクセスした場合、{“person”:“John”}というオブジェクトになります。
queryParametersObjectURLのクエリーパラメータをオブジェクトに変換したものです。

spec

型:Object Inject:component get

現在のルート固有の追加設定を保持するオブジェクトです。

拡張メソッド

jumpRoute(routeInfo, options)

型:undefined Inject:component

パラメータに渡されたルート情報を元に生成されたURLへ遷移します。ページロードを発生させます。

パラメータ

パラメータ型説明
routeInfoObject遷移先のルート情報です。
optionsObjectオプション情報です。

戻り値

なし。

loadParameters()

型:Object Inject:component

現在のURLのクエリーパラメータをもとにオブジェクトを生成します。例えばURLのクエリ部が”?limit=10&offset=30”の場合、以下のオブジェクトを返します。

{
  "limit": 10,
  "offset": 30
}

パラメータ

なし。

戻り値

クエリーパラメータのオブジェクトです。

normalizeRoute(url)

型:undefined 非同期 Inject:component

パラメータに渡されたURLを正規化します。このメソッドはイベントをトリガーするのみで、実際の正規化作業はトリガーされるイベントのイベントハンドラで行います。

パラメータ

パラメータ型説明
urlString正規化するURLです。

戻り値

なし。

イベント

  • beforeNormalizeURL
  • doNormalizeURL
  • afterNormalizeURL

openRoute(routeInfo, options)

型:undefined 非同期 Inject:component

パラメータに渡されたルート情報に応じたルートへ遷移します。遷移先のルート情報と現在のルート情報をもとに、jumpRoute()、updateRoute()、refreshRoute()のいずれかが呼び出されます。

現在のルート情報と遷移先のルート情報の”name”が違う場合はjumpRoute()、”specName”が違う場合はupdateRoute()、いずれも同じ場合はrefreshRoute()が呼び出されます。

パラメータ

パラメータ型説明
routeInfoObject遷移先のルート情報です。
optionsObject遷移時のオプションです。以下のキーが有効です。
“pushState”
default:True
Boolean新しいルートをpushState()するかを指定します。pushState()すると、ブラウザの履歴に追加されます。
“jump”String遷移先のルートへ遷移する際に、ページロードを発生させます。

戻り値

なし。

refreshRoute(routeInfo, options)

型:undefined 非同期 Inject:component

コンポーネントのrefresh()メソッドを呼び、現在のルートを再描画します。

パラメータ

パラメータ型説明
routeInfoObject再描画のルート情報です。現在のところ未使用です。
optionsObjectオプション情報です。refresh()メソッドに渡されます。

戻り値

なし。

replaceRoute(routeInfo, options)

型:undefined Inject:component

パラメータに渡されたルート情報に応じたルートへ上書きします。ブラウザの履歴を残すことなく、現在のURLを置き換えます。

パラメータ

パラメータ型説明
routeInfoObject遷移先のルート情報です。
optionsObjectオプション情報です。

戻り値

なし。

switchSpec(specName)

型:undefined 非同期 Inject:component

別のスペックファイルを読み込み、それに切り替えます。

パラメータ

パラメータ型説明
specNameStringスペック名です。これに拡張子“.js”を付加したファイル名がロードされます。

戻り値

なし。

参照する設定

  • system.specPath

updateRoute(routeInfo, options)

型:undefined 非同期 Inject:component

パラメータに渡されたルート情報に応じたルートへ遷移します。ページロードを発生させずに、コンポーネントなどの読み込みなどを行います。

パラメータ

パラメータ型説明
routeInfoObject遷移先のルート情報です。
optionsObjectオプション情報です。

戻り値

なし。

validateRoute(url)

型:undefined 非同期 Inject:component

パラメータに渡されたURLを検証します。このメソッドはイベントをトリガーするのみで、実際の検証作業はトリガーされるイベントのイベントハンドラで行います。

イベントハンドラ内で検証を行い、検証が失敗した場合はthis.validationResult[“result”]にfalseを設定します。検証が失敗すると、“settings.autoFix”がTrueの場合は、自動修正を試みます。最終的に問題が解消されなければ、例外をスローします。

パラメータ

パラメータ型説明
urlString検証するURLです。

戻り値

なし。

イベント

  • beforeValidate
  • doValidate
  • afterValidate

オーガナイザイベント

  • doCheckValidity

参照する設定

  • settings.validationName
  • settings.autoFixURL
Previous Next

© 2019-2023 Masaki Yasutake

Bitsmist Frameworks

Table of Contents

Table of Contents

  • RouteOrganizer
    • 概要
      • ルートの決定
      • スペックファイル
      • ルートの変更
      • Popstate処理
      • URLの検証と修正
    • オーガナイズ処理
    • 設定 (グローバル)
      • specPath
    • 設定
      • autoFixURL
      • name
      • origin
      • path
      • specName
      • validationName
    • タグ属性
      • bm-specpath
    • イベント
      • afterNormalizeURL
      • afterPopstate
      • afterSpecLoad
      • afterValidate
      • beforeNormalizeURL
      • beforePopstate
      • beforeValidate
      • doNormalizeURL
      • doValidate
    • 拡張プロパティ
      • routeInfo
      • spec
    • 拡張メソッド
      • jumpRoute(routeInfo, options)
      • loadParameters()
      • normalizeRoute(url)
      • openRoute(routeInfo, options)
      • refreshRoute(routeInfo, options)
      • replaceRoute(routeInfo, options)
      • switchSpec(specName)
      • updateRoute(routeInfo, options)
      • validateRoute(url)

全般

  • 概要
  • インストール

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

  • Router

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

  • RouteOrganizer