Pure DOM なツリービルダー (べんり版 & 総合的には jQuery よりはやいこともあるよ版)

subtech

21:34

http://subtech.g.hatena.ne.jp/cho45/20071117/1195309573 の便利版

http://svn.coderepos.org/share/lang/javascript/pdc/trunk/pdc.js

<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 を直接指定すれば問題ないです。

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

❤️ 投げ銭する