Hatena::Groupsubtech

冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。

 | 

Jul 19, 2008 (Sat)

Pure DOM なツリービルダー (べんり版 & 総合的には jQuery よりはやいこともあるよ版) 21:34 はてなブックマーク - Pure DOM なツリービルダー (べんり版 & 総合的には jQuery よりはやいこともあるよ版) - 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。

HTML ツリービルダー (Pure DOM) - 冬通りに消え行く制服ガールは?夢物語にリアルを求めない。 - subtech の便利版

<div class="entry">
	<h2 class="title">#{title}</h2>
	<div class="body">
		#{body}
	</div>
	<div class="info">
		<span class="datetime">#{datetime}</span>
		<span class="author">#{author}</span>
	</div>
</div>

みたいな文字列が template1 に入ってて

var t = dom(template1, parent, {
	title    : "aaa<aaa>",
	body     : "foobar",
	datetime : "2008-07-19(0日前)T20 : 26 : 54+09 : 00",
	author   : "cho45"
});

ってやると #{foobar} がフィルされます。

ってだけだと別に普通にエスケープしながら置換したらいいじゃんって感じですが、返り値が便利です

t.root     //=> div.entry
t.title    //=> h2.title
t.body     //=> div.body
t.info     //=> div.info
t.datetime //=> span.datetime
t.author   //=> span.author

みたいにクラス名に対応する要素が入ってます (ルートは root に)。

ベンチマーク:

- "jQuery only $"        -> $(template1) しているだけ
- "jQuery pre-replaced"  -> #{} を置換してから $(template1)
- "jQuery"               -> $(template1) してから find/end を駆使してテキスト設定
- "dom()"                -> 上記関数使って一括設定

jQuery の find/end は (中身想像すればあたりまえですが) コスト高いです。でも jQuery 使っていて、先に HTML をばーーーって作ってしまってから、操作したい要素を取得したいケースは結構あって、find を使ってしまいがちです (というかそうしないと綺麗に書けない)

dom() だとパースして要素を追加するのと、欲しい要素の列挙を同時にやっているので、その分有利です。それと Pure DOM なのでテーブル関係のBKなハックを入れなくても parent を直接指定すれば問題ないです。

実体/数値参照を展開してないのでそのコード入れたらもっと遅いかもですね。

gerry++ 20:14 はてなブックマーク - gerry++ - 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。

ガムくいすぎ?

 | 

スポンサード リンク

書いてる人

cho45 (佐藤広央) (www.lowreal.net)

Perl, JavaScript, Ruby, HTML, CSS, Web etc


スポンサード リンク