JavaScriptでHashChangeのシンプルなクラスを書いてみる
以前に紹介した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から切り離した作りにしてみた。
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に戻りたくなってきていたり。