あるいは kanazawa.js v1.0.1 勉強会 : ATND に参加してきた。（前回と同じパターンの使い回し）
なぜdispatcher（あるいは router）か
実はピンときてなかったけど、なんかこういう手法があるっぽいということだけ知ってた。
pixiv Tech MeetingでpixivのJSの話をしました
から辿れるスライドを見てなるほどなと思った。自分がいちばんなるほどと思ったのは
WAFの不自由さ
というか layout ファイルの <script> を可変にできるように仕組み用意していちいちそこに何か文字送ったりするのってめんどくさいよねというか、要するに
script loading も DRY に
ってことじゃないかな。もっかい整理すると
- layout ファイルで JavaScript のライブラリの読み込みは共通にできる
- でも layout ファイルの中に手を出せるのはサーバサイドだけだし、一部でだけ共通な JS ファイルの読み込みは面倒
- 集中管理できないし、分業してると何かと面倒
という問題を解消するために dispatcher（あるいは router）が有用だよってことだね。なるほどなぁ。
いくつか見つけた
日本語で読めるものもいくつか。kayac と pixiv は手作りで、ライブラリ側にこの機能が統合されているものはまだあまり見かけない。もしかして uupaa が初めて？
kayac バージョン
- そこそこ規模が大きくても何とかなるjavascriptの設計（URL dispatcherの薦め） | tech.kayac.com - KAYAC engineers\' blog
- 中規模向けJS設計
pixiv バージョン
先ほどの納得のいった資料の元ですな。
uupaa バージョン
uupaa-js - Project Hosting on Google Code
jsdo.it にサンプルが載ってる。
uu.ready("href:URL Dispatcher", callback…) test code - jsdo.it - Share JavaScript, HTML5 and CSS
jDispatcher（ちょっと意図と違う）
みんな大好き jQuery の plugin であったら便利じゃねーのと思ったので探したんだけど、これは Ajax Request を飛ばすのが目的のものなので除外。
jQuery Router
こっちが今回の目的に合致する jQuery plugin.
複数ページの window.onload をまとめて書ける jQuery プラグインを書きました | Tanablog
jQuery Router を試す
全部のコードを晒すのもアレなので一部だけ。Ruby の WAF だとだいたいこんな感じでまとめられるはず。実際に以下のコードは Sinatra 上で動かして確認した。
| jQuery( function($) { | |
| $.route( | |
| { | |
| path: /^\/$/, | |
| func: function() { | |
| $LAB.script('/javascripts/console_hello.js'); | |
| } | |
| }, | |
| { | |
| path: /^\/hello/, | |
| func: function() { | |
| $LAB.script('/javascripts/alert_hello.js'); | |
| } | |
| }); | |
| }); |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title><%= @title %></title> | |
| </head> | |
| <body> | |
| <h1><%= @title %></h1> | |
| <%== yield %> | |
| <script type="text/javascript" src="/javascripts/lab.js"></script> | |
| <script type="text/javascript"> | |
| $LAB.script('/javascripts/jquery-1.5.1.min.js'). | |
| script( '/javascripts/jquery.Router.js' ).wait(). | |
| script( '/javascripts/application.js' ); | |
| </script> | |
| </body> | |
| </html> |
これで application.js だけで必要な script の読み込みを制御できるので、サーバサイドの処理には手を加える必要がないし、分業している場合はサーバサイドの人に処理の追加を頼む必要がない。
楽ちん。
ちなみに $LAB.script() は LABjs のメソッド。
感想
個人的にはもっと Sinatra ライクな rouing ができると嬉しいと思う。正規表現のみの routing は罠にハマりやすいんじゃないかな。まぁテスト書けってことなんだろうけど、このままだとテストも書きにくい（というか書ける？）。
制御したい URL のパターンが増えたらテスト書ける router を別に探した方がいいのかもしれない。routing が一カ所に集まっていれば差し替えも楽だし。
※ 今回紹介した中では pixiv バージョンにはテストがついてる。
LABjsはこの辺参照
Loading And Blocking JavaScript だそうで。
非同期 load、同期 load を自在に設定できる便利ライブラリ。JavaScript を細かく分割して必要なものだけロードしたいなら持ってこい。つまり dispatcher, router と相性がよい。はず。
まとめ
kanazawa.js 超かっこよくてオサレなのでみんな来ればいいよ！（えー
LABjs と Sinatra で別エントリ書くと思う。
おまけ
git の bundle ファイル を上げてみた。fetch してから1 git clone するとどんな風に作業進めたか見れるよ。
bundle ファイルをただ上げただけなので直接 clone できません。 ↩