MACH3

MACH3.laBlog

WEB屋の音速実験室

JavaScriptでHashChangeのシンプルなクラスを書いてみる

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

HashChangeのシンプルなクラスを書いてみる

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から切り離した作りにしてみた。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/*!
 * 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 );
};

使い方

1
2
3
4
5
6
7
8
9
10
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に戻りたくなってきていたり。

Share |

コメントを投稿する

入力されたメールアドレスは公開されません。


*

「東北地方太平洋沖地震」義援金支援(Yahoo!基金)