この記事は賞味期限切れです。（更新から1年が経過しています）

以前に紹介したSammy.jsのサイトを見に行ったら、
何やら色々とバージョンアップしてフレームワーク的な物に生まれ変わっていました。
もうちょっとシンプルな物が欲しい場合もあるので、エクササイズを兼ねて書いてみました。

HashChangeとは

たとえば、いわゆるページ内リンクで

http://www.example.com/

から

http://www.example.com/#foobar

にURLが変わったタイミングにイベントを受け取って
なんやかんやする為のもの。

わりと有名だと思われるのが、jQuery hashchange eventプラグインですね。
» Ben Alman » jQuery hashchange event

あとは、冒頭で言ったSammy.js。こちらもjQueryプラグインです。
» Sammy.js / A Small Web Framework with Class / RESTFul Evented JavaScript

車輪の再発明です

本稿は車輪の再発明です。
日々変わりゆく自分のJSの書き方をログっておくのに丁度良い題材な気がしたので。

特にクラスの書き方なんかはなかなか定まらず、ふらふらしてます。
近いうちにそこら辺もまとめておきたい物です。

書いたもの

» location.hashの変更イベントを受け取るためのもの。 — Gist

今回は敢えてjQueryから切り離した作りにしてみた。

/*!
 * HashChange.js
 * @version 1.0
 * @author mach3
 * @example
 * var foo = new HashChange();
 * foo.config({ onInit:myInitFunc, onChange:myChangeFunc, interval:100 });
 * foo.start(); // When start to observe.
 * foo.stop(); // When stop to observe.
 */

/**
 * Creates a new HashChange.
 * @constructor
 * @class observe changes of locatin.hash.
 * @param {Object} options Configuration options.
 */
var HashChange = function( options ){

    var my, vars, methods ;

    my = this;
    vars = {
        onChange : null,
        onInit : null,
        interval : 100,
        timer : null,
        hash : null
    };
    methods = {
        isFunction : function( target ){
            return typeof( target ) === "function" ;
        }
    };

    /**
     * Configure options.
     * @param {Object} options Configuration options.
     */
    my.config = function( options ){
        for( i in options ){
            if( !vars.hasOwnProperty( i ) ){ continue; }
            vars[i] = options[i];
        }
    };
    /**
     * Start to observe.
     */
    my.start = function(){
        my.run();
    };
    /**
     * Check whether location.hash has been changed or not,
     * call onInit/onChange function if set,
     * and call itself by timeout again.
     */
    my.run = function(){
        var h = location.hash;
        if( vars.hash === null && methods.isFunction( vars.onInit ) ){
            vars.onInit( h );
        } else if ( vars.hash !== h && methods.isFunction( vars.onChange ) ){
            vars.onChange( h );
        }
        vars.hash = location.hash;
        vars.timer = setTimeout( my.run, vars.interval );
    };
    /**
     * Stop to observe.
     */
    my.stop = function(){
        clearTimeout( vars.timer );
    };

    my.config( options );
};

使い方

var myHashChange = new HashChange();
myHashChange.config({
    onInit : function( hash ){
        console.log( "Initialize : " + hash );
    },
    onChange : function( hash ){
        console.log( "Change : " + hash );
    }
});
myHashChange.start();

config() でイベントリスナを含めたオプションを設定して、
start() すればlocation.hashの監視を始めます。
監視を停止したい時はstop()で。

尚、コンストラクタでもオプション受け取れます。

オプション

onInit

初期化時のイベントリスナ

onChange

location.hashが変更された時のイベントリスナ

interval

監視用タイマーのインターバル。デフォルトは100ミリ秒。

まとめ

やっぱりjQueryプラグイン！っていう感じの書き方より、
クラスベースっぽく書くのが好みみたいです。

ちょっとだけ、Prototype.jsに戻りたくなってきていたり。