Fork me on GitHub

Kazitori.js is pushState Library.

GET Kazitori.js

Lastest version:1.0.0

Introduction

Kazitori.js は複雑になりがちな pushState 処理をいい感じにさばいてくれる
ルーターを提供するライブラリです。
Kazitori.js を使うことによって以下のことが簡単に実現します。

  • 見通しのいいルーティング
  • URL 変数、URL クエリ
  • 事前処理
  • イベントドリブンな進行
  • ルーターのネスト機能

IE7以上の環境で動作します。
古い IE や、一部 Android など、pushState に対応していないブラウザでは
自動的にハッシュ(#)として処理されます。

生の JavaScript だけでなく、CoffeeScript、Haxe でのコーディングをサポートしています。
Haxe については Extern を公開しているので合わせてご利用下さい。

How to use

基本的な使い方

Kazitori.js を使うには、Kazitori を継承したクラスを作り、インスタンス化します。
Kazitori を継承する際に、URL ルールの設定や対応したメソッドの実装を行います。
以下に最もシンプルなサンプルを示します。

URL ルールの定義

Kazitori.js では、サーバーから非同期にデータを読み込みコンテンツを展開させるため
動的な要素を持った URL ルールを定義できます。
ルーティングを定義するroutesプロパティに対し使える URL ルールは以下になります。

/urlスタティックな文字列
/<id>URL 変数
/<int:id>型指定のある URL 変数

URL 変数として指定した値は、対応するメソッド内で引数として受け取ることができます。

URL 変更の実行

pushState で URL を変更したい場合はchangeメソッドを、
push ではなく、現在の URL と置き換える場合はreplaceメソッドを使うことで
URL を変更することができます。

事前処理

URL ルールとマッチした処理を実行する前に、素材の読み込み確認などを事前に行いたい場合
beforesプロパティに指定することで実現できます。

また、beforeAnytimeプロパティに指定することで、URL とのマッチにかかわらず
pushState による URL 変更イベントが発生する度に実行したい処理を登録することができます。

事前処理の中断、再開

例えば素材が読み込まれていなかった場合、
一度中断して読み込み後、再度中断した箇所から再開するような処理を
Kazitori ではsuspend / resumeとして提供しています。

ルーターのネスト

Kazitori は、Kazitori 同士をネストすることができます。
これにより、Kazitori をルーターと言うよりはコントローラーという概念に置き換え
URL ごとに分けて開発することができます。

サーバー側の設定

pushState で URL を変更する場合、下層 URL に直接アクセスがあった時の対処をする必要があります。

サーバーサイドで動的に HTML を吐き出すしくみが備わっていない場合、htaccess や nginx の設定などで
それの代わりとする必要があります。

以下に Apache の htaccess と nginx の設定例を示します。

Examples

Kazitori.js を使ったサンプルと実例です。
使ったよとだとか載せてくれ!という連絡をいただければ随時追加させて頂きます。

Authors

Thanks for assistance and contributions:

GET Kazitori.js

Lastest version:1.0.0