要素に情報を覚えさせるときに、jQueryのdataを使うべきか？Node::setUserData()を使うべきか？

javascript

参考

Core/data - jQuery JavaScript Library
http://docs.jquery.com/Core/data#namevalue

Node#setUserData、Node#getUserDataの使い方(jQuery.dataみたいなもの) - 素人がプログラミングを勉強するブログ
http://d.hatena.ne.jp/javascripter/20080903/1220447061

Node.setUserData - MDC
https://developer.mozilla.org/En/DOM/Node.setUserData

jQueryのdataの実装

していることは、要素にexpandoというjQueryの$が生きている間ユニークなIDで、属性を追加している。つまり$(".class_name")[0][expando] = "入れたい値"と同じ感じ。
ただし、DOMを触ると遅いブラウザがあるためか、キャッシュが利用される。

http://jqueryjs.googlecode.com/svn/trunk/jquery/src/data.js

jQuery.fn.extend({
	data: function( key, value ){
		var parts = key.split(".");
		parts[1] = parts[1] ? "." + parts[1] : "";

// 一部省略
			return this.trigger("setData" + parts[1] + "!", [parts[0], value]).each(function(){
				jQuery.data( this, key, value );
			});
	},

var expando = "jQuery" + now(), uuid = 0, windowData = {};

jQuery.extend({
	cache: {},

	data: function( elem, name, data ) {
		elem = elem == window ?
			windowData :
			elem;
			debugger;

		var id = elem[ expando ];

		// Compute a unique ID for the element
		if ( !id )
			id = elem[ expando ] = ++uuid;

		// Only generate the data cache if we're
		// trying to access or manipulate it
		if ( name && !jQuery.cache[ id ] )
			jQuery.cache[ id ] = {};

		// Prevent overriding the named cache with undefined values
		if ( data !== undefined )
			jQuery.cache[ id ][ name ] = data;

		// Return the named cache data, or the ID for the element
		return name ?
			jQuery.cache[ id ][ name ] :
			id;
	},

比較

  • モジュラリティ
    • setUserData()
      • JavaScriptがDOMノードに属性を追加してはいけないという点から、Node::setUserData()の方が望ましい。(ただし、setUserDataのキーにモジュールの名称を追加しない場合、jQueryのdataを使った方がまし。)
* write
dirty: 125
data: 285
setUserData: 129

* read
dirty: 263
data: 427
getUserData: 254
      • jQueryのdataでは、jQuery.cacheのキャッシュは効いているみたいだけど、dirtyとの比較から、複雑な関数呼び出しに時間がかかっているみたい。
      • また、setUserData()/getUserData()が意外に速いんだが、DOMを触る組み込みメソッドの速度は、どこでキャッシュされるかなど、今度もう少し調べてみよう。

結論

多くの場面で速度は気にならないので、とりあえずjQueryのdataを使おう。
要素に直接属性を追加する点に関しては、そのうちdataの実装がsetUserData()を使うようになるだろう。