jQuery.data() について

最近 jQuery のプラグインを作っていて、DOM 要素毎にデータを一時的に保持できる機能を持ったメソッド jQuery.data() がかなり便利であることに気がつきました。

例として検索フォームなどでよく使われている、フォームの入力フィールドにあらかじめ説明を入れておき、フォーカス時に消すプラグイン（にするほどのものじゃないけど）のソースを以下に載せます。

(function($) {
  $.fn.previewInput = function(previewValue) {
    if((typeof previewValue != 'string') || (previewValue.length == 0)) return;

    return this.each(function() {
      if(this.value == undefined) return;

      // 元の文字色を保存しておく
      $.data(this, 'previewInput', $(this).css('color'));

      // call, focus, blur 時に文字色を変更する
      $(this).attr('value', previewValue)
      .css('color', '#999999')
      .blur(function() {
        if($(this).val().length == 0) {
          $(this).val(previewValue).css('color', '#999999');
        }
      }).focus(function() {
        if($(this).val() == previewValue) {
          $(this).val('').css('color', $.data(this, 'previewInput'));
        }
      });
    });
  };
})(jQuery);

そこで、この data() メソッドがどういう仕組みでデータを保存しているのか疑問に思ったので、Firebug で調べてみました。

DOM の該当要素に、jQuery オブジェクトの一意の名前である「”jQuery” + timestamp 値」のプロパティを作成し、そこに ID(uuid) がセットされています。
その ID と jQuery 内の配列 cache の添え字が紐付いており、データを設定 / 取得することができるようになっていることが分かりました。

紹介したプラグインもそうですが、イベント処理で変更前の状態を保持しておく場所等で有効活用できそうですね。

参考リンク

• jquery.jsを読み解く：第3回　jQueryライブラリ（470行目～769行目）｜gihyo.jp … 技術評論社
• jQuery.dataの使い方 : tech.kayac.com - KAYAC engineers’ blog
• jQueryのdata()を勉強したけど構造がイメージできずに撃沈気味… | THE HAM MEDIA

関連する記事

• jQuery でテーブルの背景色を 1 行置きに変更する
• 連続するページの JSONP を取得して最後に Callback 関数を呼ぶライブラリ
• 短縮 URL を展開する Greasemonkey
• 相手に Follow されてるかどうかを表示するグリモン
• マク語に変換する bookmarklet