2017年でこのポストはだいぶ時代遅れ間がありそうだけど、
シンプルなSPA構築する時に便利なdirectorの使い方メモ。

そんなに大きくないアプリケーションとかで、
jQueryとか流行りのフレームワークなしでシンプルにSPA構築したい時に
自分で一からネイティブに実装しても良いとは思うけど、
シンプルに使えるdirectorを使うと良さそう。

director

Usageに使い方など載ってはいるけど、簡単なexampleを。

directorのインストール

yarn init -y
yarn add director # or npm install director --save

#/hogeと#/fugaへのアクセスで指定の関数を実行する例だとすると..

// app.js

var hoge = function() {
  console.log('hoge');
};

var fuga = function() {
  console.log('fuga');
};

var routes = {
  '/hoge': hoge,
  '/fuga': fuga
}

var route = new Router(routes);
route.init();

HTMLで#/hoge、#/fugaのリンク設定。

<ul>
  <li><a href="#/hoge">#/hoge</a></li>
  <li><a href="#/fuga">#/fuga</a></li>
</ul>
<script src="./node_modules/director/build/director.min.js"></script>
<script src="./app.js"></script>

小規模サイトでDOM操作もそんなに無いって要件の時は良いかもしれない。