JavaScriptでHashChangeのシンプルなクラスを書いてみる
この記事は賞味期限切れです。(更新から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に戻りたくなってきていたり。
コメント