[JS]#以降のURLによって処理を振り分けるjQueryベースのフレームワーク「Sammy.js」


20110427 01

Sammy.js」はURLによって処理を振り分ける事ができるJavaScriptの軽量フレームワークです。
#以降のアドレスを利用してURLルーティングを実装されており、
簡潔に記述することを目指したフレームワークとなっています。

IT/WEB業界への転職なら求人サイトGreen

RubyのSinatraというフレームワークにインスパイアされたみたいですね。

わずか16KBしかないのですが、外部ファイルの読み込みやリダイレクト処理などがサポートされており、手軽に使う事ができます。

使い方

jQueryを読み込んだ後に、sammy.jsを読み込みます。

<script src="jquery.js" type="text/javascript"></script>
  <script src="sammy.js" type="text/javascript"></script>

URLに対して実行するアクションを設定します。

JavaScript

(function($) {
    //アクションの設定
    var app = $.sammy(function() {
        //TOPにアクセス
        this.get('#/', function() {
          $('#main').text('');
        });
        //TOP以外のアクションを追加していきます。
        this.get('#/test', function() {
          $('#main').text('Hello World');
        });

    });

    $(function() {
        app.run()
    });
})(jQuery);

html

Hellow Worldを表示
TOPページ

jQueryがベースになっているので、既存のプラグインを使って処理を実装する事も簡単です。
ちょっとしたWEBアプリケーションを作る際に便利そうです。

※jQueryのバージョンは1.4.1以上が必要です。

Githubにはサンプルコードもアップされていますので、
興味のある方は下のリンクからどうぞ。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

follow us in feedly