シンプルなSPA構築 director

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 操作もそんなに無いって要件の時は良いかもしれない。