HTML5では、全ての要素で使用できるグローバル属性として、独自データ属性（data-*）を使用することができます。
本来、HTMLは文書構造を定義するためのマークアップ言語ですので、文書に含まれないプログラムで利用するための「データ」というのは考慮されていませんでした。
画面遷移を伴わずAjax通信を多用するような実装では、Ajax通信に必要なデータやパラメータがHTML文書に影響を与えないよう、この独自データ属性を利用することになります。
この時、データやパラメータ毎に属性を設けるのは大変手間がかかるので、javascriptのオブジェクトを一つの独自データ属性にぶっ込んで、独自データ属性とjavascriptとの間のデータ交換を簡単にしてしまおう、というのが今回の趣旨です。
ビフォー
<span data-id="00" data-date="2011/06/02" data-hoge="foobar">これは面倒そう…</span>
アフター
<span data-obj="id=00&date=2011/06/02&hoge=foobar">スッキリすんじゃね？</span>
既に勘の良い方は、上記例をご覧になっただけでお判りですね。
そうです、javascriptオブジェクトをクエリ文字列としてシリアライズしてしまうわけです。
JSON形式のデータをぶち込んでも良かったのですが、クエリ文字列の方が、
データを変換することなくシームレスにGET/POSTリクエストパラメータへと利用できます。
予め必要なものは、シリアライズ／デシリアライズするための２つの関数。
function query2obj(s){
var dec = decodeURIComponent;
var par = new Array, item;
if (typeof(s) == 'undefined') return par;
if (s.indexOf('?',0)>-1) str = str.split('?')[1];
s = s.split('&');
for (var i=0; s.length>i; i++){
item = s[i].split('=');
if (item[0] !=''){
par[item[0]] = typeof(item[1]) == 'undefined' ? true : dec(item[1]);
}
}
return (par);
}
function obj2query(obj){
var enc = encodeURIComponent;
var list=[];
for (var key in obj){
var k = enc(key);
var v = enc(obj[key]);
list[list.length] = k+'='+v;
}
var query = list.join('&');
return(query);
}
これだけだと面白くないので、デモとして、要素間でデータをコピー＆ペーストするデモを作ってみました。
ソースが汚いやら、&を文字参照に変換してないやら、オブジェクト「丸ごと」じゃねぇやらのご指摘・ご批判は、誠におっしゃるとおりで返す言葉もございません。
Xvfb（仮想フレームバッファ）からFirefoxを立ち上げて画面キャプチャを取得する際、ブラウザの余分な部分を取得しないためのカスタマイズ。