2011-03-06

JavaScript Url DispatcherとかRouterについて調べた

あるいは 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 バージョン

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 を飛ばすのが目的のものなので除外。

dispatch | jQuery Plugins

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');
}
});
});
view raw application.js hosted with ❤ by GitHub
<!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>
view raw layout.erubis hosted with ❤ by GitHub

これで 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 するとどんな風に作業進めたか見れるよ。

  1. bundle ファイルをただ上げただけなので直接 clone できません。 

About

例によって個人のなんちゃらです

Recent Posts

Categories

Tool 日々 Web Biz Net Apple MS ことば News Unix howto Food PHP Movie Edu Community Book Security Text TV Perl Ruby Music Pdoc 生き方 RDoc ViewCVS CVS Rsync Disk Mail FreeBSD Cygwin PDF Photo Zebedee Debian OSX Comic Cron Sysadmin Font Analog iCal Sunbird DNS Linux Wiki Emacs Thunderbird Sitecopy Terminal Drawing tDiary AppleScript Life Money Omni PukiWiki Xen XREA Zsh Screen CASL Firefox Fink zsh haXe Ecmascript PATH_INFO SQLite PEAR Lighttpd FastCGI Subversion au prototype.js jsUnit Apache Trac Template Java Rhino Mochikit Feed Bloglines CSS del.icio.us SBS qwikWeb gettext Ajax JSDoc Rails HTML CHM EPWING NDTP EB IE CLI ck ThinkPad Toy WSH RFC readline rlwrap ImageMagick epeg Frenzy sysprep Ubuntu MeCab DTP ERD DBMS eclipse Eclipse Awk RD Diigo XAMPP RubyGems PHPDoc iCab DOM YAML Camino Geekmonkey w3m Scheme Gauche Lisp JSAN Google VMware DSL SLAX Safari Markdown Textile IRC Jabber Fastladder MacPorts LLSpirit CPAN Mozilla Twitter OpenFL Rswatch ITS NTP GUI Pragger Yapra XML Mobile Git Study JSON VirtualBox Samba Pear Growl Mercurial Rack Capistrano Rake Win RSS Mechanize Sitemaps Android JavaScript Python RTM OOo iPod Yahoo Unicode Github iTunes God SBM friendfeed Friendfeed HokuUn Sinatra TDD Test Project Evernote iPad Geohash Location Map Search Simplenote Image WebKit RSpec Phone CSV WiMAX USB Chrome RubyKaigi RubyKaigi2011 Space CoffeeScript Nokogiri Hpricot Rubygems jQuery Node GTD CI UX Design VCS Kanazawa.rb Kindle Amazon Agile Vagrant Chef Windows Composer Dotenv PaaS Itamae SaaS Docker Swagger Grape WebAPI Microservices OmniAuth HTTP 分析基盤 CDN Terraform IaaS HCL Webpack Vue.js BigQuery Middleman CMS AWS PNG Laravel Selenium OAuth OpenAPI GitHub UML GCP TypeScript SQL Hanami Document SVG AsciiDoc Pandoc DocBook Develop Jekyll macOS Node.js Vite Heroku Transformer AI Data Cloud Wasm