kazitori.js - レガシーブラウザでも使えるpushState対応のルーティングライブラリ
pushStateを使うとAjaxを使ったWebアプリケーションにも一意のURLを設けられるようになります。また、既に別な画面を表示しているユーザはAjaxでデータの転送量を減らし、最初の表示時はHTMLをレンダリングすると言った仕組みにもできます。 そんなpushStateやURLごとのルーティングを容易に実装できるようにしてくれるライブラリがkazitori.jsです。外部ライブラリ非依存なのでjQueryなど他のライブラリと組み合わせて使うこともできます。
サンプルのコードです。
class Router extends Kazitori
beforeAnytime:["testBefore"]
befores:
'/<int:id>':['testShow']
routes :
'/':'index'
'/</int:id><int:id>':'show'
'/<string:username>/<int:id>':'post'
index:()->
# console.log "index"
$('.currentPage').empty().append "this page is index"
show:(id)->
# console.log id
$('.currentPage').empty().append "this page is test" + id
post:(username, id)->
$('.currentPage').empty().append username + "post " + id
###
some before handlers
###
testBefore:()->
console.log "before!"
testShow:()->
console.log "before show"
$(()->
window.App = new Router({root:'/'})
$('.test').on "click", (event)->
event.preventDefault()
target = event.currentTarget.pathname
#url を変更
window.App.change(target)
)
ルーティングの仕組みはBackbone.jsに似ていますね。さらにbefore filterのような仕組みはRails的に使えます。URL設計が複雑になっても見通しの良いルーティングが実現できるようになっています。
なおIEはpushStateに対応していないブラウザは#(ハッシュ)で処理されるようになっています。URLを変更する時に window.App.change(target)
でできるのがいい感じです。
Backbone.jsのルーティングは分かりやすいですが、他の機能は使いたくないというケースはあると思いますので、そんな時にkazitori.jsを使ってみるのは面白そうです。
kazitori.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
js で URL を動的に変更できる pushState をイイカンジにさばいてくれる kazitori.js を作った | デブ ハゲ
kazitori.js Example
glassesfactory/kazitori.js</int:id></string:username></int:id>