2011/10/03

Template in Javascript

JSでMVCが流行ってたり？、node.jsが流行ってる昨今。
Backbone.jsが気になっていたものの、実業務での利用はまだ先になりそう。
JQuery Mobile + Backbone.js + PhoneGapをやりそうな時は、考える。
残念ながら、Titanium Mobileを利用する機会の方が先に訪れる予定...

動的コンテンツが多いビューをゴリゴリとJSで書いているとJQuery単体ではJSコードとDOMでカオスになる。
この為、HTMLテンプレートは、必要となる機会が多い。
妥協として、textboxやdisplay:noneでテンプレートを覆って利用してきたけれど、
いい機会だったのでテンプレート系ライブラリに挑戦してみた。
以前に試したのは、JQuery標準入り間近らしいTemplates。
利用方法は、こちらを参考にした。
けれど、投入案件のタイミング都合で流れたのだった。
そこに、Linux Journal( Androidアプリ出た )でMustache.jsを知った。
少しググってみると、パフォーマンスレポート記事があった。
試験したTemplatesは含まれていない。
こうして見ると、そこそこのパフォーマンスのようだ。

記法は、マニュアルに記載されている。
TemplatesとMustache.jsの共通機能の記法差異。
TemplatesMustache
変数${hoge}{{hoge}}
if else
 {{if hoge}}
  ${foo}
 {{else spam}}
   ${ham}
 {{/if}}

 {{#hoge}}
   {{foo}}
  {{/hoge}}
  {{#spam}}
   {{ham}}
  {{/spam}}
※if-else構文は存在しない為、
each構文を代替利用する!
foreach
 {{each hoge}}
  ${$value.foo}
 {{/each}}

  {{#hoge}}
   {{foo}}
  {{/hoge}}

この他、Mustacheにはラムダ対応など色々実装されている。
Templatesのscriptタグにテンプレートを押し込むをMustacheで表現すると、
<html>
 <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="mustache.js"></script>
 <script id="tmpl" type="text/x-js-tmpl">
  <b>{{hoge}}</b>
 </script>
 <body>
  <div>My name is<span id="nm"></span></div>
  <script type="text/javascript">
   $("#nm").html( Mustache.to_html($("#tmpl").text(),{hoge:'John'}) );
  </script>
 </body>
</html>
のようになる。
Templatesとの表記互換性や記号利用主体で可読性が低いといった課題はあるものの、
拡張性やファイルサイズなどを考慮するとMustacheはなかなか良さそう。
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)