jQuery Template vs Pure.js Javascript テンプレート簡易評価

jQuery Template

テンプレート内の変数に対し、対応する JSON を渡すことでテンプレートの展開を実現する。

テンプレート

<div>${NAME}</div>

変換処理

$.tmp([{ NAME : "xxx" })

  • 良い点:

HTML 構造を意識せず、JSON とのマッピングで変換可能。

  • 悪い点:

値の部分にテンプレート用変数が入り込むため、デザイン時のデータを置き換える必要がある。
デザイン変更時にはこの点の注意が必要。

■pure.js
テンプレート

template = "<div>あああ</div>"

変換処理

compile(template).directives.({ 'div' : 'NAME' }).render([{ NAME : "xxx" })
compile(template).autoRender([{ NAME : "xxx" })

  • 良い点:

デザイン時のHTML に手を入れずにテンプレート利用可能

  • 悪い点:

directives での指定に HTML 構造が入り込むため、変更に弱い(気が)。
autoRender 機能を利用することで構造の取り扱いを意識しなくてよいはずだが
そのためには要素のセレクタが必要となるため、デザイン時の HTML の変更が必要となる。(ただし、セレクタ部分だけなのでデザイン時のサンプルコンテンツは残る)

■結論
直感的に使いやすくデザイン面で変更が多いクラス属性に手を入れる必要がないことから、jQuery Template が、比較的使いやすいかな。と。

ただし、複雑なテンプレートに対しては別途評価が必要なので注意。