search
LoginSignup
117

More than 5 years have passed since last update.

posted at

updated at

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
117