受託メインのWeb制作者に捧げるURLディスパッチャーを書いた #JavaScript

url-dispatcher

いまさら需要があるかどうか分かりませんが、URLに応じてJSの処理を振り分けるためのディスパッチャーを書きました。
受託メインのWeb制作現場（たとえば弊社とか！）では画面によって必要な処理がまちまちだったりしてJSが散らかりがちですが、URLディスパッチャーを利用すれば全ての画面の処理を1つのJSにまとめて書いておくことも可能です。

こういった機能は以前からスニペットとしてネット上に色々転がっているのですが、BackboneのRouterのようにURLからパラメーターを受け取れる機能を持ったものがほしかったので自分で書きました。

URLの解析パターンやマッチングなどはBackboneのコードを参考にしまくりました。
まじでありがとうBackbone！

インストール

いくつかのインストール方法を用意していますのでお好きなやり方をお選びください。

npm

npm install url-dispatcher --save

var Dispatcher = require('url-dispatcher');

Bower

bower install url-dispatcher --save

bower_components/url-dispatcer/destディレクトリに収録されているファイルをコピーするなどしてください。

<!-- IE9以上で良ければ -->
<script src="path/to/script/dispatcher.min.js"></script>

<!-- IE8に対応したければ -->
<script src="path/to/script/dispatcher.compat.min.js"></script>

手動

ファイルをダウンロードする
ファイルを解凍する
destディレクトリに収録されているファイルをコピーするなどしてください。

<!-- IE9以上で良ければ -->
<script src="path/to/script/dispatcher.min.js"></script>

<!-- IE8に対応したければ -->
<script src="path/to/script/dispatcher.compat.min.js"></script>

使い方

とりあえず以下がサンプルコードです。

/**
 * コンストラクターにルーティングマップを渡す
 */
var dispatcher = new Dispatcher({
  routes: {
    '/': function () {
      return 'root';
    },

    '/hoge': function () {
      return '/hoge';
    },

    // :piyo みたいに書くとコールバック関数に値が渡される
    '/hoge/:piyo': function (piyo) {
      return {
        piyo: piyo
      };
    },

    '/hoge/:piyo/:fuga': function (piyo, fuga) {
      return {
        piyo: piyo,
        fuga: fuga
      };
    },

    // urlクエリーがマッチした場合の第1引数はクエリー文字列全体
    '/hoge?piyo=:fuga&foo=:bar': function (search, fuga, bar) {
      return {
        search: search,
        fuga  : fuga,
        bar   : bar
      };
    },

    // *splat みたいに書くとパスとクエリー文字列に分けて渡される
    '/foobar/*splat': function (path, search) {
      return {
        path  : path,
        search: search
      };
    }
  }
});

/**
 * runメソッドにURL文字列を渡して実行すると対応するコールバック関数が呼ばれる
 */
dispatcher.run(location.href);

初期化

まずはコンストラクターにBackbone.Routerと同じような書式でルーティングマップを渡します。
マッチさせたいパスと、そのパスにおいて実行したいコールバック関数をセットにしてroutesオブジェクトにまとめてください。

定義した処理の呼び出し

コンストラクターから作成したインスタンスの runメソッドにURL文字列を渡して実行すれば、ルーティングマップで定義した条件に従ってコールバック関数が呼び出されます。
例えば上記のコードにおいてページのURLが http://maboroshi.biz/hoge/1/2だった場合は以下のような実行結果となります。

// location.href が 'http://maboroshi.biz/hoge/1/2' の場合
dispatcher.run(location.href);
// => { piyo: '1', fuga: '2' }

例えばこんな使い方

例えば特定のページにのみ必要なライブラリーなどを非同期に読み込ませる、なんてこともできます。

/**
 * コンストラクターにルーティングマップを渡す
 */
var dispatcher = new Dispatcher({
  routes: {
    '/hoge': function () {
      $.ajax('mono-sugoi-library.js', {
        dataType: 'script'
      }).done(function () {
        // 'mono-sugoi-library.js' が読み込まれたあとの処理
      });
    }
  }
});

/**
 * runメソッドにURL文字列を渡して実行すると対応するコールバック関数が呼ばれる
 */
dispatcher.run(location.href);

上記のコードでは、例えばページのURLが http://maboroshi.biz/hoge だった場合に mono-sugoi-library.js が読み込まれます。

バグとか

バグなどありましたらGitHubにissueとかprとか是非お寄せください！