Backbone.Routerに有限状態遷移機械を簡単に実装できるライブラリを作った

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

backbone

Backbone.js Advent Calendar 2014 2日目の記事です。

Backbone.Routerではハッシュフラグメント(#hogehoge)によってページ内容の出し分けをしてます。
時によっては前回のハッシュの状態によって、表示内容の制御をしたいときがあります。

例えば、TOPページから下層ページに移動したときはページ遷移のアニメーションを出すけど、
下層ページ間の移動ではアニメーションなしといったときです。
こういう時に使うと便利なのが”有限状態遷移機械“というモデルです。(Finite State Machine[FSM]ともいいます)
ある状態から別のある状態に遷移したときに、ある処理が発生しますよというモデルです。

さっきの話を例にとると、TOPページの状態を”#top”、下層ページAの状態を”#pageA”、
下層ページBの状態を”pageB”としたとき、下の図のような感じになります。

fsm.001

こいつをBackbone.Routerの中で条件分岐させてゴニョゴニョさせるとなると、
ちょっと見通しが悪くなってしまいそうでイケてなさそうなので
この度、FSMをBackbone.Routerで超簡単に実装できるライブラリを作りました。
backbone.router.fsm

以下使い方

underscoreとbackboneとこのライブラリ”backbone.router.fsm.js”をページで読み込む。

<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js'></script><script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js'></script>
<script type='text/javascript' src='./backbone.router.fsm.js'></script>

いつもはBackbone.Router.extendとしているところを、Backbone.FSMRouter.extendに変更

var MyRouter = Backbone.FSMRouter.extend();

引数に状態遷移時に発生する処理を定義していく。
default_stateはその名の通り初期状態。
状態名(ハッシュ)同士をアンスコで区切った文字列をキーとし、その値に関数を定義する。
状態1_状態2: function(){}こんな感じ。
そうすると状態1から状態2に遷移したときにイベントが発火して、定義した関数がキックされる。
(/#状態1から/#状態2にハッシュが変わった時。)

var MyRouter = Backbone.FSMRouter.extend({
    default_state: 'st1',
    routes: {
      st1: 'st1',
      st2: 'st2',
      st3: 'st3';
    },
    st1_st2: function() {
      $result.html('st1_to_st2');
    },
    st2_st3: function() {
      $result.html('st2_to_st3');
    }
});

詳しくはトップディレクトリに入ってるexample.htmlをいじってもらえればわかるかと思われます。
いじょうになります。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る