JS軽量クライアントサイドルーティングライブラリいろいろ

JSの軽量クライアントサイドルーティングライブラリをなんとなくまとめました。

ここで述べるルーティングライブラリとは、文字列、または正規表現によって定義したパスに対してコールバックをマッピングできるライブラリを指します。また、ルーティング機能のみを提供するものを中心として紹介します。backbone.js等のフレームワークは省いています。

kazitori.js

Example

    class Router extends Kazitori
        beforeAnytime:["testBefore"]
        befores:
            '/<int:id>':['testShow']
        routes :
            '/':'index'
            '/<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"


    $(document).ready ()->
        window.App = new Router({root:'/'})

パスの記法はpythonのフレームワークwerkzeugを参考にしていて、パラメータの型指定ができるようです

あとドキュメントが日本語です

bower、npm からのインストールに対応しています

page.js

https://github.com/visionmedia/page.js
http://visionmedia.github.com/page.js/

	page('/', index)
	page('/user/:user', show)
	page('/user/:user/edit', edit)
	page('/user/:user/album', album)
	page('/user/:id', user.load, user.show)
	page('/user/:id/edit', user.load, user.edit)
	page('/user/:name/:operation', callback)
	page('/user/:name/:operation?', callback)
	page('/user/*', loadUser)	
	page('/file/:file(*)', loadUser)
	page(/^\/commits\/(\d+)\.\.(\d+)/, loadUser)
	page('*', notfound)
	page()

パスに対してコールバックを複数マッピングできるところが良い感じですね。サンプルコードのように、リソースの読み込みと表示を明確に分けることがで
きます。

	page(path, callback[, callback ...])

bowerからのインストールに対応しています

Crossroads.js

https://github.com/millermedeiros/crossroads.js
http://millermedeiros.github.com/crossroads.js/

	// Basic usage
	crossroads.addRoute('/news/{id}', function(id){
	  console.log(id);
	});
	crossroads.parse('/news/123'); //will match '/news/{id}' route passing 123 as param

	// Optional parameters
	crossroads.addRoute('/news/{id}/:date:', function(id, date){
	  console.log(id +' - '+ date);
	});
	crossroads.parse('/news/123'); //match route and pass "123" as param
	crossroads.parse('/news/45/2011-09-31'); //match route passing "45" and "2011-09-31" as param

	// Rest segments
	// {section*} will match multiple segments
	crossroads.addRoute('/news/{section*}/{id}', function(section, id){
	  console.log(section +' - '+ id);
	});
	//match route and pass "lorem" and "123"
	crossroads.parse('/news/lorem/123');
	//match route passing "lorem/ipsum/dolor" and "45"
	crossroads.parse('/news/lorem/ipsum/dolor/45'); 

	// Decode Query String
	crossroads.addRoute('foo.php{?query}', function(query){
	  console.log(query.lorem +' - '+ query.dolor);
	});
	// match route passing {lorem:"ipsum", dolor:"amet"}
	crossroads.parse('foo.php?lorem=ipsum&dolor=amet');

	//capturing groups are passed as parameters to listeners
	crossroads.addRoute(/^news\/([0-9]+)$/, function(id){
  	console.log(id);
	});
	crossroads.parse('/news/123'); //will match route passing "123" as param
	crossroads.parse('/news/qwerty'); //won't match route
	crossroads
    	.addRoute('{section}', loadSection)
    	.rules = {
       		section : ['home', 'login', 'contact']
    	};

長いので続きはこちらをどうぞ
パラメータのバリデーションまでできるなど大変高機能なようですね

bowerからのインストールに対応しています

Davis.js

Example

	var app = Davis(function () {
	  this.get('/welcome/:name', function (req) {
	    $('body').append('<h1>Hello there, ' +  req.params['name'] + '!</h1>')
	  })
	})

	$(document).ready(function () {
	  // append a link to trigger the route
	  $('body').append('<a href="/welcome/bob">Greet</a>');
	
	  app.start();
	})

bowerからのインストールに対応しています

PathJS

https://github.com/mtrpcic/pathjs
http://mtrpcic.github.com/pathjs/

Example

http://mtrpcic.github.com/pathjs/hashtag_basic.html
http://mtrpcic.github.com/pathjs/html5_basic.html
http://mtrpcic.github.com/pathjs/advanced_routing.html

	function clearPanel(){
        // You can put some code in here to do fancy DOM transitions, such as fade-out or slide-in.
    }

    Path.map("#/users").to(function(){
        alert("Users!");
    });

    Path.map("#/comments").to(function(){
        alert("Comments!");
    }).enter(clearPanel);

    Path.map("#/posts").to(function(){
        alert("Posts!");
    }).enter(clearPanel);

    Path.root("#/posts");

    Path.listen();

Grapnel.js

	var hook = new Grapnel(':');
	
	hook.add('show', function(value){
    	console.log('Showing: %s', this.value);
	});

	hook.on('match', function(value, action){
	    console.log('Grapnel.js works! (Hook: "%s", Action: "%s", Value: "%s")', this.hook, action, value);
	});

Routie

https://github.com/jgallen23/routie
http://projects.jga.me/routie/

	// Here is the most basic way:
	routie('users', function() {
	    //this gets called when hash == #users
	});
	
	// If you want to define multiple routes you can pass in an object like this:
	routie({
	    'users': function() {
	
	    },
	    'about': function() {
	    }
	});

	// Routie also supports regex style routes, so you can do advanced routing like this:
	routie('users/:name', function(name) {
	    //name == 'bob';
	});

	// Optional Params
	routie('users/:name?', function(name) {
	    //name == undefined
	    //then
    	//name == bob
	});

	// Wildcard
	routie('users/*', function() {
	});
	
	// Catch All
	routie('*', function() {
	});

	// Named Routes
	routie('user users/:name', function() {});

Named Routesという機能はユニークですね

bowerからのインストールに対応しています

RouterJs

https://github.com/haithembelhaj/RouterJs
http://haithembelhaj.github.com/RouterJs/

    //Instanciate the router
    var router = new Router();

    //Define some routes with their respective callback function
    router.route('/posts/:id', function(id){ console.log(id)});
    router.route('/route/*path', function(path){ console.log(path)});
    router.route('', function(){ console.log("default route")});

    /* 
    * Navigate to route
    * the navigate method takes two extra arguments trigger and replace
    * trigger is by default true and replace is by default false
    */

    router.navigate('/posts/22');
    router.navigate('/posts/23', false); //ommit calling the callback
    router.navigate('/route/to/heaven', true, false); //just replace without history traceback

    //Navigate throught the History
    router.go(2); //forward navigation
    router.go(-3); //backward navigation

navigateというメソッドに、コールバックを呼ばないオプションがありますね。どんなシーンで使うのでしょう。わたし気になります。

まとめ

フレームワークのルータにインスパイアされて出来たものが多いようですね。

|pushState|依存ライブラリ|パッケージマネージャ|ライセンス
---|---|---|---|---|---|---|---|---|---
page.js|◯||bower|MIT
Davis.js|◯|jQuery 1.4.2+|bower|MIT
PathJS|◯||bower|MIT
Grapnel.js|◯|||MIT
Routie|||bower|MIT
RouterJs|◯|History.js||MIT
Crossroads.js||JS-Signals|npm|MIT
kazitori.js|◯||npm bower|MIT|